Can't import the named export 'parse' from non EcmaScript module

[e0]

Hi @lukeed. First of all, thank you for worktop! Using this feels like a dream compared to what I was putting together before when working with Cloudflare workers.

I was following along this Fauna tutorial and ran into the following issue when running wrangler dev (and wrangler publish). I noticed that this error only triggers for v0.7.0 and that using v.0.6.3 does not trigger the error and the project runs fine.

Do you know what the problem might be? I'm not using TypeScript and my node version is v15.2.1. This was a pretty minimal project as described in the tutorial but please let me know if you want me to create a repo that can recreate the error.

👀  ./node_modules/worktop/router/index.mjs 80:36-37
Can't import the named export 'parse' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (~/Library/Caches/.wrangler/wranglerjs-1.17.0/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:90:6)
...

Edit: Just want to add that I have tried this in another project without faunadb and worktop is the only dependency.

[lukeed]

Hey, thank you :)

This is a problem with Webpack. They've gone rogue & employed their own, non-spec-compliant resolution algorithm & are happy to do so because – I guess – they think they're popular enough & can just do whatever they want.

That parse method is from regexparam, which will resolve to regexparam/dist/index.mjs via this line. You'll see that that file has the named parse export. Everything is setup correctly – which can be verified with any other tool that's configured correctly.

That said, you can still force Webpack to load the correct file(s) via its resolve.alias option. Your webpack.config.js may end up looking something like:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      regexparam: require.resolve('regexparam'),
    },
  },
};

Lemme know if that does the trick!

[e0]

Thank you so much for the quick response @lukeed!

Webpack can be such a pain indeed... I didn't get that snippet to work immediately but it definitely pointed me to the right direction. I fiddled around with the resolve section and got regexparam to work but then it started complaining about worktop/router. Eventually I arrived at the following webpack config, which fixed it for me.

module.exports = {
  target: 'webworker',
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
    ],
  },
}

Back to the fun stuff now. Thanks again!

[lukeed]

Ah, hah, so it's the age-old mjs issue again. If you don't mind, can you see if webpack-modules works here?

[e0]

Ah, hah, so it's the age-old mjs issue again. If you don't mind, can you see if webpack-modules works here?

This works too!

[lukeed]

Awesome, thank you. Now have two snippets I can refer Webpack users to 😉 Thanks!

[simplenotezy]

@lukeed When switching away from Webpack, what "type" do you recommend, and what's needed in order to migrate away from webpack?

In my wrangler.toml file, if I remove webpack and instead write "javascript" I get an different error. The examples in this repo doesn't even have a wrangler.toml file, but if I omit it wrangler will complain:

Error: missing field `type`

If I set it to type "javascript" I get:

Uncaught SyntaxError: Cannot use import statement outside a module

For now the only solution is to default back to using webpack with a custom webpack.config.js