Use module type "es2015" or newer instead of commonjs

[raysuelzer]

I'm wondering if there is any reason that this module is being built using "commonjs" in the tsconfig?

  "compilerOptions": {
    ...
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    ...
}

CommonJS modules are not tree shakable by webpack which results in increased bundle sizes (and compiler warnings). (see: https://webpack.js.org/guides/tree-shaking/ )

For reference: Apollo client builds an es2015 module. I think this is probably a safe default. I don't imagine this would impact anything other than reduced bundle size for those importing the library.

Happy to put in a PR with this change, I opened another PR which will drop your bundle size by not exporting the entirety of lodash with your package.

[seanaguinaga]

I get this build error when using nextjs 12

> Build error occurred
14:09:07.538 | Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /vercel/path0/node_modules/lodash-es/lodash.js
14:09:07.539 | require() of ES modules is not supported.
14:09:07.542 | require() of /vercel/path0/node_modules/lodash-es/lodash.js from /vercel/path0/node_modules/@nerdwallet/apollo-cache-policies/dist/cache/InvalidationPolicyCache.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
14:09:07.543 | Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /vercel/path0/node_modules/lodash-es/package.json.
14:09:07.543

<br class="Apple-interchange-newline" style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">

[danReynolds]

I get this build error when using nextjs 12

> Build error occurred
14:09:07.538 | Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /vercel/path0/node_modules/lodash-es/lodash.js
14:09:07.539 | require() of ES modules is not supported.
14:09:07.542 | require() of /vercel/path0/node_modules/lodash-es/lodash.js from /vercel/path0/node_modules/@nerdwallet/apollo-cache-policies/dist/cache/InvalidationPolicyCache.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
14:09:07.543 | Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /vercel/path0/node_modules/lodash-es/package.json.
14:09:07.543

<br class="Apple-interchange-newline" style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">

This should be fixed in the latest version, let me know if it's not.

[seanaguinaga]

It works for me

I use this server side and client side, maybe I can skip that on the server?, but I have to use transpiration to not get a server side error

// next.config.js
const withTM = require("next-transpile-modules")([
  "@nerdwallet/apollo-cache-policies",
]); // pass the modules you would like to see transpiled

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
...
};

module.exports = withTM(nextConfig);

[danReynolds]

It works for me

I use this server side and client side, maybe I can skip that on the server?, but I have to use transpiration to not get a server side error

// next.config.js
const withTM = require("next-transpile-modules")([
  "@nerdwallet/apollo-cache-policies",
]); // pass the modules you would like to see transpiled

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
...
};

module.exports = withTM(nextConfig);

Gotcha, ya my next thing to do is support both common JS and ESM with a dual setup, before it was just common JS. I haven't done that before so anyone reading this who is familiar feel free to reach out or set up a PR :)