React component module (imported from local repo) causes error "Hooks can only be called inside-CodePudding

I have created a react component module and imported that module into a webpack project.

I am currently importing the component from my local repository:

npm install ~/git/repo-name

I am doing so because re-uploading the module to npm to test every minor change would not be viable.

The component module lists react and react-dom as peer dependencies in package.json, which you can see here:

{

  ...(name, version,etc)...

  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0"
  },
  "dependencies": {
    "core-js": "^3.19.2",
    "regenerator-runtime": "^0.13.9"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

I found this stackoverflow question, and the first answer listed sounded like the ticket. However, after npm linking the component's react and react-dom folders in node_modules to the same folders in the webpack project's node_modules directory, I am still getting the error.

I am able to trace the error to a particular line in the modified code that babel shoots out when I compile the component module:

  var availableNetworkOptions = (0, _react.useRef)(null);

I don't understand this syntax, but I can infer that it is part of how babel is transpiling my use of "useRef" in my original .js file (or at least how it is attempting to do so). I can't help wondering if this weird syntax might have something to do with the error. It seems unlikely - I'm sure babel knows what it's doing. On the other hand, I seem to have ruled out the "duplicate react" issue that appears to be one of the more common causes of this problem, or at least I have done so as far as I know.

CodePudding user response：

You cannot use hooks outside of a component, refactor it and convert it to a function or use them in a functional or class base component

CodePudding user response：

The issue was, in fact, multiple react copies due to both the local component module and the project using it both having react installed. The solution I linked to (see the first answer) wasn't working because I wasn't following the directions correctly.

Those directions are:

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

Instead, for step 2 I was doing:

(in library)
cd node_modules/react && npm link react
cd ../react-dom && npm link react-dom