0

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.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
GreatGooeyGoobers
  • 71
  • 4

2 Answers2

0

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

Jamal
  • 811
  • 5
  • 15
  • I appreciate the help, but I think you're replying to the error message in my question subject without actually reading the body of my message. I am definitely using the useRef hook inside of a function component in MY code. If a hook IS ultimately getting used outside of a component, it's in the transpiled code output by babel when I build the module. – GreatGooeyGoobers Dec 09 '21 at 00:55
0

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
GreatGooeyGoobers
  • 71
  • 4