2
  • Operating System:

MacOS Catalina 10.15.6

  • Node Version:

v12.18.3

  • NPM Version:

6.14.7

  • webpack Version:

4.44.1

  • terser-webpack-plugin Version:

3.1.0

Expected Behavior

With TypeScript (just configured in existing React-project), I expected that TerserPlugin's sub-dependancy "jest-worker@26.3.0" would not break code-splitting by routes.

Actual Behavior

Code-splitting by routes (which worked fine before TypeScript configuration, but with TerserPlugin), - it just does not create chunks for routes anymore. It happens only in production. Bundle.js becomes bigger, and no route-chunks (0.bundle.js, 1.bundle.js, etc)

Code-splitting uses Suspense/lazy by documentation https://reactjs.org/docs/code-splitting.html#code-splitting.

Code

webpack.mode-production.js:

optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          parallel: true, // false tried too
          extractComments: false,
          sourceMap: false,
          terserOptions: {
            output: {
              comments: false,            },
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    },

Here is iTerm output "$ npx webpack --mode=production"

npx webpack

webpack is watching the files…

(node:12883) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Hash: 6933e17ca16f76021b02
Version: webpack 4.44.1
Time: 28424ms
Built at: 2020-08-14 11:37:38
 13 assets
Entrypoint main = bundle.js (prefetch: 12.bundle.js 3.bundle.js 0.bundle.js 1.bundle.js 2.bundle.js 4.bundle.js 5.bundle.js 6.bundle.js 7.bundle.js 8.bundle.js 9.bundle.js 10.bundle.js)
  [4] (webpack)/buildin/harmony-module.js 573 bytes {11} [built]
  [8] ./src/contexts/theme.jsx 3.07 KiB {11} [built]
  [9] ./src/helpers/index.js 1.1 KiB {11} [built]
 [17] ./node_modules/.pnpm/react-redux@7.2.1_49f644e2f7de4182503f8b93abece808/node_modules/react-redux/es/index.js + 22 modules 49.9 KiB {11} [built]
      |    23 modules
 [18] ./src/App/images/index.js 1.71 KiB {11} [built]
 [55] ./src/constants.js 5.51 KiB {11} [built]
 [60] ./src/App/App.scss 833 bytes {11} [built]
 [62] ./src/redux/reducers/index.js 1.23 KiB {11} [built]
[187] ./src/redux/store.js 3.47 KiB {11} [built]
[203] ./src/App/index.jsx 13.4 KiB {11} [built]
[207] ./src/redux/reducers/qSelections.js 2.05 KiB {11} [built]
[324] ./src/getAppHelpers.js 12.9 KiB {11} [built]
[487] multi react-hot-loader/patch ./src/index.jsx 40 bytes {11} [built]
[491] ./src/index.jsx 5.22 KiB {11} [built]
[498] ./src/styles/index.scss 748 bytes {11} [built]
    + 1437 hidden modules

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(55,7)
      TS2578: Unused '@ts-expect-error' directive.

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(145,7)
      TS2578: Unused '@ts-expect-error' directive.

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(171,9)
      TS2578: Unused '@ts-expect-error' directive.

In "webpack --mode=development" there are the same erorrs in iTerm, but route-chunks get created. Problem only in prod mode.

How Do We Reproduce?

  • Configure TerserPlugin as above.
  • Configure code-splitting Suspense/lazy, which generates route-chunks (0.bundle.js, etc) just like in React docs:
// https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);
  • Configure TypeScript:

package.json:

"devDependencies": {
...
    "@types/classnames": "^2.2.10",
    "@types/lodash": "^4.14.159",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "terser-webpack-plugin": "^3.0.2",
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
...
  }

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "src/**/*.js",
    "src/**/*.jsx" // In project only one component converted to TypeScript for now, and it has .tsx extension.
  ]
}

I tested case with TerserPlugin removed (whole webpack.optimization section removed), and TypeScript, and code-splitting then worked fine. I did not find yet any TypeScript configurations, that could solve problem (mute errors in iTerm, and fix code-splitting).

Maybe there is some workaround, or maybe I missed something ?

Thanks in advance.

bannndi
  • 21
  • 4

0 Answers0