Could not load node_modules/tslib/tslib.es6.js/tslib.es6.js when using @nuxt/apollo & @vueuse/motion/nuxt together

douwepausma commented 1 year ago

Environment

Operating System: Darwin
Node Version: v16.17.1
Nuxt Version: 3.2.2
Nitro Version: 2.2.3
Package Manager: yarn@1.22.19
Builder: vite
User Config: runtimeConfig, modules, apollo
Runtime Modules: @nuxtjs/apollo@5.0.0-alpha.5, @vueuse/motion/nuxt@2.0.0-beta.27
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/motion@2.0.0-beta.27

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 _nodemodules/@vueuse/motion/dist/nuxt.cjs & _nodemodules/@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: _'nodemodules/tslib/tslib.es6.js/tslib.es6.js'.

GamendeBrian commented 1 year ago

I'm encountering the same problem at the moment!

warflash commented 1 year ago

Ran into the same issue, the alias workaround fixed the issue for me. Not an idea solution ofc but it works

GuillaumeAmat commented 1 year ago

Same on my end, but I had to alias tslib to tslib/tslib.es6.js to workaround it.

iamandrewluca commented 1 year ago

Related issues:

BobbieGoede commented 9 months ago

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.

vueuse / motion