bug: Cannot find module dist/vue-component-lib/utils in Nuxt 3

[borisdiakur]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.19.3

Stencil Framework Output Target

Vue

Stencil Framework Output Target Version

0.6.2

Current Behavior

In Nuxt 3 I get the following error when using the vue output target:

[nuxt] [request error] [unhandled] [500] Cannot find module '/Users/boris/workspace/work/liquid/liquid-sandbox-nuxt-tailwind/.output/server/node_modules/@emdgroup-liquid/liquid/dist/vue-component-lib/utils' imported from /Users/boris/workspace/work/liquid/liquid-sandbox-nuxt-tailwind/.output/server/node_modules/@emdgroup-liquid/liquid/dist/vue.js

The issue can be fixed by adding the .js file extension to the utils import statement within the vue.js file:

// fails
import { defineContainer } from './vue-component-lib/utils';

// works
import { defineContainer } from './vue-component-lib/utils.js';

Expected Behavior

I don't get a 500 from Nuxt.

Steps to Reproduce

You can reproduce the issue by doing the following:

1. git clone -b issue/esm_path https://github.com/emdgroup-liquid/liquid-sandbox-nuxt-tailwind.git
2. Run npm install && npm run build && npm run preview
3. Open http://localhost:3000 in your browser and check the Nuxt log in your terminal

Code Reproduction URL

https://github.com/emdgroup-liquid/liquid-sandbox-nuxt-tailwind

Additional Information

This may be related to nuxt/nuxt#14597

Also, please note that the code reproduction URL already includes a patch (using patch-package) that is applied automatically in the postinstall script, so please follow the steps listed above to make sure you disable the patch in order to reproduce the error.

Thanks a lot! 🤓

[borisdiakur]

Looks like this is not only related to the Vue output target. A consumer of our React library is also affected (see related issue above ☝️). I have asked for more information on their setup. The error message however is a little more informative:

ERROR in ./node_modules/@emdgroup-liquid/liquid/dist/react.js 6:0-61
Module not found: Error: Can't resolve './react-component-lib' in 'C:\Users-\WebstormProjects-\node_modules@emdgroup-liquid\liquid\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request './react-component-lib' 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.

Looks like the error message is generated by Webpack.

I have created a pull request to address this issue. 🚀

[rayboschbr]

Is there any progress on this? My team was working hard to get our design system ready and now that we are trying to run on an actual react project, I'm getting this exact same problem.

Module not found: Error: Can't resolve '@bosch-web-dds/spark-ui/loader' in 'C:\repos\non-project\spark-tester\pkgs\spark-ui-react'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@bosch-web-dds/spark-ui/loader' 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 would really appreciate any updates on this.