Comments (22)
If you're on Netlify try adding a .nvmrc
file with your desired node version, this fixed it for me!
from vue-demi.
Landed a fix, please try to upgrade the latest @vue/composition-api plugin and try again
from vue-demi.
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
from vue-demi.
I try to output the source code
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?
from vue-demi.
Should be fixed in v0.25.0 ❤️ - let me know if not.
from vue-demi.
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)
from vue-demi.
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.
from vue-demi.
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.
from vue-demi.
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.
from vue-demi.
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)
from vue-demi.
@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?
from vue-demi.
@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?
from vue-demi.
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 !
from vue-demi.
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
from vue-demi.
@ackushiw-flutterwave try clearing the netlify cache and redeploying
from vue-demi.
@wheatjs I tried that, but no luck, unfortunately. I've reverted for now.
from vue-demi.
Hi @danielroe
In my case, it fixed!
Thanks for your help :D
from vue-demi.
@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
from vue-demi.
@ackushiw-flutterwave Yes, thank you 😊
from vue-demi.
@Kematia Thanks, that worked!
from vue-demi.
@Kematia thanks, that worked for me too
from vue-demi.
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
from vue-demi.
Related Issues (20)
- Vue 2.6: Error "VueCompositionAPI.getCurrentInstance is not a function" in hasInjectionContext() HOT 1
- Pinia2.1.3 + vue3.3.4 does not work: hasInjectionContext is not defined HOT 6
- about 2.7 exports Vue.util.warn HOT 2
- Remove peerDependencies
- Can't use Vue 2 library in Vue 3 HOT 1
- The requested module 'vue-demi' does not provide an export named 'computed' HOT 3
- Packaged a custom hook with rollup, ref did not unpack it automatically in the template HOT 2
- vue3.3 + ts, when v-for the computed array, the item type reference error
- Uses the wrong vue version in monorepo HOT 4
- How we resolve dependency issue for ? HOT 1
- v0.14.5 recently overwritten? and v0.14.6 does not work... HOT 11
- vue-demi-fix is missing HOT 5
- 这个文件前边都是es5语法,最后加的这一行箭头函数让我们构建时不得不对vue-demi单独加一条适配规则 HOT 1
- `postinstall` script doesn't play well with `pnpm` on Windows HOT 8
- vue.use 和 vue.default.use问题导致报错 HOT 1
- [HELP] The requested module '/node_modules/.vite/deps/vue.js?v=3af26c34' does not provide an export named 'Fragment'
- Reactivity loss when using with @vue/compat HOT 1
- TypeScript got incorrect vue version with pnpm workspace HOT 1
- Refactor with typescript ?
- Bun install segfault in Docker
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-demi.