Webpack crashes with Babel transpiled ES6 modules

Webpack started enforcing the presence of file extensions on import/export statements inside ES6 modules (https://github.com/webpack/webpack/issues/11467).

It seems Babel is currently injecting statements that violate this rule while transpiling. The following log is from a fresh install of Ember 3.28.1 with Embroider blueprint, after installing a dependency with ES6 modules and requiring one of them (I’ve redacted the sensible information):

ERROR in …/…/…/PROJECT_PATH/node_modules/@my-scope/my-package/src/auth-client.js 1:0-166 Module not found: Error: Can’t resolve ‘/PROJECT_PATH/node_modules/@embroider/core/node_modules/@babel/runtime/helpers/esm/defineProperty’ in ‘/PROJECT_PATH/node_modules/@my-scope/my-package/src’ Did you mean ‘defineProperty.js’? BREAKING CHANGE: The request ‘/PROJECT_PATH/node_modules/@embroider/core/node_modules/@babel/runtime/helpers/esm/defineProperty’ failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a ‘.js’ file where the package.json contains ‘“type”: “module”’). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. @ …/…/…/PROJECT_PATH/node_modules/@my-scope/my-package/src/mixins/token/unauthenticated.js 1:0-50 11:13-23 @ …/…/…/PROJECT_PATH/node_modules/@my-scope/my-package/src/client.js 3:0-66 32:15-27 @ …/…/…/PROJECT_PATH/node_modules/@my-scope/my-package/index.js 1:0-41 1:0-41 @ ./services/my-service.js 2:0-37 @ ./assets/ember-client.js 49:9-41

There are some issues on Babel that revolve around this, but they claim it was fixed by 7.12.0 (https://github.com/babel/babel/issues/12003, https://github.com/babel/babel/issues/12158).

There is a workaround so Webpack doesn’t freak out on incorrect Babel transpiled code. Maybe it’d be good to add it to the default blueprint: https://github.com/webpack/webpack/issues/11467#issuecomment-808618999

Ps.: I can’t disclosure the package code, but it’s just some classes with methods and only two dependencies: buffer and cross-fetch. It works as expected on node.js.

[MrChocolatine]

I don’t get it, the logs you posted were produced by Webpack v5.x. If you were to stick with v4.x this wouldn’t even be an issue as polyfills are included. On a side note, IIRC, ember-auto-import v2.x is backwards compatible, so you shouldn’t have trouble updating it.

Huh, true true… Embroider scenarios, Webpack 5 implied… I am not quite not sure why I said that about Webpack, I have been juggling with Embroider and tests all day so my brain was kind of melting after a while.

Anyway I found a way to fix my initial issue:

https://github.com/peopledoc/ember-reading-time/pull/13/commits/c55b4070223849bf60ab504aed6c5f2e377b96cc

I realise I am squatting your issue sorry, let me know if you want me to create another one so that I stop interfering with yours ✌️ .

[andsmedeiros]

I don’t get it, the logs you posted were produced by Webpack v5.x. If you were to stick with v4.x this wouldn’t even be an issue as polyfills are included. On a side note, IIRC, ember-auto-import v2.x is backwards compatible, so you shouldn’t have trouble updating it.