ReactJS App 给出找不到模块'webpack' [ReactJS app in cjs/loader.js] --

Question

我发现了一些与此相关的链接/线程，但它们大多是有角度的。我遇到的问题与 ReactJS 有关。

主要错误是：

Error: Cannot find module 'webpack'

Require 堆栈是这样的：

Require stack:
- E:\REACT\MySite\protik-site\node_modules\react-scripts\scripts\start.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (E:\REACT\MySite\protik-site\node_modules\react-scripts\scripts\start.js:36:17)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\REACT\\MySite\\protik-site\\node_modules\\react-scripts\\scripts\\start.js'

问题出在css文件中的一段代码中。

@font-face {
    font-family: Icons;
    /*src: url(../fonts/open-iconic/open-iconic.eot);*/
    src: url(http://localhost:3000/open-iconic.eot);
    src: url(http://localhost:3000/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(http://localhost:3000/open-iconic.woff) format('woff'),url(http://localhost:3000/open-iconic.ttf) format('truetype'),url(http://localhost:3000/open-iconic.otf) format('opentype'),url(http://localhost:3000/open-iconic.svg#iconic-sm) format('svg');
    font-weight: 400;
    font-style: normal
}

我检测到，所有这些 src url 都导致了问题。

我确实有一次运行了 npm ls webpack，它显示 webpack 安装在两个路径中 - 主节点模块和 react-scripts 内。目前，就在这个时间点，我没有。我已经手动删除了这两个。 熟悉 Angular 的人都知道，我们可以在项目的 webpack.js 文件的 module.exports 中编写显式的加载器规则。有趣的是，在 React 应用程序中没有创建这样的文件。我不知道是否应该专门创建一个并在其中编写一些代码，或者是否有其他干净、精确的解决方案来解决我可能遇到的任何争吵。

你能告诉我悲伤在哪里吗？究竟需要什么修改？研究我发布的 require 堆栈，您是否可以查明问题？如果您需要关于我的 node_modules 状态或任何其他文件的更多信息，我们很乐意分享。

Answer 1

看起来您的项目是使用create-react-app 创建的，因为它使用了react-scripts，这是其中的一部分。

react-scripts has a dependency to webpack 并且您的错误输出告诉我们，react-scripts 尝试运行需要缺少的 webpack 模块的启动脚本。

你有没有

npm 安装

在启动应用程序之前？

cmets 后的结果：

正确安装 open-iconic：

• 下载 vendor-css file 并将其添加到您的项目中，然后将其导入到源 css 中（不推荐，但可以）
• 只需通过 cdn 将其添加到您的项目中，例如将此行添加到正在使用的任何 css 文件（或为供应商导入创建特定 css 文件并将其导入您的 App.css）@import url('https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css');
• 通过 cdn 将它添加到您的 index.html 中，使用以下行： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">

构建应该可以正常工作。

您的 .css 文件包含可能导致中断的 localhost 路径。