Webpack not tree shaking unused import

Question

Webpack is not treeshaking this unused import when creating a production build in my next.js app.

I have marked sideEffects: false in @shared/graphql.mock package.json

file:

import { MockData } from '@shared/graphql.mock'

const should = (
  fn,
) => {
  if (process.env.NODE_ENV !== 'production') {
    return fn
  }
}

/*#__PURE__*/ const mockData = should(() => MockData)()

webpack output:

const should = (fn)=>{
    if (false) {}
};

/*#__PURE__*/ const mockData = should(() => _shared_graphql_mock_DATA__WEBPACK_IMPORTED_MODULE_2__.N[0])();

Added example repo here: https://codesandbox.io/p/devbox/turborepo-template-forked-qzgpmn?file=%2Fapps%2Fweb%2F.next%2Fserver%2Fpages%2Fapi%2Ftest.js%3A81%2C1-95%2C1&welcome=true

See: packages/server/server.ts apps/web/pages/api/test.ts

Output: apps/web/.next/server/pages/api/test.js

Answer 1

The annotation for the terser should be place before the statement to mark the function call as side effect free.

const mockData = /*#__PURE__*/ should(() => _shared_graphql_mock_DATA__WEBPACK_IMPORTED_MODULE_2__.N[0])();

The reason for webpack not dropping unused functions in your build is because the minimize option is disabled. You have to enable webpack to use the terser plugin.

Refer to the unused option in the compression options section for the minimizer that facilitates this.

In next.config.js,

module.exports = {
  reactStrictMode: true,
  transpilePackages: ["ui"],
  webpack: (config) => {
    // config.optimization.minimize = false;
    return config;
  },
};