私のReact Component Libraryでフックを使用することはできません。不変の違反：無効なフック呼び出し
私は過去数週間、独自のコンポーネントライブラリを作成しようとしてきましたが、フックが機能しないという事実を除いて、すべてが順調に進んでいます。ライブラリからフックを使用するコンポーネントをインポートすると、「フックは関数コンポーネントの本体内でのみ呼び出すことができます」というメッセージが表示されます。
https://reactjs.org/warnings/invalid-hook-call-warning.html
私はそれがReactが複製されていることについての何かであると期待しますが、_npm ls react_を実行すると表示されません。
これは私のwebpack.config.jsです
_const path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
sideEffects: true,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
{
test: /\.(png|gif|jpg|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 50000,
},
},
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
],
},
resolve: {
extensions: ['.scss', '.ttf', '.js', '.json', '.png', '.gif', '.jpg', '.svg'],
},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '',
filename: 'index.js',
libraryTarget: 'umd',
},
target: 'node',
externals: [ nodeExternals() ]
};_これは私のpackage-jsonです
_{
"name": "ui-components",
"version": "1.1.1",
"description": "componentes UI",
"main": "dist/index.js",
"scripts": {
"test": "jest",
"build": "webpack --mode production",
"storybook": "start-storybook -p 9001",
"docz:dev": "docz dev",
"docz:build": "docz build"
},
"repository": {
"type": "git",
"url": "..."
},
"keywords": [
"react",
"shared",
"components",
"botbit"
],
"author": "Uriel Chami",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^5.0.0",
"@storybook/addon-storyshots": "^5.1.10",
"@storybook/react": "^5.0.0",
"@tulipjs/eslint-config": "^1.1.1",
"babel-loader": "^8.0.1",
"babel-plugin-macros": "^2.6.1",
"css-loader": "^1.0.0",
"docz": "^1.2.0",
"docz-theme-default": "^1.2.0",
"file-loader": "^4.1.0",
"jest": "^24.8.0",
"node-sass": "^4.9.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-test-renderer": "^16.8.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0",
"webpack-node-externals": "^1.7.2"
},
"peerDependencies": {
"react": "16.9.0",
"react-dom": "16.9.0"
},
"dependencies": {
"mdbreact": "..."
}
}_ライブラリの機能をテストするために_npm link_を使用していますが、GitHubと_npm update_にデプロイすることもできます。
Node_modules/react-dom/index.js（ライブラリを使用するアプリ内）にwindow.React1 = require('react');を追加しました。そして
_ require('react-dom');
window.React2 = require('react');
console.log(window.React1);
console.log(window.React1 === window.React2);
_私のApp.js内（私のライブラリを使用するアプリ内）。
そして、trueをスローします。私はゆっくりと無知になっていきます。何か案は？
編集：
フックを使用しようとしているコードは次のとおりです。
_import React, {useEffect} from 'react';
export const Test = () => {
useEffect(()=>{
console.log("component did mount");
} , [])
return(<div>Hola!</div>);
}
_編集2
_yarn webpack --mode development_をビルドすると、 'require is not defined'がスローされます。
ここで、誰かがいじくり回したい場合は、私の完全なコードでGitHubリポジトリに移動します： https://github.com/uchami/hooks-not-working
編集3
コンポーネントライブラリ（ui-components）を_yarn add git+ssh:repository_として追加します。ライブラリをインポートするアプリケーションは、単純なcreate-react-appです。
そして、私は_import {Test} from 'ui-components'_を使用してTestコンポーネント（フックを使用するコンポーネント）を実装するだけで、_<Test></Test>_のように使用します。
_ui-components_プロジェクトのコンパイルは、コンソールでの_yarn build_です。バックグラウンドでは、_yarn webpack --mode production_を呼び出しています。 _yarn webpack --mode development_を呼び出すと、余分な詳細エラー出力が表示されます。
ターゲットをnodeからwebに変更してみましたか？それはいくつかの問題を引き起こす可能性があります。
また、ライブラリを使用する予定の背後にあるすべての詳細を知っているわけではありませんが、babel ./src --out-dir ./core --copy-filesは、バンドルを処理するビルドステップがすでにある環境でライブラリを使用している場合に役立ちます。
コメントを追加しますが、ええと。