Webpack 5: Import fails to resolve with Module not found error

[puppe82]

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using?

Vue 3

Bug Description

After upgrading to FullCalendar v6, I get an error about failing to resolve a dependency.

App •  ERROR  •  UI  in ./node_modules/@fullcalendar/vue3/dist/index.js

Module not found: Can't resolve imported dependency "./FullCalendar" 

When I checked the file mentioned in the error, it looks like this:

If I change the first line with the import to include the file extension .js, I get two new similar errors:

 App •  ERROR  •  UI  in ./node_modules/@fullcalendar/vue3/dist/FullCalendar.js

Module not found: Can't resolve imported dependency "./options"

 App •  ERROR  •  UI  in ./node_modules/@fullcalendar/vue3/dist/FullCalendar.js

Module not found: Can't resolve imported dependency "./utils"

That file called FullCalendar.js looks like this:

Adding the file extension .js to imports on lines 4 and 5 seems to fix the issues, and the library starts to work as expected.

import { OPTION_IS_COMPLEX } from './options.js';
import { shallowCopy } from './utils.js';

---

I have tried to find information online about whether the issue is in my own configuration or in the library's source code but so far I haven't been able to find any other fix than adding the .js file extension on the above mentioned lines for the imports.

This issue appeared after upgrading to @fullcalendar/vue3 version 6.0.0, and the same issue persists in versions 6.0.1 and 6.0.2

Could it be that package.json needs some extra rule or setting that the generated files in dist/ folder would have the imports with .js file extensions?

---

In case this issue depends on the package manager, I'm using yarn in my project.

$ yarn --version
1.22.19

Additionally, here are my node and npm versions.

$ node --version
v18.12.1

$ npm --version
8.19.2

[acerix]

Would you be able to post a runnable, stripped-down demonstration of the bug? Would really appreciate it because the time saved reproducing will be time spent fixing.

You can use this example project as a starting point, I didn't have any issue building with yarn:

https://github.com/fullcalendar/fullcalendar-examples/tree/main/vue3

[puppe82]

I could try to post a demonstration of the bug. I'm using FullCalendar as a part of a Quasar (https://quasar.dev/) project and do understand that the issue might not always be present when using Vue 3.

Nonetheless, I guess the question is whether there is a reason to omit the file extension in the import statements.

Is it possible that I'm running into the problem described below?

Node.js doesn’t supports imports without file extension:

import client from './client';

This will be error, extension should be provided:

import client from './client.js';

Extensions can be:

js
mjs
cjs

And need to be resolved, checking what kind of a file exists.

In CommonJS was no such a problem, we can avoid extension:

const client = require(‘./client’);

Because of autoresolver.

Source: import-js/eslint-plugin-import#2227

[puppe82]

I had a look into other packages in the node_modules folder, and it seems like FullCalendar is the only one omiting the extension in .js files when something is imported from a "local" file.

I'll let you know if I find another example of a package in which the file extension is omitted in the import statements. During the past two years developing my project this is the first time I encounter this issue.

Any help would be appreciated if there's some flag or setting I could enable to fix the issue.

I'm paying for the license and think this is a wonderful project but instead of sending an email decided to ask here if someone else is facing the same issue - or possibly knows how to fix it.

Below are some examples of other packages.

[puppe82]

Would you be able to post a runnable, stripped-down demonstration of the bug? Would really appreciate it because the time saved reproducing will be time spent fixing.

FullCalendar v6

https://stackblitz.com/edit/quasarframework-webpack-wsrvk3?file=package.json

FullCalendar v5

https://stackblitz.com/edit/quasarframework-webpack-biw33g?file=package.json

[puppe82]

@acerix

I have now added stripped-down demonstration of the issue comparing v5 and v6. As you can see, it's enough to have just the import without actually using FullCalendar on the page.

import FullCalendar from '@fullcalendar/vue3';

[puppe82]

I also cloned the repo (https://github.com/fullcalendar/fullcalendar-vue) added the missing file extensions and ran pnpm build. To my knowledge, this fixes the issue.

---

src/

dist/

[acerix]

Thanks for the demos, I can confirm there's an issue with importing this way, although I'm not sure it's a bug that the extensions are missing. I also see this error which sounds like the issue is with using fully specified resolution.

Module not found: Error: Can't resolve './FullCalendar' in '/home/projects/quasarframework-webpack-4gwkdk/node_modules/@fullcalendar/vue3/dist'
Did you mean 'FullCalendar.js'?
BREAKING CHANGE: The request './FullCalendar' 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.

I found a suggestion here to disable that in Webpack settings:

quasarframework/quasar#9103 (comment)

And this seems to resolve the error in your demo:

https://stackblitz.com/edit/quasarframework-webpack-csyqoy?file=quasar.config.js%3AL77

[puppe82]

[...] although I'm not sure it's a bug that the extensions are missing. I also see this error which sounds like the issue is with using fully specified resolution.

Basically what that fully specified means is that you cannot omit the file extension if the package.json says "type": "module" like it does for FullCalendar.

I'll leave it to you if you want to fix it or not.

Thank you for the reference when it comes to Quasar and Webpack settings. It will most probably fix the issue and is exactly the "flag or setting" I was looking for in the previous messages. Nonetheless, it's just a Webpack configuration and shouldn't have anything to do with Quasar. It's rather a workaround to get FullCalendar 6.x working with Webpack 5.

---

In .mjs files or .js files with a package.json with "type": "module" imports
need to be fully specified. This means you need to have an extension.

webpack/webpack#11467

[puppe82]

Module

Rule.resolve

resolve.fullySpecified

https://webpack.js.org/configuration/module/#resolvefullyspecified

[puppe82]

I can confirm that fullySpecified: false did indeed solve the issue.

Thank you for all the help!

[arshaw]

the proper fix is queued for release fullcalendar/fullcalendar-vue@ad69648

[arshaw]

released. see #7125 (comment)