sapper icon indicating copy to clipboard operation
sapper copied to clipboard

Switch from commonjs (cjs) to ES6 modules (esm)

Open ghost opened this issue 3 years ago • 2 comments

Is your feature request related to a problem? Please describe. ES Modules are the future, and many have realized this. NodeJS has introduced experimental esm support and popular players in open source are enforcing the use of them; for example, airbnb's widely known javascript style guide is already forbidding the use of non-standard module systems - this includes CommonJS.
To enable ESM support across my entire sapper project, I set "type": "module" in my package.json. Unfortunately, sappers default rollup configuration from the sapper template uses an internal file imported from 'sapper/config/rollup' which sets the server's output format to 'cjs' (commonjs). This breaks server.js for me and others using esm modules in nodejs, since require is not defined.

Describe the solution you'd like ES Modules are the only true standard-conformant way of using modules, and even though they're in experimental support I haven't encountered any issues with using them. Considering sapper is an equally "experimental" and new framework, migrating to esm will probably work just fine. Also, the default rollup sapper template already converts commonjs modules into es modules with the commonjs plugin, so the only change needed is to switch the output format to esm, and either adding "type": "module" by default in the sapper template or using the .mjs file ending for the server output file.

Describe alternatives you've considered It is also possible to just use an object spread and overwrite the format to esm, however this feels like more of a workaround then a fix.

How important is this feature to you? As I can easily overwrite the defaults set by sappers rollup configuration, this is not of high importance. However, deciding to use esm over commonjs now would definitely prepare sapper and related projects for the future.

ghost avatar Aug 30 '20 14:08 ghost

Related https://github.com/sveltejs/sapper/issues/1204

jthegedus avatar Sep 28 '20 02:09 jthegedus

In my Sapper project, I was not able to use a third party component that is implemented using ES6 modules. This is a serious problem. (It works in plain Svelte, and in SvelteKit.)

When adding the third party lib which uses ES6 modules and running yarn run dev, I got the errors require() of ES modules is not supported. (if the third party lib has type: module) or (if it doesn't) SyntaxError: Unexpected token 'export'.

Based on the PR referenced here, I was able to hack around it by modifying rollup.config.js:

const serverOutput = config.server.output();
serverOutput.format = 'esm';
...
  server: {
    input: config.server.input(),
    output: serverOutput,

and adding to my project's package.json:

  "type": "module",

This makes the server compile and run, and the app works fine.

Unfortunately, it breaks once I include certain other CommonJS based third party libraries that manually append to exports.

benbucksch avatar Jun 30 '21 03:06 benbucksch