Closed vDk3 closed 1 year ago
matteobruni
commented
1 year ago Related issue: https://github.com/nuxt/nuxt/issues/9221#issuecomment-830012118
You need to add tsparticles-engine and other tsparticles imported libraries in your nuxt.config.js build section in the transpile property, like this:
vDk3
commented
1 year ago Thanks for your response, after adding build transpile it now say "File was processed with these loaders" but still get few errors (i also tried to add tsparticles-plugin-emitters, tsparticles-move-base to transpile but still no luck)
ERROR in ./node_modules/tsparticles-plugin-emitters/cjs/EmitterInstance.js 109:22
Module parse failed: Unexpected token (109:22)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| this._startParticlesAdded = false;
| let particlesOptions = (0, tsparticles_engine_1.deepExtend)({}, this.options.particles);
> particlesOptions ??= {};
| particlesOptions.move ??= {};
| particlesOptions.move.direction ??= this.options.direction;
@ ./node_modules/tsparticles-plugin-emitters/cjs/Emitters.js 9:26-54
@ ./node_modules/tsparticles-plugin-emitters/cjs/index.js
@ ./node_modules/tsparticles/cjs/index.js
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js
ERROR in ./node_modules/tsparticles-engine/cjs/Core/Utils/FrameManager.js 25:31
Module parse failed: Unexpected token (25:31)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| return;
| }
> container.lastFrameTime ??= timestamp;
| const delta = initDelta(timestamp - container.lastFrameTime, container.fpsLimit, container.smooth);
| container.addLifeTime(delta.value);
@ ./node_modules/tsparticles-engine/cjs/Core/Container.js 23:23-54
@ ./node_modules/tsparticles-engine/cjs/Core/Loader.js
@ ./node_modules/tsparticles-engine/cjs/engine.js
@ ./node_modules/tsparticles-engine/cjs/index.js
@ ./node_modules/tsparticles-plugin-emitters/cjs/index.js
@ ./node_modules/tsparticles/cjs/index.js
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js
ERROR in ./node_modules/tsparticles-move-base/cjs/BaseMover.js 64:46
Module parse failed: Unexpected token (64:46)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| pxRatio = container.retina.pixelRatio,
| slowFactor = (0, Utils_1.getProximitySpeedFactor)(particle),
> baseSpeed = (particle.retina.moveSpeed ??= (0, tsparticles_engine_1.getRangeValue)(moveOptions.speed) * pxRatio) * container.retina.reduceFactor,
| moveDrift = particle.retina.moveDrift ??= (0, tsparticles_engine_1.getRangeValue)(particle.options.move.drift) * pxRatio,
| maxSize = (0, tsparticles_engine_1.getRangeMax)(particleOptions.size.value) * pxRatio,
@ ./node_modules/tsparticles-move-base/cjs/index.js 7:20-42
@ ./node_modules/tsparticles-slim/cjs/index.js
@ ./node_modules/tsparticles/cjs/index.js
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.jsTry adding these packages too:
vDk3
commented
1 year ago That didn't help, i just checked sample app and noticed that you added
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
// Target: https://go.nuxtjs.dev/config-target
target: "static",However, I am using ssr and target is server (these are also the default values in nuxt) and then I get these errors that I have posted above.
matteobruni
commented
1 year ago Have you created the Nuxt plugin file?
You need to add it to your Nuxt config like this:
and it MUST be "client", it can't work server side.
You can see the sample plugin here:
In my app I didn't use SSR since I don't need it for a test application, but since the plugin must be installed as a client one it shouldn't matter.
vDk3
commented
1 year ago Yes i did that, just change ssr to true and target to server and try to build your test app, it throw errors.
import { loadFull } from "tsparticles"this import causes these build errors since its always imported in server side too.
matteobruni
commented
1 year ago vDk3
commented
1 year ago Yeah it works this way:
async particlesInit(engine) {
if (process.client) {
const { loadFull } = await import("tsparticles")
await loadFull(engine)
}
},
tsparticles is broken after upgrading to nuxt 2.17 (I also created fresh nuxt app and got same error).
console output for build: