bug: Million not working with Next 12

[Luks3110]

Is Milllion compatible with Next 12? I can't upgrade because of leaflet :/ I'm getting this error when I try to run the project on dev mode:

Module not found: Can't resolve 'react-dom/client'

Import trace for requested module:
./node_modules/million/dist/react.mjs

next.config.mjs

import { withSentryConfig } from '@sentry/nextjs'
import million from 'million/compiler'
import nextPWA from 'next-pwa'

const withPwa = nextPWA({
  dest: 'public',
  register: true,
  disable: process.env.NODE_ENV === 'development',
  cacheStartUrl: false,
  dynamicStartUrl: false,
  publicExcludes: ['!**/*'],
  buildExcludes: [() => true]
})

/** @type {import('next').NextConfig} */
const nextConfig =
  withPwa({
    reactStrictMode: true,
    swcMinify: true, // https://nextjs.org/docs/pages/building-your-application/upgrading/version-12
    webpack: (config) => {
      config.module.rules.push({
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      })

      return config
    },
    eslint: {
      // Warning: Dangerously allow production builds to successfully complete even if
      // your project has ESLint errors.
      ignoreDuringBuilds: true,
    },
  })

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
export default process.env.NODE_ENV === 'development'
  ? million.next(nextConfig)
  : withSentryConfig(million.next(nextConfig), sentryWebpackPluginOptions)

[SukkaW]

Hello, would you mind providing a minimum reproduction of your Next.js App that has Module not found: Can't resolve 'react-dom/client' error? And would you like to tell us which React / React DOM version are you using?

[sayansur25]

I have faced the same issue with Next 12. I have updated the react and react-dom versions to 18.2.0, now it is working for me.

[oliverloops]

Hi @Luks3110 👋, I'm running Next 12 on React 18.2.0, check out if you're using the latest version of React or if one of your third-party dependencies is compatible and not attached to an older version. let us know if you achieve it.

[tobySolutions]

I think this issue has been resolved, right? @sayansur25. Is that correct?

[Luks3110]

I'm using React 17, can't upgrade right now because the application uses react-leaflet :/

[oliverloops]

Hello again @Luks3110, I tested on different Next environments and versions, but as you notice the file dist/react.mjs depends on a top level react-dom/client import, that's why React 18 or above is required for you to run Million correctly. I found some people reporting and having issues upgrading to Next 13 because of some library incompatibilities, react-leaflet is one of this. So React 18 is a strict requirement.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.