当我尝试将 react-router 与 webpack 一起使用时，为什么会出现 jsx-loader 错误>答案

【问题标题】：Why am I getting a jsx-loader error when I try to use react-router with webpack>当我尝试将 react-router 与 webpack 一起使用时，为什么会出现 jsx-loader 错误>
【发布时间】：2014-11-24 14:51:17
【问题描述】：

我正在尝试用webpack 和react-router 组合一个简单的项目。当我不使用react-router 时，一切正常。这是我的代码：

/** @jsx React.DOM */

var React = require('react');

React.renderComponent(
        <h1>Hello World</h1>,
        document.body
      );

这是我webpack.config.js的重要部分：

module: {
        loaders: [
        { test: /\.css$/, loader: 'style!css'},
        { test: /\.js$/, loader: 'jsx-loader' }
        ]
    }

但是当我将require('react-router') 添加到我的js 文件时，我得到了这个错误：

ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module 'jsx-loader' in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
 @ (webpack)/~/node-libs-browser/~/buffer/index.js 1:0-106

有人看到这个错误吗？我做错了什么？

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

你真的运行过npm install --save-dev jsx-loader吗？

如果没有安装，就找不到了……

【讨论】：

是的，我已经安装了jsx-loader
嗯，看起来它是核心 Node CommonJS 模块解析在这里对你来说是失败的，所以我想你需要调试它。你的路径是 /usr/local/lib，所以你正在运行一个使用 -g 安装的 webpack。你也用-g 安装了jsx-loader吗？
我正在运行一个本地 jsx-loader。我是否需要运行-g 版本的jsx-loader？
不确定，但可能。通过require 解析节点模块：如果给定模块不是核心模块（http、fs、路径等），那么 Node.js 将首先搜索名为“node_modules”的目录。它将从当前目录开始（相对于 Node 中的 current-executing Javascript 文件），然后沿着文件夹层次结构向上移动，检查每个级别的 node_modules 文件夹。它可能不在当前工作目录中（或者如果您从另一个目录调用 webpack，则根本不在您的项目目录中），尽管我不确定，因为我没有在这里阅读 webpack 源代码。

【解决方案2】：

您是否在全局而非本地安装了 webpack？加载器解析类似模块，因此它尝试加载 jsx-loader 相对于它所应用的资源。因为看起来你没有安装本地版本（你应该总是有一个），它没有找到它，因此它在 /usr/local/lib/node_modules/webpack

有几种方法可以解决这个问题，最简单的方法是安装本地版本的 webpack。或者使用resolveLoader.root 类似这样的东西将node_modules 添加为绝对路径：

(resolveLoader: { root: path.join(__dirname, "node_modules") })

（请参阅module-loaders 了解更多信息）

【讨论】：

+1：这基本上说明了我在下面关于节点模块加载的评论中所说的内容，但也有很好的解决方案。 :-)

【解决方案3】：

你在使用webpack-dev-server吗？当我将 react-router 添加到 webpack 构建的项目时，我得到了这个确切的消息，但仅在尝试使用全局安装的 webpack-dev-server 构建时。将它添加到 package.json 并安装在本地为我修复它。

【讨论】：

谢谢，为我解决了这个问题，我使用的是全局安装的webpack-dev-server

【解决方案4】：

sudo npm update

它为我解决了问题

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
感谢您的评论，但我不知道这段代码实际上做了什么）它更新了 nmp 中的一些损坏的东西，这就是我所理解的。