Question

这是我在NPM中发布的第一个React组件。我使用 Yeoman 中的 react-webpack-component 包来启动我的项目。但是当我安装并将我的组件导入React应用程序时，我发现错误：

Failed to compile.

Error in ./~/kladrapi-react/index.js
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`.

 @ ./~/kladrapi-react/index.js 1:82-98

我理解这个错误，但不明白如何正确地将React模块导入我的组件！

Actual version on GitHub

Answer 1

我认为您的代码中存在多个问题。

在index.html：

@ line-- <script src="kladrapi-react.js"></script>

文件名是“kladrapi-react.jsx”而不是“kladrapi-react.js”。
第二个问题，在这里你期待“kladrapi-react.js（x）”在根级别。事实并非如此。根据您的文件夹结构，“kladrapi-react.js（x）”文件位于./lib/kladrapi-react.jsx。

除此之外，在你的kladrapi-react.js（x）文件中，你混合了ES5和ES6语法。您正在访问KladrapiReact中的变量index.html，但您尚未将其导出为'KladrapiReact'。我建议你将'React.createClass....'代码放在一个单独的组件中。

对于您收到的错误，您需要使用'case-sensitive-paths-webpack-plugin'：

此Webpack插件强制所有必需模块的完整路径与磁盘上实际路径的确切大小写相匹配。

npm install --save-dev case-sensitive-paths-webpack-plugin

<强>用法：

var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

var webpackConfig = {
    plugins: [
        new CaseSensitivePathsPlugin()
        // other plugins ...
    ]
    // other webpack config ...
}

有关此插件的详细信息，请阅读文档here。

Answer 2

找不到模块：[CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js与磁盘react上的相应路径不匹配。

@ ./~/kladrapi-react/index.js

在React组件中导入模块，以便在NPM上发布

2 个答案: