Esm: Error deploying to now.sh

[ericelliott]

I just created a new npm module that uses esm, and then tried to deploy a project that uses the module. However, the deployment is failing with the following error output:

> ./node_modules/gql-validate/node_modules/esm/esm.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ./node_modules/gql-validate/node_modules/esm/esm.js Module not found: Can't resolve 'internal/bootstrap/loaders' in '/tmp/634390ac/node_modules/gql-validate/node_modules/esm'

Jul 17 2019 11:43:47:701 | ...package.json | > Build error occurred
Jul 17 2019 11:43:47:703 | ...package.json | { TypeError: Cannot destructure property dir of 'undefined' or 'null'. at Object. (/tmp/634390ac/.next/serverless/pages/register.js:9022:1704) at Object.eqrp (/tmp/634390ac/.next/serverless/pages/register.js:9023:30) at __webpack_require__ (/tmp/634390ac/.next/serverless/pages/register.js:23:31) at Object. (/tmp/634390ac/.next/serverless/pages/register.js:9011:11) at Object.epOS (/tmp/634390ac/.next/serverless/pages/register.js:9015:30) at __webpack_require__ (/tmp/634390ac/.next/serverless/pages/register.js:23:31) at Module.edYE (/tmp/634390ac/.next/serverless/pages/register.js:8825:20) at __webpack_require__ (/tmp/634390ac/.next/serverless/pages/register.js:23:31) at /tmp/634390ac/.next/serverless/pages/register.js:91:18 at Object. (/tmp/634390ac/.next/serverless/pages/register.js:94:10) type: 'TypeError', '$error': '$error' }

[jdalton]

The error require function is used in a way in which dependencies cannot be statically extracted looks to be related to a bundler. Be sure to add a module or browser field to your package.json that points to the raw ES module (leaving the main to point to the CJS bridge). It looks like you have the module field already. I wonder if something is ignoring the module field or somehow not configured to look for it.

[ericelliott]

Is there a good reason this is closed? 😕

I'm deploying all my apps to now.sh these days, and I'd like to be able to use esm in the dependencies.
Because it rocks. 🎸

P.S. Thank you. 😄

[jdalton]

I'm not super familiar with now.sh but did point you in a direction to investigate. If you can find out why a bundle script is ignoring module then I think you'll resolve the issue but that's a bit beyond esm. Keep digging and report back.

[ericelliott]

Hi @jdalton - the Zeit team responded.

We've tracked down what's causing this and have opened two PRs with potential fixes:

zeit/next.js#8081

• remain favoring main in package.json
• transparently remove the usage of esm via source transforms (it's not needed in webpack)

zeit/next.js#8082

• favor module in package.json
• maintain a list of improperly published packages and their fixes

esm doesn't play friendly with webpack, thus the error you're experiencing.

Unfortunately, it's not as simple as preferring the module key over the main key, as this breaks an unknown number of npm packages.

A notable example is node-fetch (~10 million weekly downloads), along with other packages listed in this webpack issue: webpack/webpack#4742

[ericelliott]

This custom Webpack config solved my issue:

module.exports = {
  webpack(config, { isServer }) {
    if (isServer) {
      config.resolve.mainFields = ['module', 'main']

      // Fix all packages that this change breaks:
      config.resolve.alias['node-fetch'] = 'node-fetch/lib/index.js'
    }
    return config
  },
}

The Zeit team is working on merging a permanent fix.

[jdalton]

Wow! Thank you poking it @ericelliott!

[jlarmstrongiv]

Can this issue be reopened? This still errors for me with primitive. Had to use patch-package and replace all imports/exports with require/module.exports. Not a longterm solution.