Imports must specify file extension when "type": "module"

[viglucci]

Describe the bug

Attempting to leverage this package with webpack 5 causes an exception during build.

BREAKING CHANGE: The request './ResizeObserverController' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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.

Full error:

ERROR in ../node_modules/@juggle/resize-observer/lib/ResizeObserver.js 1:0-70
Module not found: Error: Can't resolve './ResizeObserverController' in '...\node_modules\@juggle\resize-observer\lib'
Did you mean 'ResizeObserverController.js'?
BREAKING CHANGE: The request './ResizeObserverController' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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.

To Reproduce

Simply importing the lib when using webpack 5 causes the error.

import { ResizeObserver } from "@juggle/resize-observer";

Expected behavior

File extensions are mandatory when using "type": "module" in package.json.

Frameworks/Libraries used

{
    ...
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-proposal-json-strings": "^7.12.13",
    "@babel/plugin-proposal-optional-chaining": "^7.12.13",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-arrow-functions": "^7.12.13",
    "@babel/plugin-transform-shorthand-properties": "^7.12.13",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "webpack": "^5.0.0",
    ...
}

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context

• Found this issue so thinking maybe this is actually babel-related: Webpack breaking change: The extension in the request is mandatory babel/babel#12169.
• A lot of chatter around this in webpack issues: webpack 5.0.0-beta.30 Module not found: Error: Can't resolve '../../core-js/object/define-property' webpack/webpack#11467 (comment)
• Suggestions that TS is the culprit: webpack 5.0.0-beta.30 Module not found: Error: Can't resolve '../../core-js/object/define-property' webpack/webpack#11467 (comment)

[TremayneChrist]

Thanks for the report @viglucci!

TypeScript and file extensions is a bit of pain in this regard. It will be interesting to follow comments on this, as many packages must be facing this issue with webpack.

I'll have a look and see if anything else can be done.

[JayaKrishnaNamburu]

@viglucci can you confirm if the "type": "module" flag is in the project that you are working and trying to use this. Because, in the build of @juggle/resize-observer@3.3.0 the package.json doesn't contain the flag https://unpkg.com/browse/@juggle/resize-observer@3.3.0/package.json.

This issues happens when the project that you are trying to use @juggle/resize-observer uses this. Because, with native modules support, now when we target a esm build, the files should have .mjs extension. But with build tools like typescript, webpack and friends we don't usually use those extensions.

[TremayneChrist]

As mentioned by @JayaKrishnaNamburu, this library does not add "type": "module" in the package.json and could potentially be coming from another library which is using the ResizeObserver.

[viglucci]

Sorry for the radio silence on this issue. I've since moved on from the project where this issue was occurring, so I wasn't able to continue the conversation. Thanks for closing.