Need a "yarn/npm link" workflow for dev and publishing for "multiple copies of react" module

user_93212 0
Viewed 2500

I am building and publishing a module to npm. The module is dependent on React. I am currently using yarn and yarn link.

I have built this module in a parent project and now am trying to extract it to a standalone module. I want to continue developing the module locally as part of the parent project.

The package.json in the module looks like:

  "devDependencies": {
    "react": "^16.1.1",
    "react-reconciler": "^0.6.0",
    "react-dom": "^16.0.0",
    "regl": "^1.3.0",
}

I include this module in a parent projection by running yarn link in the module directory and then yarn link module-name in the parent directory. When included in the parent project an error is then thrown

Element ref was specified as a string (canvas) but no owner was set. You may have multiple copies of React loaded. (details: https://reactjs.org/warnings/refs-must-have-owner.html).

I have previously tried this workflow using npm instead of yarn and had the same issues.

I'm hoping this is a solved problem with a boilerplate. I've looked at other projects and haven't seen a common solution. I"m looking for a high-level best practices answer. I'm open to configurations using webpack rollup or whatever.

yarnpkg npm reactjs javascript
3 Answers

The option I'm currently using on my projects consist of skipping npm/yarn linking at all, and add a NPM script to symlink any local package into node_modules folder like:

  • create an empty node_modules folder
  • run local dependencies linking script
  • install NPM dependencies from root project

If module and the hosting project declares compatible React dependencies you should end up with your local module symlinked and just one React instance installed.

You might also want to automate local dependencies linking with tools like this.

user_29028210

The externals in webpack config will be useful.

// webpack.config.js
module.exports = {
  //...
  externals: ['react', 'react-dom'],
}

Normally the react component library does not need to be installed react.

user_102288550
Related