Problem
- The top-level
tsconfig.json specifies "module": "commonjs". This prevents tree-shaking, or the elimination of dead code.
According to the webpack docs:
In order to take advantage of tree shaking, you must...
- Use ES2015 module syntax (i.e. import and export).
- Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details).
- Add a "sideEffects" property to your project's package.json file.
- Use the production mode configuration option to enable various optimizations including minification and tree shaking.
- Make sure you set a correct value for devtool as some of them can't be used in production mode.
Solution
-
Set "module": "node16" and "moduleResolution": "node16" in the tsconfig.json
For compatibility with Node.js so users who require CommonJS can get it, but consumers of our bundled packages will get ES2020 and can do tree-shaking.
"module": "node16"
Available from 4.7+, the node16 and nodenext modes integrate with Node’s native ECMAScript Module support. The emitted JavaScript uses either CommonJS or ES2020 output depending on the file extension and the value of the type setting in the nearest package.json
"moduleResolution": "node16"
Node.js v12 and later supports both ECMAScript imports and CommonJS require, which resolve using different algorithms. These moduleResolution values, when combined with the corresponding module values, picks the right algorithm for each resolution based on whether Node.js will see an import or require in the output JavaScript code.
-
Append .js to all relative imports filenames
-
Set "type": "module" in all package.json files
Definiton of Done
Non Issues
Migrated from Asana: https://app.asana.com/0/1203912381456855/1205320821557402