Impossible d'utiliser des hooks avec ma React bibliothèque de composants. Violation invariante: appel de hook non valide
J'ai essayé de créer ma propre bibliothèque de composants au cours des dernières semaines, tout se passe bien, sauf que je ne peux pas faire fonctionner les crochets. Chaque fois que j'importe de la bibliothèque un composant qui utilise des hooks, je reçois "Les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction."
https://reactjs.org/warnings/invalid-hook-call-warning.html
Je m'attendrais à quelque chose à propos de React étant dupliqué, ce que je ne vois pas lorsque j'exécute npm ls react.
Ceci est mon 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() ]
};Ceci est mon 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": "..."
}
}J'utilise npm link Pour tester le fonctionnement de la bibliothèque mais je peux aussi la déployer sur GitHub et npm update.
J'ai ajouté window.React1 = require('react'); dans node_modules/react-dom/index.js (dans l'application qui utilise ma bibliothèque). Et
require('react-dom');
window.React2 = require('react');
console.log(window.React1);
console.log(window.React1 === window.React2);
dans mon App.js (dans l'application qui utilise ma bibliothèque).
Et il lance true. Je deviens lentement désemparé. Des idées?
Éditer:
Le code où j'essaie d'utiliser des crochets est:
import React, {useEffect} from 'react';
export const Test = () => {
useEffect(()=>{
console.log("component did mount");
} , [])
return(<div>Hola!</div>);
}
Modifier 2
Quand je crée yarn webpack --mode development, Il lance 'require is not defined' .
Ici, il va un repo GitHub avec mon code complet si quelqu'un veut jouer: https://github.com/uchami/hooks-not-working
Modifier 3
J'ajoute la bibliothèque de composants (ui-components) ainsi yarn add git+ssh:repository. L'application où j'importe ma bibliothèque est simplement une simple application create-react.
Et je viens d'implémenter le composant Test (qui est celui qui utilise Hooks) en utilisant import {Test} from 'ui-components' Et je l'utilise comme ça <Test></Test>.
La compilation du projet ui-components Est juste yarn build Sur la console. En arrière-plan, ce qui est en train d'appeler yarn webpack --mode production. Si vous appelez yarn webpack --mode development, Vous verrez une sortie d'erreur détaillée supplémentaire.
Avez-vous essayé de changer votre cible de node à web? Cela peut entraîner certains problèmes.
Je ne connais pas non plus tous les détails derrière l'endroit où vous prévoyez d'utiliser votre bibliothèque, mais quelque chose d'aussi simple que babel ./src --out-dir ./core --copy-files peut être utile lorsque vous utilisez votre bibliothèque dans un environnement où vous disposez déjà d'une étape de génération qui gère le regroupement.
J'ajouterais un commentaire, mais euh rep.