React-boilerplate: How to exclude react and react-dom from the build

[kopax]

I know this is not related to directly the boilerplate, but it's eco system and I am looking for people familiar with the setup.

I have started using the boilerplate to create a component library, I have removed the app and most of the related stuff, and just kept what I needed.

The problem is when I try to import this library in another project, it complain because react is used twice in the project.

Si I probably need to exclude react and react-dom.

I have followed the documentation about exclusion

• https://webpack.github.io/docs/configuration.html#externals
• https://webpack.github.io/docs/library-and-externals.html,

I have tried the following configuration :

1.

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

2.

externals: { react: 'react', 'react-dom' : 'react-dom', }

3.

 externals: {
  react: 'React',
  'react-dom' : 'ReactDOM',
 }

4.

externals: {
  react: 'umd react',
  'react-dom' : 'umd react-dom'
}

5.

    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    },

I have also tried all the solution purposed here : https://github.com/webpack/webpack/issues/1275#issuecomment-176255624

I always have this error :

 Dynamic page loading failed Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://bf.me/react-refs-must-have-owner).(…)

So I wonder, is this related to this DLL or not ? should I add react in my package.json in exclusion or something ?

When I look at this 2005 question:

When I read this : http://stackoverflow.com/questions/34252424/webpack-umd-lib-and-external-files

and compare my generated start of umd module :

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define("bootstrap-styled", [], factory);
  else if(typeof exports === 'object')
    exports["bootstrap-styled"] = factory();
  else
    root["bootstrap-styled"] = factory();
})(this, function() {

I have the feeling external is ignored, I am using webpack 2, does anyone has any experience with exclusion and module ?

[kopax]

It appear that adding this :

    externals: {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react',
        umd: 'react',
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom',
        umd: 'react-dom',
      },
    },

to webpack.base.babel.js work, while it doesn't for webpack.prod.babel.js...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.