reactjs - React Functional Component with useState Hook Breaks Component Library

Question

I'm creating a library of custom react components and I'm running into an issue that I think must be related to how my package is getting created. When I add a functional component that utilizes the 'useState' hook to my library and import it as a dependency in another project, I'm getting the "Invalid Hook Call". I've checked the three possible scenarios given in the error that could be causing the error and eliminated all of them. When I copy the offending component to my main project directory and import it directly (rather than through my custom react components package) it works as expected, so I'm clearly doing something wrong when I create my package, I just can't determine what.

My webpack.config.js file looks like this:

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, './dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /.js?$/,
        exclude: /(node_modules)/,
        use: 'babel-loader',
      },
    ],
  },
  externals: ['react', 'react-dom'],
};

My bable.rc file:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "useESModules": true,
        "regenerator": false
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-react-constant-elements"
  ]
}

My package.json file:

{...
"scripts": {
    "test": "jest",
    "build": "webpack",
    "lint": "eslint . --ext js",
    "stylelint": "stylelint **/*.*css --ip **/*.min.css -s scss"
  },
  "files": [
    "dist"
  ],
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-react-constant-elements": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "babel": "^6.23.0",
    "babel-eslint": "^11.0.0-beta.2",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.1",
    "concurrently": "^5.3.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.14.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-react-important-stuff": "^2.0.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-react": "^7.21.5",
    "file-loader": "^6.2.0",
    "husky": "^4.3.0",
    "jest": "^26.6.3",
    "node-sass": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "sass-loader": "^10.1.0",
    "semantic-release": "^17.3.0",
    "style-loader": "^2.0.0",
    "stylelint": "^13.8.0",
    "stylelint-config-standard": "^20.0.0",
    "tinycolor2": "^1.4.2",
    "webpack": "^5.5.1",
    "webpack-cli": "^4.2.0"
  },
  "dependencies": {
    "react-color": "^2.19.3"
  }
}

question from:https://stackoverflow.com/questions/66049588/react-functional-component-with-usestate-hook-breaks-component-library

Answer 1

Waitting for answers