I am learning nextjs and I am trying to add Recoil for state management. My nextjs app is using tsx. I have no idea on how to resolve this issue and all suggestions/help will be greatly appreciated.
Please let me know if I need to provide any more details.
I have attached the error, the tsconfig file and also my app's package.json file.
I am getting the following error when importing recoil:
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: '/'
}
Here is my tsconfig.json file:
{
"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"]
}
Here is my 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"
}
}
Thanks in advance for all the help.
Change the recoil version to "0.7.2" Your new package.json file should look like this
"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"
}
}