在webpack生产模式下发生错误，但在开发模式下运行良好

Question

An Uncaught TypeError occurred when I use webpack's production mode, but it works well in webpack's development mode.

After I compiled my frontend code into static resources with webpack, I served these resources on nodejs server with 3002 port. Now,when I visit http://localhost:3002/simple with the development mode resources,i can get right response,but i get error with the production mode resources. An 'Uncaught TypeError' occurred when i use webpack's production mode, but it can works well when i use webpack's development mode to generate the static resources. Both the two modes use a same webpack.config.js.

webpack's build result in production mode:

 ℹ ｢atl｣: Using typescript@3.5.3 from typescript
    ℹ ｢atl｣: Using tsconfig.json from /Users/liuchangyu/workspace/yid0708/src/web/tsconfig.json
    ℹ ｢atl｣: Checking started in a separate process...
    ℹ ｢atl｣: Time: 2710ms
    Hash: b5a201513cf282946d8c
    Version: webpack 4.35.3
    Time: 26364ms
    Built at: 2019-07-17 6:43:43 PM
                               Asset       Size  Chunks             Chunk Names
     scripts/common.b5a20.bundles.js   10.8 KiB       0  [emitted]  common
      scripts/index.b5a20.bundles.js   74 bytes       1  [emitted]  index
    scripts/runtime.b5a20.bundles.js   2.19 KiB       2  [emitted]  runtime
     scripts/simple.b5a20.bundles.js  187 bytes       3  [emitted]  simple
     scripts/vendor.b5a20.bundles.js    117 KiB       4  [emitted]  vendor
                    views/index.html  678 bytes          [emitted]  
    Entrypoint index = scripts/runtime.b5a20.bundles.js scripts/vendor.b5a20.bundles.js scripts/common.b5a20.bundles.js scripts/index.b5a20.bundles.js
     [5] ./node_modules/_react-router@5.0.1@react-router/esm/react-router.js + 1 modules 27.7 KiB {4} [built]
         |    2 modules
    [13] (webpack)/buildin/global.js 472 bytes {0} [built]
    [26] ./index.tsx + 2 modules 1.64 KiB {0} [built]
         | ./index.tsx 661 bytes [built]
         | ./pages/App.tsx 237 bytes [built]
         | ./routes/index.tsx 761 bytes [built]
        + 27 hidden modules
    Child html-webpack-plugin for "views/index.html":
         1 asset
        Entrypoint undefined = views/index.html
        [0] ./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./templates/template.html 596 bytes {0} [built]
        [2] (webpack)/buildin/global.js 472 bytes {0} [built]
        [3] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module

and in development mode:

    ℹ ｢atl｣: Using typescript@3.5.3 from typescript
    ℹ ｢atl｣: Using tsconfig.json from /Users/liuchangyu/workspace/yid0708/src/web/tsconfig.json
    ℹ ｢atl｣: Checking started in a separate process...
    ℹ ｢atl｣: Time: 2733ms
    Hash: a7dc899dea7d21139095
    Version: webpack 4.35.3
    Time: 26759ms
    Built at: 2019-07-17 6:37:49 PM
                               Asset       Size   Chunks             Chunk Names
     scripts/common.a7dc8.bundles.js    129 KiB   common  [emitted]  common
      scripts/index.a7dc8.bundles.js  123 bytes    index  [emitted]  index
    scripts/runtime.a7dc8.bundles.js   8.92 KiB  runtime  [emitted]  runtime
     scripts/simple.a7dc8.bundles.js  990 bytes   simple  [emitted]  simple
     scripts/vendor.a7dc8.bundles.js    926 KiB   vendor  [emitted]  vendor
                    views/index.html  678 bytes           [emitted]  
    Entrypoint index = scripts/runtime.a7dc8.bundles.js scripts/vendor.a7dc8.bundles.js scripts/common.a7dc8.bundles.js scripts/index.a7dc8.bundles.js
    [./index.tsx] 661 bytes {common} [built]
    [./node_modules/_webpack@4.35.3@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {common} [built]
    [./pages/App.tsx] 237 bytes {common} [built]
    [./routes/index.tsx] 761 bytes {common} [built]
        + 32 hidden modules
    Child html-webpack-plugin for "views/index.html":
         1 asset
        Entrypoint undefined = views/index.html
        [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./templates/template.html] 596 bytes {0} [built]
        [./node_modules/_webpack@4.35.3@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/_webpack@4.35.3@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module

index.tsx:

import * as React from 'react';
import * as ReactDom from "react-dom"

import App from "./pages/App";

ReactDom.render(<App/>, document.getElementById("main"));

App.tsx:

import * as React from 'react';
import Routes from "../routes";
import {BrowserRouter} from "react-router-dom"

const App = () => {
    return <BrowserRouter basename="/">{Routes()}</BrowserRouter>
};

export default App;

routes.tsx:

import * as React from 'react';

const {Suspense, lazy} = React;

import {Switch, RouteProps, Route} from "react-router-dom"

const Simple = lazy(() =>
    import(
        /* webpackChunkName:"simple" */
        '../components/Simple')
);

const routes: RouteProps[] = [
    {
        path: "/simple",
        exact: true,
        component: Simple
    },
];

const Routes = () => (
    <Suspense fallback={<i>loading...</i>}>
        <Switch>
            {
                routes.map(r => {
                    const {path, exact, component} = r;
                    return (
                        <Route key={"23123"} exact={exact} path={path}  component={component}/>
                    )
                })
            }
        </Switch>
    </Suspense>
);

export default Routes;

Simple.tsx:

import * as React from 'react';

const Simple = () => {
    return <div>Simple Component</div>

};

export default Simple;

The browser's error log is:

runtime.b5a20.bundles.js:1 Uncaught TypeError: Cannot read property 'call' of undefined at i (runtime.b5a20.bundles.js:1) at Object. (vendor.b5a20.bundles.js:1) at i (runtime.b5a20.bundles.js:1) at Module. (common.b5a20.bundles.js:15) at i (runtime.b5a20.bundles.js:1) at t (runtime.b5a20.bundles.js:1) at Array.r [as push] (runtime.b5a20.bundles.js:1) at index.b5a20.bundles.js:1 i @ runtime.b5a20.bundles.js:1 (anonymous) @ vendor.b5a20.bundles.js:1 i @ runtime.b5a20.bundles.js:1 (anonymous) @ common.b5a20.bundles.js:15 i @ runtime.b5a20.bundles.js:1 t @ runtime.b5a20.bundles.js:1 r @ runtime.b5a20.bundles.js:1 (anonymous) @ index.b5a20.bundles.js:1

It seems like some thing wrong with react or react-router ? because it can work well when I change BrowserRouter into a simple div .

Answer 1

Today I find the reason , I used webpack-deep-scope-plugin for tree shaking ,because of optimization.usedExports is enabled in production mode and disabled elsewise. They clashed！ This will be work:

module.exports = {
  //...
  optimization: {
    usedExports: false
  }
};

I suggest no longer to use webpack-deep-scope-plugin , just do webpack's default production optimization.