require() of ES modules is not supported.

[lynn1286]

error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/work/mademine/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /Users/work/mademine/node_modules/lodash-es/lodash.js from /Users/work/mademine/.next/server/pages/_app.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/work/mademine/node_modules/lodash-es/package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:  /Users/work/mademine/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /Users/work/mademine/node_modules/lodash-es/lodash.js from/Users/work/mademine/.next/server/pages/_app.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/work/mademine/node_modules/lodash-es/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
    at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
    at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.lodash-es (/Users/work/mademine/.next/server/pages/_app.js:3099:18)
    at __webpack_require__ (/Users/work/mademine/.next/server/webpack-runtime.js:33:42) {
  code: 'ERR_REQUIRE_ESM'
}

package.json

"next-global-css": "1.3.1",
 "next": "12.1.6",
 "lodash-es": "^4.17.21",
 "webpack-node-externals": "^3.0.0"

I'm trying to use next-global-css to solve the problem of node_module css in next, but I got what the error is. Do you know why?Looking forward to your reply, my code is as follows:

const { patchWebpackConfig } = require('next-global-css')
const webpackNodeExternals = require('webpack-node-externals')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, options) => {
    patchWebpackConfig(config, options)

    if (options.isServer) {
      config.externals = webpackNodeExternals({
        // Uses list to add this modules for server bundle and process.
        allowlist: [/sunzi-designer/],
      })
    }

    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgo: true,
            svgoConfig: {
              plugins: [
                {
                  name: 'removeViewBox',
                  active: false,
                },
                'removeDimensions',
              ],
            },
          },
        },
      ],
    })

    return config
  },
}

module.exports = withPlugins([[withBundleAnalyzer]], nextConfig)