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

这是我在NPM中发布的第一个React组件。我使用react-webpack-component包装从Yeoman开始我的项目。但是，当我安装并导入我的成分反应的应用程序，我赶上错误：在React组件中导入模块以便在NPM上发布

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

我理解这个错误，但不知道如何正确导入模块做出反应，以我的成分！

Actual version on GitHub

来源

2017-07-04 Valery Liubimov

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

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

来源

2017-07-04 15:23:21

这是我的错误。好。我知道） –

我觉得有你的代码的多个问题。

在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语法。您正在访问index.html中的变量KladrapiReact，但尚未将其导出为“KladrapiReact”。我建议您将'React.createClass....'代码放在单独的组件中。

对于您收到你需要使用“区分大小写的路径-的WebPack-插件”的错误：

此的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。

来源

2017-07-04 17:44:08 Upasana

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

回答

相关问题