Webpack React library for global variable in window

Question

Webpack React library for global variable in window

I use webpack to build React components. Here is the JSX file:

// index.js
var React = require('react');
var ReactDOM = require('react-dom');
var renderHelloComponnet = function(id) {
    ReactDOM.render(
      <h1>Hello, World!</h1>,
      document.getElementById(id)
    );
}

Then I want to call the function renderHelloComponnetin html I have a configuration file for webpack:

module.exports = {
    entry: {
        index: './src/index.js'
    },       
    output: {
        path: __dirname + '/build',
        filename: '[name].bundle.js',
        libraryTarget: "var",
        library: ["ABC"],
    },    
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    
    module: {
        loaders: [
            { 
                test: /\.jsx?$/, 
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: { presets:['react'] }
            }
        ]
    }
}

However, I cannot render my component in html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script type="text/javascript" src="./build/index.bundle.js"></script>

  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript">
        ABC.renderHelloComponnet('example');
    </script>
  </body>
</html>

I get an error: TypeError: ABC.renderHelloComponnet is not a function

+4

reactjs webpack

fudy Jan 29 '16 at 6:50

source share

1 answer

dreyescat · Accepted Answer · 2016-01-30T11:08:30+0000

What you export module.exportsto yours is what you get in your libraryvar. Therefore, if in yours index.jsyou export renderHelloComponent:

module.exports = renderHelloComponent;

then in your ABCvar you will get a function:

<script type="text/javascript">
    ABC('example');
</script>

If you want your libraryvar to actually have a method renderHelloComponent, you can export the object using this function inside:

module.exports = {
    renderHelloComponent: renderHelloComponent
}

:

<script>
    ABC.renderHelloComponent('example');
</script>

Webpack React library for global variable in window

More articles: