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

[douwepausma]

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 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'.

[GamendeBrian]

I'm encountering the same problem at the moment!

[warflash]

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

[GuillaumeAmat]

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

[iamandrewluca]

Related issues:

• Could not load node_modules/tslib/tslib.es6.js/tslib.es6.js when using @nuxt/apollo & @vueuse/motion/nuxt together nuxt/nuxt#19265
• Could not load node_modules/tslib/tslib.es6.js/tslib.es6.js when using @nuxt/apollo & @vueuse/motion/nuxt together #102
• build with nuxt3 not find tslib nuxt-modules/apollo#516

[BobbieGoede]

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.