Dependency issue with @nuxtjs/composition-api

[Ricklin90085]

I'm trying to use @vueuse/core with @nuxtjs/composition-api in my Nuxt project.
And I get a error message:

This dependency was not found:
* @vue/composition-api/dist/vue-composition-api.esm.js in ./node_modules/vue-demi/lib/index.mjs

But @vue/composition-api have been install. Because @vue/composition-api is also @nuxtjs/composition-api's dependency.
I have no idea how to fix it.

Here is reproduction link: codesandbox

Have any solution to fix this? Thank you!

[antfu]

Landed a fix, please try to upgrade the latest @vue/composition-api plugin and try again

[Ricklin90085]

@antfu thank you for reply !
I tried to upgrade the @vue/composition-api to verison 1.0.3
But it didn't work :(

Here is reproduction link: codesandbox
Are there any steps I missed or wrong?

[sibbng]

I guess that /dist/vue-composition-api.esm.js path have to be defined in @vue/composition-api's export map like how @nuxtjs/composition-api does.

[TonyPythoneer]

I guess that /dist/vue-composition-api.esm.js path have to be defined in @vue/composition-api's export map like how @nuxtjs/composition-api does.

I try to find the source code from the @nuxtjs/composition-api
https://github.com/nuxt-community/composition-api/blob/1b07abeada072da79c1f0105d73389b799f4f8e1/src/module/index.ts#L29

I guess the reason from this.

[antfu]

Yeah the dilemma is that Vue CLI only happy with full js path, while Nuxt only happy with package name only, while Nuxt 3 want to have native esm support (also it's more future proof)

/cc @sodatea I think ideally we should have it work without fullpath, which I can't figure out why Vue CLI failed to resolve it, can you take a look a bit? (if you want we could have a pair-programming session)

[antfu]

I try to find the source code from the @nuxtjs/composition-api
nuxt-community/composition-api@1b07abe/src/module/index.ts#L29

@TonyPythoneer That's useful, thanks!

/cc @danielroe or do you think we could have one more alias like (I guess the alias is overkilled by replacing the submodules)

 nuxtOptions.alias['@vue/composition-api/dist/vue-composition-api.esm.js'] = 
   this.nuxt.resolver.resolveModule(
     '@vue/composition-api/dist/vue-composition-api.esm.js'
   )

(Update: PR nuxt-community/composition-api#517 and it's working for me)

[TonyPythoneer]

I try to output the source code

(from: https://github.com/nuxt-community/composition-api/blob/1b07abeada072da79c1f0105d73389b799f4f8e1/src/module/index.ts#L29)

  nuxtOptions.alias['@vue/composition-api'] =
    nuxtOptions.alias['@vue/composition-api'] ||
    this.nuxt.resolver.resolveModule(
      '@vue/composition-api/dist/vue-composition-api.esm.js'
    )

The output is like below:

nuxtOptions.alias['@vue/composition-api'] // undefined
this.nuxt.resolver.resolveModule(
 '@vue/composition-api/dist/vue-composition-api.esm.js'
) // /home/tony/tony/bdff-mainsite/node_modules/@vue/composition-api/dist/vue-composition-api.esm.js

Maybe, we can use alias to guide the internal function of @nuxtjs/composition-api to do what we expect.

But I'm not familiar with the relationship between @vue/composition-api/dist/vue-composition-api.esm.js and ./node_modules/vue-demi/lib/index.mjs. Or, who knows the correct import definition to have a workaround?

[TonyPythoneer]

I try to find the source code from the @nuxtjs/composition-api
nuxt-community/composition-api@1b07abe/src/module/index.ts#L29

@TonyPythoneer That's useful, thanks!

/cc @danielroe or do you think we could have one more alias like (I guess the alias is overkilled by replacing the submodules)

 nuxtOptions.alias['@vue/composition-api/dist/vue-composition-api.esm.js'] = 
   this.nuxt.resolver.resolveModule(
     '@vue/composition-api/dist/vue-composition-api.esm.js'
   )

(Update: PR nuxt-community/composition-api#517 and it's working for me)

Amazing! It's worked!
Thanks @antfu !

[TonyPythoneer]

Hi @antfu @Ricklin90085

Before this PR nuxt-community/composition-api#517 gets merged, I have another workaround to this issue.
It's worked to me.

import { resolve } from 'path'
const vueCompositiobnAPIFullpath = resolve("./node_modules/@vue/composition-api/dist/vue-composition-api.esm.js");

config = {
  alias: {
    // keep default settings
    '~~': resolve(__dirname, './'),
    '@@': resolve(__dirname, './'),
    '~': resolve(__dirname, './'),
    '@': resolve(__dirname, './'),
    'assets': resolve(__dirname, './assets'), // (unless you have set a custom `dir.assets`)
    'static': resolve(__dirname, './static'), // (unless you have set a custom `dir.static`)
    // workaround
    '@vue/composition-api/dist/vue-composition-api.esm.js': vueCompositiobnAPIFullpath,
  },
}

Thanks to the @antfu 's answer, he inspires me to have this workaround.

---

So, when we have this workaround, we can enjoy @vueuse 's charm. :D

[Ricklin90085]

Hi @antfu @TonyPythoneer
I have tried both ways and both are worked!
Before the PR gets merged, I will use alias Property workaround to solve the problem.

Thanks a lot for your help. 👍👍
Can't wait to try @vueuse. :D

[danielroe]

Should be fixed in v0.25.0 ❤️ - let me know if not.

[ackushiw-flutterwave]

Hi @danielroe I hadn't experienced this issue previously, but I just updated to the latest version and my netlify deploy now fails with:

Package subpath './dist/vue-composition-api.esm.js' is not defined by "exports" in /opt/build/repo/node_modules/@vue/composition-api/package.json

It generates fine locally, and reverting to the previous version works.

[wheatjs]

@ackushiw-flutterwave try clearing the netlify cache and redeploying

[ackushiw-flutterwave]

@wheatjs I tried that, but no luck, unfortunately. I've reverted for now.

[Ricklin90085]

Hi @danielroe
In my case, it fixed!
Thanks for your help :D

[danielroe]

@ackushiw-flutterwave would you raise a new issue with some more details and I'll look into this? 🙏 I take it you probably have not customised your Node version on Netlify?

[ackushiw-flutterwave]

@danielroe That's correct, using Netlify's default setup node v12.18.0 (npm v6.14.4) and using yarn 1.22.10.

Should I create the new issue here?
https://github.com/nuxt-community/composition-api/issues

[danielroe]

@ackushiw-flutterwave Yes, thank you 😊

[Kematia]

If you're on Netlify try adding a .nvmrc file with your desired node version, this fixed it for me!

[ackushiw-flutterwave]

@Kematia Thanks, that worked!

[DavidVaness]

@Kematia thanks, that worked for me too

[PeteJStewart]

I also had this issue when running in CircleCI.
In my case I am also using the Cypress Orb, which uses node 12 by default.

I therefore needed to update the node version during the post-install command and also run the build process there, rather than via the cypress orb build command.

Ended up like so:

- cypress/install:
    post-install:
      - run:
          name: "Update node version & Build Nuxt"
          command: |
            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
            nvm install v16
            nvm alias default 16.14.2
            npm run build