ESM-style config files don't work

[joaotavora]

I've followed the first lines of advice https://www.snowpack.dev/reference/configuration in hopes of creating a snowpack.config.js in ESM syntax. Tweaked package.json and that. But it doesn't work at all. What am I doing wrong? This is with node 12, but something similar happens with node 15.

❯ cat package.json
{
  "name": "bla",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "snowpack": "^2.18.5"
  }
}
❯ cat snowpack.config.js
// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/#configuration

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  // mount: {},
  // plugins: [],
  // installOptions: {},
  // devOptions: {},
  // buildOptions: {},
};
❯ npx snowpack dev

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/capitaomorte/Source/Javascript/bla/snowpack.config.js
require() of ES modules is not supported.
require() of /home/capitaomorte/Source/Javascript/bla/snowpack.config.js from /home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/loaders.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.
Instead rename snowpack.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/capitaomorte/Source/Javascript/bla/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at module.exports (/home/capitaomorte/Source/Javascript/bla/node_modules/import-fresh/index.js:32:59)
    at loadJs (/home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/loaders.js:16:18)
    at ExplorerSync.loadFileContentSync (/home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/ExplorerSync.js:84:26)
    at ExplorerSync.createCosmiconfigResultSync (/home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/ExplorerSync.js:89:30)
    at ExplorerSync.loadSearchPlaceSync (/home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/ExplorerSync.js:70:25)
    at ExplorerSync.searchDirectorySync (/home/capitaomorte/Source/Javascript/bla/node_modules/cosmiconfig/dist/ExplorerSync.js:55:32)

[FredKSchott]

You're right, we don't currently support this. Looks like Node.js needs us to run import() instead of require() to load your config as ESM. I'll update the docs to align with what we currently support (only CJS config for now) and then we can look into adding this support back.

[FredKSchott]

Yea, that's another good reason not to rush this support, since native Node.js ESM is still fairly new and rough. If I had to guess, we'll probably add back ESM config support via snowpack.config.mjs instead so that this is opt-in.

[FredKSchott]

Working through the backlog of stuff that's come up around v3.0 release! Will get eyes on that npm linked deps discussion

[joaotavora]

that this is opt-in.

Opt in or not, I think we'll need an ESM build of snowpack to be able to load that file in. That ESM build would also load a CJS config, presumably. But the reverse isn't true.

[FredKSchott]

I was suprised to learn this myself, but import() is supported in Node.js common.js files. https://nodejs.org/api/esm.html#esm_import_expressions

[joaotavora]

Mind blown 🤯 , so import()works and import doesn't. Okay, that means it is possible to keep the CJS build and import .mjs 👌 👌

[hfjallemark]

Is this the reason TypeScript config (snowpack.config.ts) doesn’t work in 3.0 either?

[FredKSchott]

That's correct, we actually dropped that support in v3.0 in favor of TS-typing via JSDoc:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  // ...

This is already in all of our templates, but we should make a note to the configuration documentation as well.

[FredKSchott]

added to the config docs page

[lgarron]

Chiming in to say that this is confusing when trying to adopt Snowpack for a project. The appeal of Snowpack is that I can basically live in an ESM-only world, but... it seems the very first thing I have to do is write a CommonJS file.

My project is configured as "type": "module" at the root, so I also needed to figure out to rename it to snowpack.config.cjs (instead of .js) so that node doesn't treat it as ESM. This causes issues with whatever linters de jour, so I still need to figure out how to include/exclude it appropriately to avoid failing our CI.

That's not all too crazy, but it's a really discouraging start, and makes me feel I'm going to have to add regular workarounds for Snowpack instead of things "just working". It would be a lot more welcoming if ESM config files worked by default.

[codedread]

Chiming in, I had everything in my project using TS+Snowpack and it was great - was really impressed with Snowpack's dev cycle and ease. However, I added my first unit test using ts-node and I was required to change my package.json to type:module and found this bug.

Any updates on supporting ESM config files ?