Export clean ESM modules

[sebdeckers]

Using graphql@14.2.1

/node_modules/graphql/jsutils/instanceOf.mjs line 16

// See: https://expressjs.com/en/advanced/best-practice-performance.html#set-node_env-to-production
// See: https://webpack.js.org/guides/production/
export default process.env.NODE_ENV === 'production' ? // eslint-disable-next-line no-shadow

Uncaught ReferenceError: process is not defined
    at instanceOf.mjs:16

The check process.env.NODE_ENV === 'production' breaks in the browser when using ESM version of graphql package. Is it possible to remove before publishing to NPM? Without it the ESM files work perfectly.

I am not using Webpack/RollUp/Babel. Simply copying the ESM files from node_modules to my frontend folder using unbundle.

Related but different:

• process.env.NODE_ENV reference causes error "require is not defined" when bundling with webpack (for GraphiQL) #1536
• Compile issue with Rollup #1293
• Provide .mjs entry for native ESM #1217

[abdonrd]

Also related but different: apollographql/graphql-tag#229

[Carglass]

Hello,

Id like to try to help with this issue. Using Unbundle, do you have a possibility to differentiate production from development code? I could not find a way to do it without using "bundlers". If there is not, the main issue, is that this export returns an optimized function for production, so that in the absence of the process.env, there is a choice to make about using the optimized function or the more helpful for development function. Any thoughts on this?

[dandv]

Not sure if this will get any traction before Node 12 drops the --experimental-modules flag, because they've asked the community to not publish any ES modules until then.

[sebdeckers]

While we are aware that the community has embraced the "module" field, it is unlikely that Node.js will adopt that field as many of the packages published using "module" include ES module JavaScript that may not evaluate in Node.js (because extensions are left off of filenames, or the code includes require statements, etc.). Please do not publish any ES module packages intended for use by Node.js until this is resolved.

1. I am looking to run the ESM on the web, not Node.js. (Universal ESM would be nice tho.)
2. The module field (et al.) is a de-facto practice. Supported by WebPack, RollUp, and Pika (afaik).

Compromise: Publish a distinct ESM package on NPM. Avoids conflict with Node.js and is backwards compatible with a variety of bundlers. E.g. lodash-es

Caveat, I'm not familiar with the reasons behind the above statement. Maybe this idea would cause problems in the long run. 🤷🏼‍♂️

[abdonrd]

Any news here? Thanks in advance!

[Banou26]

Could the ESM exports use complete import paths ?
e.g

- export { Source } from './source';
+ export { Source } from './source.mjs';

Since this results in errors like

Error: Cannot find module C:\dev\oz\packages\api\node_modules\graphql\language\source imported from C:\dev\oz\packages\api\node_modules\graphql\language\index.mjs

when using nodejs with ESM

[jaydenseric]

@Banou26 to achieve that, babel-plugin-transform-require-extensions can be used.

For example, here it is in action with extract-files:

• The source is propper Node.js compatible ESM, with imports using .mjs extensions: https://github.com/jaydenseric/extract-files/blob/v7.0.0/src/index.mjs#L1
• Babel is configured to replace the .mjs extensions with .js when the target format is CJS: https://github.com/jaydenseric/extract-files/blob/v7.0.0/babel.config.js#L7

[arlac77]

@jaydenseric what is i want to use the raw npm content without further bundling either from node or the browser than the content must be 100% valid esm with full file names.

[jaydenseric]

@arlac77 it is:

https://unpkg.com/extract-files@7.0.0/lib/index.mjs

[arlac77]

@arlac77 it is:

https://unpkg.com/extract-files@7.0.0/lib/index.mjs

but deep inside there are still some imports without extension

Error: Cannot find module /Users/markus/build/hook-ci/node_modules/graphql/jsutils/devAssert imported from /Users/markus/build/hook-ci/node_modules/graphql/utilities/buildASTSchema.mjs