Imports should specify the file extension

[giejay]

I'm upgrading my project to webpack 5 and I'm seeing the following errors when using the lit-redux-router lib:

[0] ERROR in ./node_modules/project/node_modules/lit-redux-router/lit-redux-router.js 1:0-32
[0] Module not found: Error: Can't resolve './lib/route' in '/node_modules/lit-redux-router'
[0] Did you mean 'route.js'?
[0] BREAKING CHANGE: The request './lib/route' failed to resolve only because it was resolved as fully specified
[0] (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
[0] The extension in the request is mandatory for it to be fully specified.
[0] Add the extension to the request.
[0] 
[0] ERROR in ./node_modules/project/node_modules/lit-redux-router/lit-redux-router.js 2:0-36
[0] Module not found: Error: Can't resolve './lib/reducer' in node_modules/lit-redux-router'
[0] Did you mean 'reducer.js'?
[0] BREAKING CHANGE: The request './lib/reducer' failed to resolve only because it was resolved as fully specified
[0] (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
[0] The extension in the request is mandatory for it to be fully specified.
[0] Add the extension to the request.
[0] 
[0] ERROR in ./node_modules/project/node_modules/lit-redux-router/lit-redux-router.js 7:0-41
[0] Module not found: Error: Can't resolve './lib/actions' in '/node_modules/lit-redux-router'
[0] Did you mean 'actions.js'?
[0] BREAKING CHANGE: The request './lib/actions' failed to resolve only because it was resolved as fully specified
[0] (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
[0] The extension in the request is mandatory for it to be fully specified.
[0] Add the extension to the request.

After googling a bit, I discovered that all imports should specify the extension when the type is set to "module" in the package.json.

When I look at the code, for example the reducer: https://github.com/fernandopasik/lit-redux-router/blob/master/src/lib/reducer.ts

import type { ReadonlyDeep } from 'type-fest';
import type { Actions } from './actions';
import { ActionTypes } from './actions';
import { refreshRoute } from './service';

All the imports are not specifying the extension, which makes my build fail. Is it possible to add the extension, or shall I make a PR which does this?

[fernandopasik]

Yes, it is a messy issue tbh. If you want to read more about the whole problem microsoft/TypeScript#16577

For now, I've added a small task to add the .js extensions so this should work good with the latest version I've just published v0.16.0

[giejay]

Thanks for the quick fix!

[giejay]

Sorry to bother you again, but it seems there are still 2 issues:

import { unsafeHTML } from 'lit-html/directives/unsafe-html';
in route.ts is not adding the extension.

And also exports should specify it:

export { navigate } from './lib/actions';
in lit-redux-router.ts

If I fix those 2 locally, it works fine.

[fernandopasik]

@giejay sorry you are right, it's not working for the non default imports, sorry I'll have a look at this again

[fernandopasik]

@giejay please try again with v0.16.1

[giejay]

@fernandopasik So the export in lit-redux-router seems to be fixed now but the import in route.ts is still missing an extension:

import { unsafeHTML } from 'lit-html/directives/unsafe-html';

[fernandopasik]

Thank you for spotting it. This one is a different one, because the others were relative imports.
I'll resolve the module ones that resolve inside of it.

[giejay]

Hi @fernandopasik, any update?

[fernandopasik]

@giejay after more thinking on this I switched to using .js extensions in typescript. Everything is out in the 0.17.0 version

[fernandopasik]

It should be fixed now. If there's any remaining issue please comment again.

[giejay]

Hi, checked it yesterday and all is working fine now! Thanks