shershen08 / vue-masonry

πŸ’  Vue.js directive for masonry blocks layouting βœ…
MIT License
677 stars 81 forks source link

nextTick is not available when building with Rollup #114

Closed lahdekorpi closed 2 years ago

lahdekorpi commented 3 years ago

Rollup build fails due to nextTick missing.

➜  masonry git:(master) βœ— npm run build

> masonry@0.0.0 build
> vue-tsc --noEmit && vite build

vite v2.2.4 building for production...
βœ“ 91 modules transformed.
'nextTick' is not exported by node_modules/vue-masonry/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/vue-masonry/src/masonry-vue3.plugin.js
file: /Users/toni/Documents/Omat/masonry/node_modules/vue-masonry/src/masonry-vue3.plugin.js:5:9
3:
4: // Vue 3 Global API changed: nextTick import
5: import { nextTick } from 'vue';
            ^
6:
7: const attributesMap = {
error during build:
Error: 'nextTick' is not exported by node_modules/vue-masonry/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/vue-masonry/src/masonry-vue3.plugin.js
    at error (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:5309:30)
    at Module.error (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:9765:16)
    at Module.traceVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:10151:29)
    at ModuleScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:8905:39)
    at ChildScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
    at ClassBodyScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
    at FunctionScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
    at ChildScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
    at FunctionScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
    at ChildScope.findVariable (/Users/toni/Documents/Omat/masonry/node_modules/rollup/dist/shared/rollup.js:2636:38)
β”œβ”€β”€ @vitejs/plugin-vue@1.2.2
β”œβ”€β”€ @vue/compiler-sfc@3.0.11
β”œβ”€β”€ autoprefixer@10.2.5
β”œβ”€β”€ axios@0.21.1
β”œβ”€β”€ mitt@2.1.0
β”œβ”€β”€ postcss@8.2.14
β”œβ”€β”€ typescript@4.2.4
β”œβ”€β”€ vite@2.2.4
β”œβ”€β”€ vue-class-component@8.0.0-rc.1
β”œβ”€β”€ vue-masonry@0.13.0
β”œβ”€β”€ vue-router@4.0.6
β”œβ”€β”€ vue-tsc@0.1.2
β”œβ”€β”€ vue@3.0.11
└── vuex@4.0.0
lahdekorpi commented 3 years ago

Oddly enough, with Vite, everything works perfectly when running just the dev server.

lahdekorpi commented 3 years ago

When commenting out the nextTick import and its use, the build goes through. But the missing redraw will probably cause some issues?

7architect commented 3 years ago

i have a similar problem with Vite and Vue 3. I tried to build with npm, yarn, pnpm and have a problem with nextTick import

image

Text logs ``` ➜ pnpm build > dbuff-vite@0.0.0 build /home/alexander/code/dbuff-vite > vite build vite v2.2.4 building for production... transforming (94) node_modules/.pnpm/@iconicicons+vue3@1.1.1_vue@3.0.11/node_modules/@iconicicons/vue3/icons/esm/ArrowDownLeftIcon.js warn - You have enabled the JIT engine which is currently in preview. warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. βœ“ 368 modules transformed. 'nextTick' is not exported by node_modules/.pnpm/vue@2.6.12/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/.pnpm/vue-masonry@0.13.0/node_modules/vue -masonry/src/masonry-vue3.plugin.js file: /home/alexander/code/dbuff-vite/node_modules/.pnpm/vue-masonry@0.13.0/node_modules/vue-masonry/src/masonry-vue3.plugin.js:5:9 3: 4: // Vue 3 Global API changed: nextTick import 5: import { nextTick } from 'vue'; ^ 6: 7: const attributesMap = { error during build: Error: 'nextTick' is not exported by node_modules/.pnpm/vue@2.6.12/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/.pnpm/vue-masonry@0.13.0/node_modu les/vue-masonry/src/masonry-vue3.plugin.js at error (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:5309:30) at Module.error (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:9765:16) at Module.traceVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:10151:29) at ModuleScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:8905:39) at ChildScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38) at ClassBodyScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38) at FunctionScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38) at ChildScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38) at FunctionScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38) at ChildScope.findVariable (/home/alexander/code/dbuff-vite/node_modules/.pnpm/rollup@2.47.0/node_modules/rollup/dist/shared/rollup.js:2636:38)  ERROR  Command failed with exit code 1. ```
roberttolton commented 3 years ago

@7architect Your logs say you're trying to import nextTick from vue@2.6.12..?

iancallahan commented 3 years ago

I am running into the same issue with Vite, Vue 3 and Rollup. Works fine with Vite dev and when I use the component elsewhere via Webpack. But Vite build yields the same issues as above.

iancallahan commented 3 years ago

I was able to get this to work with Rollup by forking it and simply updating the Vue version to ^3 and rebuilding.

jljse commented 3 years ago

I use vite + vue3 and have same trouble. When I renamed node_modules/vue-masonry/node_modules folder, then it seems work. Is this folder required?

xvaara commented 3 years ago

this is because "vue": "^2.0.0" in depencies.

so vue2 is installed in this packages node_modules and imported there.

@shershen08 you could install vue-demi and import from therei if you want to support two vue versions. And update depencies to "vue": "^2.0.0 || ^3.2.0"

shershen08 commented 2 years ago

i've created a0.14.0-beta.0 version to test v2/v3 works smoothly please try to install and have a look

src/masonry-vue3.plugin.js is still there for compatibility, will be removed in final version0.14.0

118

lahdekorpi commented 2 years ago

0.14.0-beta.0 Works perfectly. πŸŽ‰ Thank you!

shershen08 commented 2 years ago

released 0.14.0 - https://github.com/shershen08/vue-masonry/releases/tag/0.14.0

https://www.npmjs.com/package/vue-masonry/v/0.14.0