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

douwepausma · 2023-02-24T12:26:24Z

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

No response

Logs

No response

The text was updated successfully, but these errors were encountered:

douwepausma · 2023-02-24T14:57:08Z

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

danielroe · 2023-02-27T12:34:28Z

Would you raise an issue in https://github.com/vueuse/motion? 🙏 I don't think this is a Nuxt framework issue.

ssyberg · 2023-06-12T17:33:53Z

I'm having this same issue, except it doesn't happen until I run the dist server and try a request and the tslib config hack does not work for me:

modules: ['@nuxtjs/apollo', '@vueuse/nuxt'],

NODE_ENV=production HOST=localhost PORT=8080 node .output/server/index.mjs
Listening http://[::1]:8080
[nuxt] [request error] [unhandled] [500] Cannot find module '****/.output/server/node_modules/tslib/modules/index.js' imported from ********/.output/server/chunks/app/server.mjs
Did you mean to import tslib/tslib.js?
  at new NodeError (node:internal/errors:399:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:326:11)  
  at moduleResolve (node:internal/modules/esm/resolve:945:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1153:11)  
  at nextResolve (node:internal/modules/esm/loader:163:28)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)  
  at link (node:internal/modules/esm/module_job:76:36)

GuillaumeAmat · 2023-06-16T08:24:49Z

For the record, I just had the same issue as @ssyberg, fixed by aliasing tslib to tslib/tslib.es6.js as well...

ssyberg · 2023-06-16T13:06:58Z

That didn't work for me, the only thing that worked was simply downgrading to tslib 2.5.1

iamandrewluca · 2023-07-12T11:18:13Z

I recommend using solution with transpile mentioned below #19265 (comment)

My problem is somehow related to this. And my workaround is different because I get the error at runtime. Had to patch tslib exports after build by adding the postbuild script. No aliases in nuxt.config. Solutions proposed above did not work.

Also pinned the tslib to fixed v2.6.0 so I don't get any problems in the future

{
	"scripts": {
		"build": "nuxt build",
		"// postbuild": "https://github.com/nuxt/nuxt/issues/19265",
		"postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"
	}
}

iamandrewluca · 2023-07-12T11:27:37Z

Related issues:

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

rankjie · 2023-07-22T11:15:02Z

I'm getting tslib import error in runtime as well, but only for a specific page.

Cannot find module '/server/node_modules/tslib/modules/index.js' imported from /server/chunks/app/_nuxt/somepage-ca7f079c.mjs

Nuxt 3.6.3 and 3.6.5 both have this issue. Not sure which version introduced this issue; I will have to look into previous builds to find out.

The error happens on our Node server and Vercel, but Cloudflare Pages works fine.

liunnn1994 · 2023-09-01T02:09:48Z

In my project (Nuxt ^3.7.0 just add vueuse), all I need to do is add the following content to the nuxt.config.ts file:

build: {
    transpile: ['tslib']
}

Similarly, the above solution is equally effective:

"postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"

wohui · 2023-09-04T04:44:38Z

@liunnn1994 多谢念大佬，我解决了，本地运行没问题，在vercel上就有问题nuxt.config.ts上配置上就ok了
build: {
transpile: ['tslib']
}

ChamperNet · 2023-10-25T11:15:42Z

Had the same issue in my project (Nuxt 3.7.1 with modules vueuse and apollo).

That's worked for me. Thank you @iamandrewluca, @liunnn1994

build: {
transpile: ['tslib']
}

curlydoodle · 2024-01-09T23:41:45Z

had the issue after upgrading to 3.9.0

Closes WorldWideTelescope#73. As per nuxt/nuxt#19265, this seems to fix the production server.

douwepausma added 3.x pending triage labels Feb 24, 2023

danielroe closed this as not planned Won't fix, can't repro, duplicate, stale Feb 27, 2023

richardkenneth mentioned this issue May 7, 2023

Issue when building (with yarn) vueuse/motion#117

Closed

This was referenced Jul 12, 2023

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

Closed

build with nuxt3 not find tslib nuxt-modules/apollo#516

Open

shashkovdanil mentioned this issue Dec 3, 2023

SSR Experimental kodadot/nft-gallery#8356

Closed

16 tasks

pkgw mentioned this issue Mar 18, 2024

Deployment error with latest build WorldWideTelescope/wwt-constellations-frontend#73

Closed

pkgw added a commit to pkgw/wwt-constellations-frontend that referenced this issue Mar 18, 2024

nuxt.config.ts: add tslib to the transpile list

68eb3be

Closes WorldWideTelescope#73. As per nuxt/nuxt#19265, this seems to fix the production server.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

douwepausma commented Feb 24, 2023 •

edited

douwepausma commented Feb 24, 2023

danielroe commented Feb 27, 2023

ssyberg commented Jun 12, 2023 •

edited

GuillaumeAmat commented Jun 16, 2023

ssyberg commented Jun 16, 2023

iamandrewluca commented Jul 12, 2023 •

edited

iamandrewluca commented Jul 12, 2023

rankjie commented Jul 22, 2023

liunnn1994 commented Sep 1, 2023

wohui commented Sep 4, 2023

ChamperNet commented Oct 25, 2023

curlydoodle commented Jan 9, 2024

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

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

Comments

douwepausma commented Feb 24, 2023 • edited

Environment

Reproduction

Describe the bug

Additional context

Logs

douwepausma commented Feb 24, 2023

danielroe commented Feb 27, 2023

ssyberg commented Jun 12, 2023 • edited

GuillaumeAmat commented Jun 16, 2023

ssyberg commented Jun 16, 2023

iamandrewluca commented Jul 12, 2023 • edited

iamandrewluca commented Jul 12, 2023

rankjie commented Jul 22, 2023

liunnn1994 commented Sep 1, 2023

wohui commented Sep 4, 2023

ChamperNet commented Oct 25, 2023

curlydoodle commented Jan 9, 2024

douwepausma commented Feb 24, 2023 •

edited

ssyberg commented Jun 12, 2023 •

edited

iamandrewluca commented Jul 12, 2023 •

edited