Issue
I am migrating an application from just CSR (with webpack only) to SSR and using Next.js to achieve that.
I followed the Next.js guide for migrating from vite (following parts that make sense for webpack) but when trying to serve the app in development mode it throws this error:
../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'React').
Import trace for requested module:
../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
../../node_modules/@mui/base/Unstable_Popup/Popup.js
../../node_modules/@mui/base/Unstable_Popup/index.js
../../node_modules/@mui/base/index.js
../../node_modules/@mui/lab/useAutocomplete/index.js
../../node_modules/@mui/lab/index.js
./src/app/legacy/pages/&auth/login.tsx
./src/app/legacy/App.tsx
./src/app/[[...slug]]/page.tsx
and it throws a similar error on all other files in the application that imports react
:
Attempted import error: 'jsxDEV' is not exported from 'react/jsx-dev-runtime' (imported as '_jsxDEV').
Import trace for requested module:
./src/app/legacy/App.tsx
./src/app/[[...slug]]/page.tsx
I tried reinstalling node_modules but it didn't help. I'm not sure where is the problem as all other dependencies resolve normally. It only worked when I used Yarn PnP but I wasn't able to continue using it as I had other problems. I am using Nx for the monorepo setup if that makes a difference.
My next.config.js:
//@ts-check
const { dirname, join } = require("path");
const { composePlugins, withNx } = require("@nx/next");
const CopyPlugin = require("copy-webpack-plugin");
/**
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to use SVGR
// See: https://github.com/gregberge/svgr
svgr: true,
babelUpwardRootMode: true,
},
webpack: (
/** @type {import("webpack").Configuration} */ config,
context,
) => {
config.experiments = {
...config.experiments,
};
config.plugins = [
...(config.plugins || []),
...(!context.isServer
? [
new CopyPlugin({
patterns: [
{
from: join(
dirname(
require.resolve(
"pdfjs-dist/package.json",
),
),
"cmaps",
),
to: "cmaps/",
},
{
from: join(
dirname(
require.resolve(
"pdfjs-dist/package.json",
),
),
"standard_fonts",
),
to: "standard_fonts/",
},
],
}),
]
: []),
];
config.module?.rules?.push({
test: /\.node$/,
loader: "node-loader",
});
return config;
},
};
const plugins = [
// Add more Next.js plugins to this list if needed.
withNx,
];
module.exports = composePlugins(...plugins)(nextConfig);
Any ideas on how to solve this?
Solution
After creating another Next.js application and copying all the files I found out that .browserslistrc
was causing this error.
I deleted the file and now everything is working!
Answered By - Begad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.