Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the render er (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app.
I am developing own library of components and using same library in my application through npm link but getting above error while testing.
here is my webpack.config
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'eval-source-map',
module: {
rules: [
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
{
test: /\.(tsx|ts|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [['@babel/plugin-proposal-class-properties'], ['@babel/plugin-transform-runtime', { "regenerator": true }]],
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
},
},
},
{
test: /\.mjs$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.(css|scss)$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
exclude: [/\.js$/, /\.ts$/, /\.html$/, /\.json$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
resolve: {
extensions: ['.mjs', '.js', '.ts', '.tsx', '.json'],
},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '',
filename: 'bundle.js',
libraryTarget: 'commonjs'
}
};
here is my package.json
{
"name": "abc",
"version": "1.0.42",
"description": "A React component library",
"main": "dist/bundle.js",
"types": "dist/types/index.d.ts",
"scripts": {
"test": "jest",
"build:development": "npm-run-all --parallel webpack:watch generate-typings",
"build:production": "npm-run-all webpack:prod generate-typings",
"build:clean": "rmdir /Q /S dist",
"generate-typings": "tsc --declaration --emitDeclarationOnly",
"styleguide": "npx styleguidist server",
"styleguide:build": "npx styleguidist build",
"webpack:watch": "webpack --watch --mode=development",
"webpack:prod": "webpack --mode=production",
"localVersion": "node -p \"require('./package.json').version\"> localVersion.txt",
"serverVersion": "npm view @company/abc version > serverVersion.txt"
},
"repository": {
"type": "git",
"url": "url"
},
"keywords": [
"react",
"components",
"typescript"
],
"author": "Spencer Cousino",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@types/enzyme": "^3.10.5",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^24.9.1",
"@types/nock": "^10.0.3",
"@types/node": "^11.15.9",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-table": "^6.8.7",
"async-wait-until": "^1.2.4",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"fetch-mock": "^7.7.3",
"file-loader": "^3.0.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.3.0",
"nock": "^10.0.6",
"node-fetch": "^2.6.1",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"oidc-client": "^1.10.1",
"powerbi-report-component": "^1.6.0",
"prettier": "1.17.0",
"react": "^16.14.0",
"react-docgen-typescript": "^1.20.1",
"react-dom": "^16.14.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-table": "6.10.3",
"react-slick": "^0.23.2",
"react-spinners": "^0.9.0",
"react-styleguidist": "^11.1.5",
"reactstrap": "^8.4.1",
"sass-loader": "^7.3.1",
"ts-jest": "^25.4.0",
"typescript": "^3.8.3",
"url-loader": "^1.1.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/runtime": "^7.12.5",
"@company/abc": "0.0.6",
"@company/abc1": "^1.2.0",
"@company/abc2": "^1.0.23",
"@company/abc3": "^1.9.1",
"@company/abc4": "^1.0.1",
"core-js": "^3.8.0",
"date-fns": "^1.30.1",
"react-bingmaps": "^3.6.1",
"react-bootstrap": "^0.32.3",
"react-grid-layout": "^0.16.6",
"react-scripts": "^4.0.3",
"react-tabs": "^3.1.1",
"slick-carousel": "^1.8.1"
},
"peerDependencies": {
"react": "~16.8.4",
"react-dom": "~16.8.4",
"@types/node": "^11.11.6",
"node-fetch": "^2.3.0",
"oidc-client": "^1.7.0",
"powerbi-report-component": "^1.1.3",
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"react-slick": "^0.23.2",
"react-spinners": "^0.5.3",
"reactstrap": "^8.0.0"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"setupFilesAfterEnv": [
"./testSetup.ts"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy",
"^.+\\.(svg)$": "<rootDir>/src/mocks/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx"
],
"collectCoverageFrom": [
"**/context-components/**/*.{js,jsx,ts,tsx}"
]
}
}
I have tried multiple ways but none of them worked for me. Any help will be appreciated.