Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use CommonsChunkPlugin & `external` config at the same time causes error

See original GitHub issue

I have external module precompiled by webpack in the seperate js, and my project has multiple entry points, I want the webpack.optimize.CommonsChunkPlugin extract common chunks between these entry points, however it seems that it cannot work with externals config in webpack.config.js, and throws an error:

Uncaught ReferenceError: __WEBPACK_EXTERNAL_MODULE_38__ is not defined
(anonymous function) @ external "base":1
__webpack_require__ @ bootstrap 66a520adc59b2bde46c2:564
fn @ bootstrap 66a520adc59b2bde46c2:98
webpackJsonph5_es6_react__name_.68 @ index.scss:8
__webpack_require__ @ bootstrap 66a520adc59b2bde46c2:564
fn @ bootstrap 66a520adc59b2bde46c2:98
webpackJsonph5_es6_react__name_.0 @ index.entry.js:16
__webpack_require__ @ bootstrap 66a520adc59b2bde46c2:564
webpackJsonpCallback @ bootstrap 66a520adc59b2bde46c2:21
(anonymous function) @ index.entry.js:11
webpackUniversalModuleDefinition @ universalModuleDefinition:9
(anonymous function) @ universalModuleDefinition:10

webpack.config.js

module.exports = {
  entry: entryJSMap,
  context: pwd,
  output: {
    path: path.join(pwd, 'build'),
    publicPath: '/build/',
    filename: '[name].entry.js',
    libraryTarget: 'umd',
    library: [pkgConfig.name, '[name]'],
    umdNamedDefine: true
  },
  module: {
    loaders: [
      ...
    ]
  },
  devtool: '#source-map',
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      // (the commons chunk name)

      filename: "commons.js",
      // (the filename of the commons chunk)

      // minChunks: 3,
      // (Modules must be shared between 3 entries)

      //chunks: Object.keys(entryJSMap).concat(['base'])
      // (Only use these entries)
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    root: [
      path.resolve('./node_modules'),
      path.resolve('./src/widgets')
    ]
  },
  externals: ["base"]
};

entry 1 js

"use strict";
import {React, ReactDOM} from 'base';

import PageHeader from '../../mods/header/index';

ReactDOM.render(<PageHeader subTitle="Home page here!"/>, document.getElementById('J_Page'));

entry 1 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <div class="page-content" id="J_Page"></div>
    <script src="../../widgets/base/seed-react.js"></script>
    <script src="../../commons.js"></script>
    <script src="./index.entry.js"></script>
</body>
</html>

entry 2 js

"use strict";
import {React, ReactDOM} from 'base';

import PageHeader from '../../mods/header/index';

ReactDOM.render(<PageHeader subTitle="Detail page here!"/>, document.getElementById('J_Page'));

entry 2 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Detail</title>
</head>
<body>
    <div class="page-content" id="J_Page"></div>
    <script src="../../widgets/base/seed-react.js"></script>
    <script src="../../commons.js"></script>
    <script src="./index.entry.js"></script>
</body>
</html>

…/…/widgets/base/seed-react.js

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define("base", [], factory);
    else if(typeof exports === 'object')
        exports["base"] = factory();
    else
        root["base"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "/build/";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {}...
])
});
;

Looking forward from your explanation and solution, thank you!

Issue Analytics

State:
Created 8 years ago
Comments:17 (4 by maintainers)

Top GitHub Comments

5reactions

readyoucommented, Mar 4, 2016

I got this problem when using require.ensure and specifying externals: [‘react’]

4reactions

jrs320commented, Feb 18, 2016

why no people 鸟 you

Top Results From Across the Web

While running in normal mode it's not allowed to use a non ...

It seems like a bug to this webpack plugin for the time being... new webpack.optimize.CommonsChunkPlugin('libraries-react' ...

CommonsChunkPlugin - webpack

The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry ......

Configure Grafana | Grafana documentation

Grafana has default and custom configuration files. You can customize your Grafana instance by modifying the custom configuration file or by using ......

webpack: Unraveling CommonsChunkPlugin | by John Tucker

In this case, we use a function as a value for minChunks; returning true for modules to be included in the vendor bundle...

A Guide to Managing Webpack Dependencies - Toptal

Both JavaScript bundles can share common libraries and components. For that, we can use CommonsChunkPlugin , which finds modules that occur in multiple...