我有一个像这样简单的组件。
import React, {useState} from 'react';
function MyComponentWithState(props) {
const [value, setValue] = useState(0);
return (
<p>My value is: {value}</p>
)
}
export default MyComponentWithState;
我想将其作为单独的包发布到NPM。因此，为了实现这一点，我准备了以下的 package.json 和 webpack.config.js 文件。
package.json:
{
"name": "try-to-publish",
"version": "0.0.1",
"description": "Just a test",
"main": "build/index.js",
"scripts": {
"start": "webpack --watch",
"build": "webpack"
},
"author": {
"name": "Behnam Azimi"
},
"license": "ISC",
"peerDependencies": {
"react": "16.9.0",
"react-dom": "16.9.0"
},
"dependencies": {
"react": "16.9.0",
"react-dom": "16.9.0",
"prop-types": "15.7.2",
"react-scripts": "3.1.1",
"webpack": "4.39.3"
},
"devDependencies": {
"@babel/core": "7.6.0",
"@babel/plugin-proposal-class-properties": "7.5.5",
"@babel/preset-env": "7.6.0",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.6",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"css-loader": "3.2.0",
"node-sass": "4.12.0",
"sass-loader": "8.0.0",
"style-loader": "1.0.0",
"webpack-cli": "3.3.8",
"webpack-external-react": "^1.1.2"
}
}
webpack.config.json：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: {
loader: "babel-loader"
}
},
]
},
resolve: {
alias: {
'react': path.resolve(__dirname, 'node_modules/react'),
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
}
},
externals: {
'react': "commonjs react",
'react-dom': "commonjs react-dom"
},
};
这是我的 .babelrc：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
当我将组件发布到NPM并在我的另一个ReactJs项目中使用`npm install`安装时，这些配置都能正常工作，但我想本地测试！
在发布之前，我想要测试组件/库。为了做到这一点，我使用`npm link`功能将我的组件链接到我的主ReactJS项目。
正如你在上面看到的那样，我的组件是可运行的，并且我也使用了hooks。所以当我将本地链接库注入到我的主ReactJs项目中时会出现以下错误：
无效的hook调用。Hooks只能在函数组件的主体内部调用。这可能由于以下原因之一： 1. React和渲染器（例如React DOM）的版本不匹配 2. 您可能正在违反Hooks规则 3. 您可能在同一应用程序中有多个React副本
我的问题与第三个原因有关。我的项目使用ReactJs并导入它一次，而我的组件也将导入React！也就是说，在一个项目中导入了两次React!
我的Webpack配置文件中还有关于`react`和`react-dom`的`externals`配置。
我应该怎么做才能解决这个问题？我的错误在哪里？
更新： 我也尝试了@sung-m-kim和@eddie-cooro所说的方法，但它没有起作用！也就是说，我更改了package.json并从`dependencies`中删除了`react`和`react-dom`，然后将它们添加到了`devDependencies`。
npm ls react的结果是什么？ - Fateme Fazli-- UNMET DEPENDENCY react@16.9.0，这是npm ls react的结果。 - Behnam Azimi-- react@16.9.0作为npm ls react的结果。 - Behnam Azimi