Failure to import components using webpack

[finestgecko]

Describe the bug

I'm using Webpack 5 (via @symfony/webpack-encore) and getting a bunch of errors when I import the components. It seems to be a common problem.

1. I installed the package with npm install -D @rgossiaux/svelte-headlessui
2. I followed the Dialog example from the docs, importing the package like this:

import {
    Dialog,
    DialogOverlay,
    DialogTitle,
    DialogDescription,
} from '@rgossiaux/svelte-headlessui'

Which results in lots of errors like this:

export 'DialogOverlay' (imported as 'DialogOverlay') was not found in '@rgossiaux/svelte-headlessui' (module has no exports)
export 'DialogDescription' (imported as 'DialogDescription') was not found in '@rgossiaux/svelte-headlessui' (module has no exports)
export 'Dialog' (imported as 'Dialog') was not found in '@rgossiaux/svelte-headlessui' (module has no exports)

and lots like this:

[ encore ]  ERROR  Failed to compile with 10 errors23:40:34
[ encore ] Module build failed: Module not found:
"./node_modules/@rgossiaux/svelte-headlessui/index.js" contains a reference to the file "./components/dialog".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@rgossiaux/svelte-headlessui/index.js" contains a reference to the file "./components/disclosure".
[ encore ] This file can not be found, please check it for typos or update it if the file got moved.

and, crucially, this:

Did you mean 'index.js'?
BREAKING CHANGE: The request './components/transitions' 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.

To reproduce

Node.js version:

joel@xenon:~$ node -v
v16.15.0

svelte-headlessui version:

joel@xenon:~/app/server$ cat package.json | grep svelte-headlessui
    "@rgossiaux/svelte-headlessui": "^1.0.2",

webpack-encore version:

joel@xenon:~/app/server$ cat package.json | grep webpack
    "@symfony/webpack-encore": "^2.1.0",

(which internally uses Webpack ^5.7.2)

The fix

One of the errors suggested this:

The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Adding .js to the imports seems to solve the problem.

---

Update: For anyone else facing this problem, a better solution might be to add fullySpecified: false to webpack.config.js.

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false,
  },
}

(props to this comment for the solution)

[rgossiaux]

Thanks for the report. I found this SvelteKit issue which has a lot of useful context as well: https://github.com/sveltejs/kit/issues/2040

Since there's a workaround & most Svelte projects don't use webpack, I'm not going to prioritize this just yet. Hopefully in the meantime the guidance for library authors will become a little clearer.