Nuxt3 site broken (Cannot find package 'tslib') after adding @azure/ai-form-recognizer

Support
,
1

site: cheerful-taffy-0e7fae
framework: Nuxt3

Hi, my site is broken after deploying a recent change (which I tested extensively in my local environment) to netlify. There are a couple of changes I think might be relevant

  • I added a new dependency to talk to azure document intelligence… “@azure/ai-form-recognizer”: “^5.0.0”
    tslib is a transitive dependency of @azure/ai-form-recognizer…I get this on my local setup…
npm list tslib
myapp_web@0.0.2 /Users/me/Workspace/folder/myapp_web
└─┬ @azure/ai-form-recognizer@5.0.0
  ├─┬ @azure/abort-controller@1.1.0
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-auth@1.5.0
  │ ├─┬ @azure/core-util@1.6.1
  │ │ └── tslib@2.6.2 deduped
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-client@1.7.3
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-lro@2.5.4
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-paging@1.5.0
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-rest-pipeline@1.12.2
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/core-tracing@1.0.1
  │ └── tslib@2.6.2 deduped
  ├─┬ @azure/logger@1.0.4
  │ └── tslib@2.6.2 deduped
  └── tslib@2.6.2
  • I had to add some rubbish to my tsconfig.json to make my prisma seeding thing work…
  "compilerOptions": {
    "types": ["node"]
  }

The build/deploy succeeds without any obvious error but when I access the site, this is the error I am now getting in the function logs…

Dec 10, 11:04:47 PM: 35d00016 ERROR  [nuxt] [request error] [unhandled] [500] Cannot find package 'tslib' imported from /var/task/.netlify/functions-internal/server/chunks/app/server.mjs
  at new NodeError (node:internal/errors:405:5)  
  at packageResolve (node:internal/modules/esm/resolve:895:9)  
  at moduleResolve (node:internal/modules/esm/resolve:988:20)  
  at moduleResolveWithNodePath (node:internal/modules/esm/resolve:939:12)  
  at defaultResolve (node:internal/modules/esm/resolve:1181:79)  
  at nextResolve (node:internal/modules/esm/loader:163:28)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:835: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)
2

Sounds like something you need to debug then?

But here might be a related thread: Error 500 this page is temporarily unavailable - #8 by Kabu1

3

thanks for responding @hrishikesh . the linked issue isn’t super helpful, tslib is a transitive dependency so I would need to downgrade the azure package which I was not keen on.

In the end, I figured out it was an idiosyncrasy in the exports for the tslib package. I don’t fully understand it but I fixed it. For the record…

Debugging

alter nuxt.config.ts to explicitly specify a netlify preset for the nitro build (this is not normally necessary but I needed to replicate the netlify build on local)…

  nitro: {
    preset: 'netlify'
  }

build local…

npm run build

go to .netlify/functions-internal/server and run

node chunks/app/server.mjs

This won’t actually run the server but it should process the imports. Instead gives an error message similar to my post above. Basically the bundled version of tslib could not be properly imported by the server fragment…

.netlify/functions-internal/server/chunks/app/server.mjs

//...a bunch of imports
import * as tslib from 'tslib';
//... a bunch more other imports

because only the tslib.es6.mjs file was present in the bundled tslib folder (along with the package.json)

A bunch of guys smarter than me are arguing about the right way to do the exports for tslib here… (link). I didn’t totally understand what was going on but the following hack worked for me…

After trying a bunch of different things that didn’t work, I found this worked.

  1. Added an explicit import for tslib
    “tslib”: “^2.6.2”,

  2. added a fix (hack) script in my repo
    build_scripts/fix_tslib_node.mjs

import fs from 'fs'
try {
  const filePath = "node_modules/tslib/package.json"
  fs.writeFileSync(filePath, fs.readFileSync(filePath, 'utf8').replace(
    `"node": "./modules/index.js",`,
    `"node": "./tslib.es6.mjs",`
  ))
  console.log("node setting for tslib fixed (hacked)")
} catch (err) {
  console.error("error: fixing node setting for tslib", err)
}
  1. changed Build and Deployment → Continuous Deployment → Build Settings → Build command
    node build_scripts/fix_tslib_node.mjs && npm run build

I raised a ticket also against the azure package for your ref @azure/ai-form-recognizer breaks Nuxt3 on netlify (Cannot find package 'tslib') · Issue #28028 · Azure/azure-sdk-for-js · GitHub

4

Hi :wave:t6: thanks for writing back in and sharing your solution with the community!