无法升级 webpack 并使其与 ESM 配合使用

Question

我在一个带有

webpack.config.babel.js

的项目上使用 webpack，所以我可以使用

esm

systax

我有这个

babel

配置

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [">1%", "last 4 versions", "not ie < 9"]
        },
        "useBuiltIns": "usage",
        "debug": false,
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

我的 package.json 中没有

"type": "modules"

在 `package.json 上使用此脚本

"dev": "webpack serve --env --mode=development --config webpack/webpack.config.babel.js",

还有其他这个包：

"@babel/core": "~7.12.3",
"@babel/eslint-parser": "^7.21.3",
"@babel/preset-env": "~7.12.1",
"@babel/preset-react": "~7.12.1",
"@babel/register": "~7.12.1",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "~4.1.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "~3.11.0",
"webpack-merge": "~5.3.0",

我正在使用

node v21.6.2

一切正常，我可以在 webpack 上使用

import

。

但是如果我尝试将 webpack 升级到更高版本，那么无论我做什么，它都会崩溃，并且无法读取

ESM

语法，添加

"type": "modules"

...按照 babel 上的说明并更新这些...没有任何效果，并开始变得一团糟，因为互联网上没有一篇文章适合我，所以我最终将所有内容混合在一起。但它从来没有起作用。

Answer 1

我明白了。

主要是我的主要问题是我在升级之前使用的webpack使用了导入而最后没有提到.js，我仍然不知道如何。

但这让我失望了，升级后，将

"type": "modules"

添加到 package.json 并将

.js

添加到每个导入中，它开始工作。

这是一个追查错误的问题，因为有一些类似

import { merge } from 'webpack-merge'

而不是

import merge from 'webpack-merge'

的软件包也需要更新，例如

"@pmmmwh/react-refresh-webpack-plugin"

和其他零碎的东西。但现在一切正常了