Reference error when using without a bundler

[blikblum]

I'm trying to use nanostores without a bundler (using https://modern-web.dev/docs/dev-server/overview/)

I'm getting Uncaught ReferenceError: process is not defined (Line https://github.com/nanostores/nanostores/blob/main/atom/index.js#L50)

This occurs because browsers do not define process in global scope

[ai]

We have a process for a reason (to reduce library size and increase performance by removing development checks).

I have no idea how to do the same thing without process (there is a way with package.exports but it is not stable yet).

Do you have any reasons to use ESM without bundler? I love ESM, but I think that even with ESM we still need bundler for performance reasons.

[blikblum]

Hi thanks for replying promptly.

I have no idea how to do the same thing without process (there is a way with package.exports but it is not stable yet).

package.exports is stable.

In node, the experimental flag for this feature was removed in v12.16.

Vite, webpack, rollup, web dev server, all support package.exports from sometime now

Do you have any reasons to use ESM without bundler? I love ESM, but I think that even with ESM we still need bundler for performance reasons.

Simplify development, less tooling. Browser supports ESM by default.

Agree that for large projects with hundreds of modules, bundling improves runtime performance. But in development better not bundling. See how vitejs works: no bundling in development, bundle on production

As a concrete example, in the project i found the issue (first time using nanostores) https://github.com/blikblum/wc-f7 , the examples were bundled with webpack with a lot of caveats. For each example i needed a package, a webpack config, run example separated, issues importing local packages, lots of dependencies.

When i migrated to web dev server things simplified a lot.

BTW: this same project uses lit that makes use of package.exports to run development version

[ai]

package.exports is stable.
In node, the experimental flag for this feature was removed in v12.16.
Vite, webpack, rollup, web dev server, all support package.exports from sometime now

The general package.exports could not replace process.env.

We need a support on development and production keys. It is a new feature and not well documented.

BTW: this same project uses lit that makes use of package.exports to run development version

Can you prove that it will work in all bundlers?

[ai]

As short term solution you can define:

window.process = {
  env: {
    NODE_ENV: 'development'
  }
}

Before <script> with application code. Just don’t forget to remove it and use bundler in production.

[blikblum]

Before <script> with application code. Just don’t forget to remove it and use bundler in production.

This is what i did: https://github.com/blikblum/wc-f7/blob/master/examples/extrouter/index.html#L14-L16

We need a support on development and production keys. It is a new feature and not well documented.

The documentation can be found at: https://nodejs.org/api/packages.html#conditional-exports

Specifically at https://nodejs.org/api/packages.html#community-conditions-definitions

See how lit uses https://github.com/lit/lit/blob/main/packages/lit-element/package.json#L22-L23

Can you prove that it will work in all bundlers?

The main, yes:
Rollup, vite, web dev server uses https://www.npmjs.com/package/@rollup/plugin-node-resolve
Webpack: https://webpack.js.org/guides/package-exports/

Those bundlers set development condition when in dev mode, loading the file specified in "development" key

Typescript has a initial implementation https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#packagejson-exports-imports-and-self-referencing not released on a stable version

In this case, fallback to the file pointed in main field

[ai]

This is what i did: https://github.com/blikblum/wc-f7/blob/master/examples/extrouter/index.html#L14-L16

It is better to see warnings from development checks. I recommend putting NODE_ENV: 'development'.

Webpack: https://webpack.js.org/guides/package-exports/

What about webpack 4?

Rollup, vite, web dev server uses https://www.npmjs.com/package/@rollup/plugin-node-resolve

I can’t find proves that it will use package.exports.*.development` in docs. Maybe you can show tests?

In this case, fallback to the file pointed in main field

It needs to change a lot in my development process. Now I have one issue from you. What if, after the changes, I got 100 issues from bundler users?

Another question is how to generate these development files? We need some hack for clean-publish like we did in dual-publish.

[blikblum]

It is better to see warnings from development checks. I recommend putting NODE_ENV: 'development'.

It has the same effect, since the check will also evaluate to true (process.env.NODE_ENV !== 'production')

BTW: is better to check directly for 'development' so when no env is set or is set to a different like staging the code is not bundled

What about webpack 4?

Will fallback to main field

I can’t find proves that it will use package.exports.*.development` in docs. Maybe you can show tests?

Webpack: https://webpack.js.org/guides/package-exports/#optimizations
ViteJs: https://vitejs.dev/config/#resolve-conditions
Rollup is white label, dev needs to configure env manually (same as process env)

It needs to change a lot in my development process. Now I have one issue from you. What if, after the changes, I got 100 issues from bundler users?

Although this is unlikely given the amount of work done in this spec, its always a risk

Another question is how to generate these development files? We need some hack for clean-publish like we did in dual-publish.

It would need do a transform (custom or with rollup). It really complicate the things a bit
Another alternative is to use something like import.meta.env (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta) https://vitejs.dev/guide/env-and-mode.html. Not sure if webpack sets this.

Finally, just leave as is and document in know issues

[ai]

BTW: is better to check directly for 'development' so when no env is set or is set to a different like staging the code is not bundled

We need it for test as well.

Webpack: https://webpack.js.org/guides/package-exports/#optimizations
ViteJs: https://vitejs.dev/config/#resolve-conditions
Rollup is white label, dev needs to configure env manually (same as process env)

Thanks for the review.

Let’s keep process.env.NODE_ENV for now, but I will try to think about preparing delopment version on next week.

In a few months, I hope to start migration to package.exports approach.