getting a weird error with node_modules/swr
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
Everything works in dev mode but in production im getting this error in routes that has some serverside props in them. I this started happening after i updated to next14 this week and is fixed after downgrading to next13 again at least thats what i did.
Here is the error and my package.json:
i file:///var/task/node_modules/swr/dist/index.mjs:1
SyntaxError: Named export 'createContext' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'react';
const { useEffect, useLayoutEffect, createContext, useContext, useState, createElement, useRef, useCallback, useDebugValue } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
page: '/'
}
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"dotenv": "^16.3.1",
"formik": "^2.4.5",
"iron-session": "^6.3.1",
"next": "^13.5.6",
"next-offline": "^5.0.5",
"package-lock.json": "^1.0.0",
"package.json": "^0.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-in-viewport": "1.0.0-alpha.30",
"sass": "^1.69.5",
"swr": "^2.2.4",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "18.11.0",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.16",
"eslint": "8.25.0",
"eslint-config-next": "12.3.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.31",
"typescript": "4.8.4"
}
}
Here is the error and my package.json:
i file:///var/task/node_modules/swr/dist/index.mjs:1
SyntaxError: Named export 'createContext' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'react';
const { useEffect, useLayoutEffect, createContext, useContext, useState, createElement, useRef, useCallback, useDebugValue } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
page: '/'
}
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"dotenv": "^16.3.1",
"formik": "^2.4.5",
"iron-session": "^6.3.1",
"next": "^13.5.6",
"next-offline": "^5.0.5",
"package-lock.json": "^1.0.0",
"package.json": "^0.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-in-viewport": "1.0.0-alpha.30",
"sass": "^1.69.5",
"swr": "^2.2.4",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "18.11.0",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.16",
"eslint": "8.25.0",
"eslint-config-next": "12.3.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.31",
"typescript": "4.8.4"
}
}