Reactjs – Next.js attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'React')

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?