9

I'm trying to publish in NPM a component library made with React.

I don't want that it have external dependencies, even React modules, to have smallest possible file size and because the user will add this dependencies in the app.

I'm using npm and webpack to manage the dependencies.

  • This is my package.json dependencies:

    "devDependencies": {
        "webpack": "^1.13.1",
        "webpack-dev-server": "^1.14.1",
        "webpack-merge": "^0.13.0",
        "babel-core": "^6.9.1",
        "babel-loader": "^6.2.4",
        "babel-preset-es2015": "^6.6.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-react-hmre": "^1.1.1",
        "react": "^15.0.2",
        "react-dom": "^15.0.2"
      },
     "peerDependencies": {
       "react": "^15.0.2",
       "react-dom": "^15.0.2"
     }
    
  • In my webpack.config.js file I have entry point as 'component.jsx' and output as 'lib.js' file

    // Source code entry
    entry: {
      lib: './src/components/component.jsx'
    },
    
    // Code Output 
    output: {
      path: PATHS.build,
      filename: 'lib.js'
    },
    
  • I also included the "externals" attribute with the react modules to avoid webpack including it in the 'lib.js' output.

    externals: {
      'react': 'React',
      'react-dom' : 'ReactDOM'
    }
    
  • Finally this is the simple React component that i want to publish:

    import React from 'react';
    
    export default class Component extends React.Component {
    
      constructor() {
        super();
      }
    
      render() {
        return (
          <h1>MY COMPONENT</h1>
        );
      }
    }
    

I published it to NPM and installed it in another project. When I tried to use it after import React statement, it gives me an error saying that React is not defined (bundle.js:28448 Uncaught ReferenceError: React is not defined)

  • My code to probe the component:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Component from 'component';
    import $ from 'jquery';
    
    ReactDOM.render(
       <Component />,
       $("#app")
    );
    

Am I missing anything in the dependencies config?

Thanks

1
  • what version of npm? Jun 6, 2016 at 9:04

4 Answers 4

4

Webpack externals defaults to your libraryTarget. Meaning that if you don't specify anything, it will output the external as var, and exepcts it to be a global variable.

Webpack output using global:

/* 76 */
/***/ function(module, exports) {

    module.exports = react;

/***/ },

You need to tell it to look for the dependency in the installed modules (to require it). in order to do that, change your externals to:

Required change (in webpack.config):

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

And then it will output it using commonjs.

Webpack output using commonjs:

/* 76 */
/***/ function(module, exports) {

    module.exports = require('react');

/***/ },

Reference to webpack docs here.

Notice that I changed your externals back to lower case, since the value should be the dependency name to look for (in that case, react and react-dom).

(By the way, if you don't want to bundle any node_module, I recommend using webpack-node-externals)

9
  • 1
    I have made the changes that you said me but I get an error at: module.exports = require('react'); saying lib.js:8166 Uncaught ReferenceError: require is not defined
    – ldoc
    Jun 6, 2016 at 10:31
  • Yes, I have change externals options adding the commonjs prefix
    – ldoc
    Jun 6, 2016 at 10:35
  • I have not defined the "library" and "libraryTarget" in the "ouput" config, could be this the problem?
    – ldoc
    Jun 6, 2016 at 10:38
  • When are you getting this error? can you try and add "libraryTarget":"umd" to the output config?
    – lyosef
    Jun 6, 2016 at 10:51
  • I get the error when I load the "lib.js" file, at the end it have a /***/ function(module, exports) { module.exports = require("React"); /***/ } that generate the error
    – ldoc
    Jun 6, 2016 at 11:05
0

You are making output file as lib.js but while rendering you are reading bundle.js. Please rename either output file as bundle.js or include lib.js in your index.html in place of including bundle.js.

1
  • Sorry, I dont explain it well, bundle.js is the compiled file of the app that consume the component module, and it haveńt the same name.
    – ldoc
    Jun 6, 2016 at 9:34
0

I wrote a full Medium story because I had the same issue as you and there is no information about it. Check it out: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

The main fix is to add the external 'react': 'commonjs react' in the webpack.config.js file

0

I searched for several days to find the best solution. In my opinion, microbundle accomplishes this very easily. My build command is as follows:

"scripts": {
    "build": "microbundle build --globals react=React,react-dom=ReactDOM --jsx cloneElement,createContext,isValidElement,useContext,useReducer --jsxFragment Fragment --jsxImportSource react",
    "dev": "microbundle watch"
  },

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.