#Linked ESM package not found

31 messages · Page 1 of 1 (latest)

torn rampart
#

I am trying to import from a linked package that I've built with vite (in library mode).

When I try to run the dev script, I get:

Failed to load url /@fs/Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs (resolved id: /Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs) in /Users/david.marr/code/app/src/plugins/filters.js. Does the file exist?
I don't have type: 'module' in either the app or the package i'm trying to import. I've linked the package and verified that it is in node_modules. Not sure what the issue is... If I run the build script, the issue doesn't appear. I also am able to import this package in a fresh nuxt 3 app, so maybe there is something with linking that is the issue?

#

seems like i'm required to use .ts extension and lang="ts" in my vue files

#

well removing my old jsconfig.json seems to get past that, but now I get the same error on a vue file

frail ether
#

What files are in your package's dist folder? And how is your package's package.json file?

torn rampart
#

so in package's package.json:

  "main": "index.js",
  "module": "lib/index.mjs",
  "type": "module",

in the lib/ dir, the index.mjs file is present

#

would having a jsconfig.json file impact anything? I'm trying to narrow down why a clean nuxt3 project can import just fine, but my nuxt2->nuxt3 upgrade cannot

torn rampart
#

appears I need to add to vite config in nuxt.config.js:

vite: {
    optimizeDeps: {
      include: ['my-linked-package']
    },
}
frail ether
#

I think, for "type": "module", the "module" should point to a .js file.

#

so, something like:

{
  "type": "module",
  "main": "some/file.cjs",
  "module": "some/file.js
}

or without "tytpe": "module"

{
  "main": "some/file.js",
  "module": "some/file.mjs"
}
torn rampart
#

yeah i tried both. i think something about the package being linked was causing issues

opal pike
#

Hi, I'm facing the same problem when using npm link

While my node_modules folder does contain the dist of my vue 3 library, I get the" failed to load url" error

opal pike
torn rampart
#

Hi, I havent found a solution. I ended up starting a new monorepo and I'm moving things over 😦

opal pike
#

Ok, I might have to do that too

I'd like to have an UI overview of the changes made in the libraries through the nuxt 3 apps that use it

#

I will continue to investigate, if I find a solution I will post it here

torn rampart
#

ok thanks. I was playing around with the vite section of nuxt config.

vite: {
    optimizeDeps: {
      include: [
        'my-linked-repo',
      ]
    }
}
#

i don't know why but it seemed to get past some errors, but something with the way my external package (using vite lib mode) was built that nuxt didn't like

#

the other crappy workaround was npm pack in the external package and installing from that

frail ether
#

I faced this problem with one library I used on one project. But I ended up using a demo the library included

#

Right now, I'm building a library with the same approach: having a demo in the same library

frail ether
proud pier
#

maybe transpile it

opal pike
#

@torn rampart Adding this to my nuxt.config.ts file solve the path error :

vite: {
    server: {
      fs: {
        allow: ["path/to/dir"],
      },
    },
  },
#

You'll probably have to replace path/to/dir with something like :
Users/david.marr/code/ui-components/packages

#

Lmk if this work in your case
I'm finally using nuxt/kit and a nuxt module

torn rampart
#

Thank you @opal pike -- good work! I will give it a try today

opal pike
torn rampart
#

Cheers, that seems to have gotten past that issue. I have more problems now ,but maybe cjs related: Cannot access 'renderer$1' before initialization