无法使用 tsx 将 Recoil 导入 nextjs 应用程序 - 获取 ReferenceError

Question

我正在学习 nextjs，我正在尝试添加 Recoil 以进行状态管理。我的 nextjs 应用程序正在使用 tsx。我不知道如何解决这个问题，所有 suggestions/help 将不胜感激。

如果我需要提供更多详细信息，请告诉我。

我附上了错误、tsconfig 文件以及我的应用程序的 package.json 文件。

导入后坐力时出现以下错误：

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///R:/Learnings/nextjs/insta2/node_modules/recoil/cjs/recoil.js:3:23
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
error - ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///R:/Learnings/nextjs/insta2/node_modules/recoil/cjs/recoil.js:3:23
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  page: '/'
}

这是我的 tsconfig.json 文件：

{
"compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

这是我的 package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@faker-js/faker": "^6.3.1",
    "@heroicons/react": "^1.0.6",
    "@tailwindcss/forms": "^0.5.1",
    "firebase": "^9.8.0",
    "next": "latest",
    "next-auth": "^4.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "recoil": "^0.7.3-alpha.1",
    "tailwind-scrollbar-hide": "^1.1.7"
  },
  "devDependencies": {
    "@types/node": "17.0.4",
    "@types/react": "17.0.38",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.1",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.7",
    "typescript": "4.5.4"
  }
}

在此先感谢您的帮助。

Answer 1

将后坐力版本更改为“0.7.2” 您的新 package.json 文件应如下所示

  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@faker-js/faker": "^6.3.1",
    "@heroicons/react": "^1.0.6",
    "@tailwindcss/forms": "^0.5.1",
    "firebase": "^9.8.0",
    "next": "latest",
    "next-auth": "^4.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "recoil": "^0.7.2",
    "tailwind-scrollbar-hide": "^1.1.7"
  },
  "devDependencies": {
    "@types/node": "17.0.4",
    "@types/react": "17.0.38",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.1",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.7",
    "typescript": "4.5.4"
  }
}

无法使用 tsx 将 Recoil 导入 nextjs 应用程序 - 获取 ReferenceError

Cannot import Recoil to nextjs app using tsx - getting ReferenceError

reactjs

next.js

recoiljs