将CRA迁移到Webpack 5

Question

我正在尝试将已弹出的create-react-app迁移到Webpack 5，并遇到以下错误：

Failed to compile.

The "path" argument must be of type string. Received undefined

error Command failed with exit code 1.

我认为错误来自于output.path，在CRA中默认情况下它在开发环境中是未定义的。我已经试过将其设置为空字符串或绝对路径，但都不起作用。我已经成功地在非CRA应用程序上使用Webpack 5，并将路径保留为未定义，因此我认为这与CRA配置有关。此外，我已经按照https://webpack.js.org/migrate/5/指南进行了尝试，但没有成功。

代码沙盒：https://codesandbox.io/s/musing-buck-shu04 感谢任何帮助！

- Dmitriy

Answer 1

我遇到了相同的问题。此错误来自于webpack-manifest-plugin。Webpack 5 目前不支持，但维护者正在计划添加支持。所以你可以在 default.config.js 文件中的 output 部分更改几行代码：

 output: {
   // The build folder.
   path: isEnvProduction ? paths.appBuild : undefined,
   // blah blah blah
 }

to:

 output: {
   // The build folder.
   path: paths.appBuild,
   // blah blah blah
 }

错误 The "path" argument must be of type string. Received undefined 已消失。但对我来说仍然不起作用，在浏览器中一直加载。我应该更仔细地调试它，并稍后更新答案。 因此，我尝试从我的配置中删除 webpack-manifest-plugin，但它仍然不起作用。

- EvgeniyRRU

---

嗨，EvgeniyRRU，我在浏览器中遇到了无尽的加载问题，你是如何解决的？ - Sathvik Nasani

嗯，我刚刚放弃了CRA，转而使用我自己的Webpack配置。 - EvgeniyRRU

@SathvikNasani，我使用了下面的分支，其中包含所有WP5相关的更新，并修复了一些错误，然后我就可以在CRA中运行WP5应用程序了：https://github.com/raix/create-react-app/tree/webpack5-update - Kumar Lachhani

@A1exandr，请按照以下步骤进行操作： 1）从https://github.com/raix/create-react-app/tree/webpack5-update处签出。 2）释放您的CRA应用程序。 3）更新webpack及其依赖项。请参考：https://webpack.js.org/migrate/5/ 4）比较您和webpack5-update分支的package.json并进行npm install以安装剩余的库。 5）将来自上述webpack5-update分支的webpack.config.js替换，并替换您的CRA应用程序中的文件。 6）修复react-dev-utils中已知的一些错误（直到官方修复为止）。如果需要修复帮助，请告诉我，您也可以搜索。 - Kumar Lachhani

@KumarLachhani，我们如何从其存储库文件生成create-react-app？我似乎找不到一种生成应用程序并弹出它的方法。是从react-scripts文件夹还是其他地方？你能帮忙吗？使用npx和弹出应用程序仍将使用webpack 4.44.2。我不知道为什么。 - Fadil Natakusumah