next/dist/client/image.js breaking builds due to Module not found: ESM packages

[opqpop]

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

16.4.2

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next build dev

Describe the Bug

This used to work but since upgrading from Next 10 to 11, build breaks due to ESM package error, but I don't know how to fix as I'm not sure where the offending require statement is. I have tried searching everywhere and couldn't find a solution. I've also tried putting experimental { esmExternals: true} into next.config.js which didn't solve issue.

Also this issue goes away if I downgrade to [email protected] but get it starting from [email protected]

Issue:

(venv) winston@MacBook-Pro ~/f/frontend (edgy) [0|SIGQUIT]> npm run dev                                                                                             00:05:29

> [email protected] dev
> npm run relay && NODE_OPTIONS='--inspect' next dev


> [email protected] relay
> relay-compiler --schema ../data/schema.json --src ./src/ --watchman false $@


Writing js
Unchanged: 0 files
Debugger listening on ws://127.0.0.1:9229/1647bb7b-774f-4cff-aa6e-47ab1b4e2cc8
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/winston/flueth/frontend/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from /Users/winston/flueth/frontend/.babelrc
error - ./node_modules/next/dist/client/image.js
Module not found: ESM packages (@babel/runtime/helpers/esm/slicedToArray) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

My package.json for npm run dev

     "scripts": {
          "dev": "npm run relay && NODE_OPTIONS='--inspect' next dev",
          "build": "npm run relay && next build",
          "start": "npm run relay && next start",
          "export": "npm run relay && next build && next export",
          "relay": "relay-compiler --schema ../data/schema.json --src ./src/ --watchman false $@"
     },

My next.config.js:

const withPlugins = require('next-compose-plugins')

const reactSvg = require('next-react-svg')
const path = require('path')

const webpackConfig = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules[\/\\](?!(swiper|dom7)[\/\\])/,
      use: [options.defaultLoaders.babel],
    })
    config.node = {
      fs: 'empty',
    }
    return config
  },
}

module.exports = withPlugins(
  [
    [
      reactSvg,
      {
        include: path.resolve(__dirname, 'src/assets/svg'),
      },
    ],
  ],
  {
    experimental: {
      esmExternals: true,
    },
    images: {
      deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
      // loader: "imgix", // Uncomment this line for STATIC EXPORT
      // path: "", // Uncomment this line for STATIC EXPORT
    },
    env: {
      production_type: 'server', // Change variable to "static" for STATIC EXPORT
    },
    // trailingSlash: true // Uncomment this line for STATIC EXPORT
  },
  webpackConfig,
)

Expected Behavior

this doesn't happen

To Reproduce

build

[ijjk]

Hi, it looks like this is from the usage of the experimental esmExternals config being set to true, you can set this to loose instead to handle gradual migration to ESM imports while still allowing CJS imports like above.

Note: the experimental esmExternals config wasn't added until v11.1.0 specifically this PR #27069 which explains why it was working in v11.0.1

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.