motion
motion copied to clipboard
vueuse
Could not load node_modules/tslib/tslib.es6.js/tslib.es6.js when using @nuxt/apollo & @vueuse/motion/nuxt together
Environment
- Operating System:
Darwin - Node Version:
v16.17.1 - Nuxt Version:
3.2.2 - Nitro Version:
2.2.3 - Package Manager:
[email protected] - Builder:
vite - User Config:
runtimeConfig,modules,apollo - Runtime Modules:
@nuxtjs/[email protected],@vueuse/motion/[email protected] - Build Modules:
-
Reproduction
Init project
npx nuxi init <project-name> && cd <project-name>
Install Nuxt Apollo & Vueuse Motion
yarn add -D @nuxtjs/apollo@next
yarn add @vueuse/[email protected]
Setup minimal configuration in nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@nuxtjs/apollo',
'@vueuse/motion/nuxt'
],
apollo: {
clients: {
default: {
httpEndpoint: 'http://localhost:1337/graphql'
}
},
},
})
Build
yarn build
Describe the bug
The following log is the result of running yarn build with the aforementioned setup. It seems like its trying to look for the 'tslib.es6.js' file in the '/tslib.es6.js/' folder. This file and folder do not exist, however the 'tslib.es6.js' file does exist in the root of the tslib package. This error only appears when both the Motion and Apollo modules are defined in the nuxt.config.ts, when just either one is defined there's is no issue and it builds as expected.
yarn run v1.22.19
$ nuxt build
Nuxi 3.2.2 13:09:15
Nuxt 3.2.2 with Nitro 2.2.3 13:09:15
ℹ Building client... 13:09:17
vite v4.1.4 building for production...
✓ 372 modules transformed.
.nuxt/dist/client/manifest.json 2.03 kB
.nuxt/dist/client/_nuxt/error-500.aa16ed4d.css 1.95 kB │ gzip: 0.74 kB
.nuxt/dist/client/_nuxt/error-404.23f2309d.css 3.63 kB │ gzip: 1.12 kB
.nuxt/dist/client/_nuxt/entry.dd64dcb9.css 12.13 kB │ gzip: 2.49 kB
.nuxt/dist/client/_nuxt/error-component.9c1afe4c.js 1.12 kB │ gzip: 0.60 kB
.nuxt/dist/client/_nuxt/error-500.8bcccf2a.js 1.88 kB │ gzip: 0.99 kB
.nuxt/dist/client/_nuxt/error-404.39f318ce.js 5.84 kB │ gzip: 2.59 kB
.nuxt/dist/client/_nuxt/entry.814aa162.js 375.96 kB │ gzip: 111.15 kB
✔ Client built in 3242ms 13:09:20
ℹ Building server... 13:09:20
vite v4.1.4 building SSR bundle for production...
✓ 159 modules transformed.
.nuxt/dist/server/_nuxt/welcome-styles.a045e9e2.mjs 0.08 kB
.nuxt/dist/server/_nuxt/error-404-styles.a5c3f351.mjs 0.08 kB
.nuxt/dist/server/_nuxt/error-500-styles.6b5b5ff2.mjs 0.08 kB
.nuxt/dist/server/styles.mjs 0.49 kB
.nuxt/dist/server/_nuxt/island-renderer-eaf3218e.js 1.55 kB │ map: 1.62 kB
.nuxt/dist/server/_nuxt/error-component-d3a90ed9.js 2.01 kB │ map: 2.62 kB
.nuxt/dist/server/_nuxt/error-500-styles-1.mjs-0a86f27a.js 2.17 kB │ map: 0.12 kB
.nuxt/dist/server/_nuxt/error-dev-styles-1.mjs-90bc7cbc.js 2.46 kB │ map: 0.12 kB
.nuxt/dist/server/_nuxt/error-500-91914858.js 3.34 kB │ map: 3.77 kB
.nuxt/dist/server/_nuxt/error-404-styles-1.mjs-6ef6e240.js 3.86 kB │ map: 0.12 kB
.nuxt/dist/server/_nuxt/error-404-7492fe9b.js 8.42 kB │ map: 16.28 kB
.nuxt/dist/server/_nuxt/welcome-styles-1.mjs-56163e1d.js 12.38 kB │ map: 0.11 kB
.nuxt/dist/server/server.mjs 391.69 kB │ map: 994.52 kB
✔ Server built in 1954ms 13:09:22
✔ Generated public .output/public nitro 13:09:22
ℹ Building Nitro Server (preset: node-server) nitro 13:09:22
ERROR Error: Could not load /Users/douwepausma/Sites/tslib-test/node_modules/tslib/tslib.es6.js/tslib.es6.js: ENOTDIR: not a directory, open '/Users/douwepausma/Sites/tslib-test/node_modules/tslib/tslib.es6.js/tslib.es6.js' nitro 13:09:24
undefined
ERROR Could not load /Users/douwepausma/Sites/tslib-test/node_modules/tslib/tslib.es6.js/tslib.es6.js: ENOTDIR: not a directory, open '/Users/douwepausma/Sites/tslib-test/node_modules/tslib/tslib.es6.js/tslib.es6.js' 13:09:24
Additional context
I found a workaround for now, when I comment out the line nuxt.options.alias.tslib = "tslib/tslib.es6.js"; in node_modules/@vueuse/motion/dist/nuxt.cjs & node_modules/@vueuse/motion/dist/nuxt.mjs it will built correctly. However this not a particularly durable solution, so looking a little further I figured out that adding the following to the nuxt.config.ts does the trick as well.
alias: {
tslib: 'tslib'
},
It seems like '@vueuse/motion' is creating an alias and '@nuxtjs/apollo' is trying to add the file name again after that. This results in the file not being found due to the incorrect location: 'node_modules/tslib/tslib.es6.js/tslib.es6.js'.
Ran into the same issue, the alias workaround fixed the issue for me. Not an idea solution ofc but it works
Same on my end, but I had to alias tslib to tslib/tslib.es6.js to workaround it.
Related issues:
- https://github.com/nuxt/nuxt/issues/19265
- https://github.com/vueuse/motion/issues/102
- https://github.com/nuxt-modules/apollo/issues/516
I'm unable to reproduce this issue by following your reproduction steps using the latest release so I think this issue has been resolved and can be closed.
