How to publish React component without including react

Question

I am creating a React component and want to publish it.

I've put in the package.json:

  "peerDependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },

And expect that when building my module with webpack, my component would not yell this:

 Module not found: Error: Can't resolve 'react'

How can I compile a production component without including React?

I checked some famous ones :

react-select react-toggle

And they list react only in peerDependecies (and in devDependecies, for testing and development purposes I guess) If I add react to my devDeps and run webpack -p it compiles successfully but then I have react in my component bundle.

Here my simple webpack config

What am I missing?

UPDATE I added "external" option in webpack config (the gist is updated), with this is compiles correctly, it does not include React in the bundle, but when I import it in project with React to use it it gives me:

Cannot read property 'Component' of undefined

soon as it finds React.Component of my component...

Dimitar Christoff · Accepted Answer · 2017-10-16 14:19:00Z

4

You can set it as a peerDependency but also add it as a devDependency so you can install it locally. make sure it's as external in webpack config. That's about all you need

see https://webpack.js.org/configuration/externals/#object

  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    },
    'prop-types': {
      root: 'PropTypes',
      commonjs2: 'prop-types',
      commonjs: 'prop-types',
      amd: 'prop-types'
    }
  },

  output: {
    publicPath: '/',
    filename: '[name]',
    library: "foobar",
    libraryTarget: 'umd',
  }

when consuming:

"dependencies": { 
  "foobar": "1.0.0",
  "react": "~16.0.0",
  "react-dom": "~16.0.0",
  "prop-types": "^15.6.0"
}

edited Oct 16, 2017 at 14:19

answered Oct 16, 2017 at 13:25

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ciaoben Over a year ago

Thanks, but I have added externals options (you can see the updated gist in question), it compiles, keep out React as I wanted, but when I import it in a project with React and import it, it fails with "Cannot read property 'Component' of undefined" when it reads React.Component

Dimitar Christoff Over a year ago

the project that consumes it needs to have react installed so it can reoslve it. when you npm install, if not there, peerDependenices should whine and potentially break builds etc. additionally, you may have different build targets - such as UMD or CJS - make sure it's consistent. I've updated my answer to include a typical setup

Dimitar Christoff Over a year ago

PS cannot access gists, blocked behind a corporate firewall designed to prevent code leaking...

ciaoben Over a year ago

Npm does not warn me about wrong peerDeps in this case.. and in the same file I added my component I already import react and use it for other components.--

Collectives™ on Stack Overflow

How to publish React component without including react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related