错误:找不到模块.../node_modules/next/link'导入自...你是想导入.../node_modules/next/link.js吗?

iqih9akk  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(369)

我试图为我的Next.js应用捆绑一个React组件库,但我无法找出以下错误的原因。在过去的几天里,我尝试了Rollup、TS编译器和package.json的不同配置,但我觉得我在这里缺乏一些经验和一些关键的知识,因为我真的不明白错误日志试图告诉我什么。

Server Error
Error: Cannot find module '/home/ola/Projects/lifeitself/flowershow/node_modules/.pnpm/file+packages+core+flowershow-core-0.0.4.tgz_wwvq4sry3mrfcince3djb3idna/node_modules/next/link' imported from /home/ola/Projects/lifeitself/flowershow/node_modules/.pnpm/file+packages+core+flowershow-core-0.0.4.tgz_wwvq4sry3mrfcince3djb3idna/node_modules/@flowershow/core/dist/index2.js
Did you mean to import next@13.0.6_biqbaboplfbrettd7655fr4n2y/node_modules/next/link.js?

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
new NodeError
node:internal/errors (387:5)
finalizeResolution
node:internal/modules/esm/resolve (330:11)
moduleResolve
node:internal/modules/esm/resolve (907:10)
defaultResolve
node:internal/modules/esm/resolve (1115:11)
nextResolve
node:internal/modules/esm/loader (163:28)
ESMLoader.resolve
node:internal/modules/esm/loader (837:30)
ESMLoader.getModuleJob
node:internal/modules/esm/loader (424:18)
ModuleWrap.<anonymous>
node:internal/modules/esm/module_job (76:40)
link
node:internal/modules/esm/module_job (75:36)

上下文:

  • @flowershow/core是用TS编写的组件库包
  • @flowershow/core是`@flowershow/template的依赖项
  • 整个仓库是一个用Nx(https://github.com/flowershow/flowershow)构建的monorepo,它包括coretemplate包,结构如下(简化):
flowershow
├── packages
│   ├── ...
│   ├── core
|   |   ├── src
|   |   ├── project.json (Nx file)
|   |   ├── tsconfig.json
|   |   └── package.json
│   └── template
|       ├── ... pretty standard Next.js app contents
|       ├── project.json (Nx file)
|       └── package.json
├── nx.json
├── package.json
├── pnpm-workspace.yaml
└── tsconfig.base.json
@flowershow/core相关配置文件

package.json

{
  "name": "@flowershow/core",
  "version": "0.0.4",
  "description": "Core Flowershow components, configs and utils.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/flowershow/flowershow.git",
    "directory": "packages/core"
  },
  "author": "Rufus Pollock",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/flowershow/flowershow/issues"
  },
  "homepage": "https://github.com/flowershow/flowershow#readme",
  "publishConfig": {
    "access": "public"
  },
  "type": "module",
  "main": "./dist/index.js",
  "dependencies": {
    "@docsearch/react": "^3.3.0",
    "@headlessui/react": "^1.7.6",
    "clsx": "^1.2.1",
    "kbar": "0.1.0-beta.39",
    "mdx-mermaid": "^1.3.2",
    "mermaid": "^9.3.0"
  },
  "peerDependencies": {
    "next": "^13.0.0",
    "next-contentlayer": "^0.2.9",
    "next-themes": "^0.2.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

project.json(Nx的配置文件):

{
  "name": "core",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "packages/core/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@nrwl/web:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "packages/core/dist",
        "tsConfig": "packages/core/tsconfig.lib.json",
        "project": "packages/core/package.json",
        "entryFile": "packages/core/src/index.ts",
        "format": ["esm", "cjs"],
        "external": [
          "react/jsx-runtime",
          "react",
          "next",
          "next-contentlayer",
          "next-themes"
        ],
        "generateExportsField": true,
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
        "assets": [
          {
            "glob": "packages/core/README.md",
            "input": ".",
            "output": "."
          }
        ]
      }
    },
    ...
  }
}

tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "es2020",
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "types": ["node"]
  },
  "files": [
    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
    "../../node_modules/@nrwl/react/typings/image.d.ts"
  ],
  "exclude": [
    "jest.config.ts",
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/*.spec.tsx",
    "**/*.test.tsx",
    "**/*.spec.js",
    "**/*.test.js",
    "**/*.spec.jsx",
    "**/*.test.jsx"
  ],
  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}
输出dist/index.js文件,导入Next抱怨:
export { e as BlogLayout, B as BlogsList, C as CustomLink, D as DocsLayout, L as Layout, N as Nav, P as Pre, S as SearchProvider, d as SimpleLayout, U as UnstyledLayout, g as collectHeadings, p as pageview } from './index2.js';
import 'react/jsx-runtime';
import 'react';
import 'next/link';
import 'next-themes';
import 'next/dynamic';
import '@headlessui/react';
import 'next/router';
import 'next/head';
import 'mdx-mermaid/lib/Mermaid';
import 'clsx';

如何测试:

为了测试这一点,我打包了core包,并使用template中的输出tgz文件安装它,使用“file:“协议,如下所示:
packages/template/package.json

"dependencies": {
    "@flowershow/core": "file:../core/flowershow-core-0.0.4.tgz",

其他信息

我尝试手动将import语句从import 'next/link'更改为import 'next/link.js',似乎可以工作(除了对其他导入库抛出错误)。
我也不太清楚为什么Rollup在导出语句下面生成所有的导入语句,所以我也非常感谢这里的一些提示。我对这个相当陌生,这是我第一次使用Rollup或任何其他捆绑程序来捆绑我自己的库。
下面是完整的代码库:https://github.com/flowershow/flowershow
我发现这个问题与某人面临的类似问题:Error [ERR_MODULE_NOT_FOUND]: Cannot find module
我试过修改TS编译器配置、Rollup配置和不同的package.json字段值(例如:在core包中添加/删除type: module),但没有运气。
在这里,不能为import语句添加文件扩展名,因为这些扩展名是由Rollup自动生成的。

dl5txlt9

dl5txlt91#

我最近也在兔子洞里。我认为这种痛苦是Next.js本身在为ESModules导出正确类型时配置错误的结果。请参阅这个GitHub问题,它链接到另外3个GitHub问题,这些问题解释了这个故事:https://github.com/vercel/next.js/issues/46676#issuecomment-1451731653
据我所知,Next.js编译器可以接受你导入的模块并为你打包它们。曾经有一个next-transpile-modules插件用于下一个.config,现在内置了:https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable。当我在配置中将我的包添加到这个数组时,我能够让东西在开发模式下运行,但无论我怎么尝试,构建模式都失败了。
所以,希望这个问题很快会在上游得到解决,如果它不是一个问题,将会有一些关于如何为Next.js捆绑组件库的指导,因为我有类似的经验,事情似乎没有按预期工作。
编辑:经过一番折腾,似乎罪魁祸首是“类型:模块”的组件库的package.json中。也许有一种方法可以让它工作,但是当你构建下一个应用程序时,它会将所有内容都转换为commonjs,所以也许把精力放在组件库的捆绑上并只发布一个入口点并让Next.js完成其余的工作没有多大意义?这不是一个令人满意的答案,但这是我能够在构建和开发模式下运行的唯一方法。

相关问题