Initialize vue plugin Error

[NONAME00X]

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import path from 'path' import { compilerOptions, transformAssetUrls } from 'vue3-pixi' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue({ template: { // support for custom elements and remove the unknown element warnings compilerOptions, // support for asset url conversion transformAssetUrls, }, }), AutoImport({ imports: [ 'vue', { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar' ], }, ] }), Components({ resolvers: [NaiveUiResolver()] })], server: { open: true, }, resolve: { alias: { '@': path.resolve(__dirname, 'src') } } })

After adding Vue plugin configuration to support custom elements, prevent parsing exceptions, and support parsing the texture attribute, just like the src attribute of an img. It shows: failed to load config from C:\Users\NONAME\Desktop\Vue\apexKvmWeb\vite.config.ts error when starting dev server: ReferenceError: Worker is not defined at file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/@pixi/assets/lib/_virtual/checkImageBitmap.worker.mjs:20:30 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) at async loadConfigFromBundledFile (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68383:21) at async loadConfigFromFile (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68240:28) at async resolveConfig (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67841:28) at async _createServer (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:60327:20) at async CAC. (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/cli.js:764:24)

[pearlphoenix0106]

similar situation

[hairyf]

Can you provide versions such as Vue and pixi.js ? @NONAME00X

[NONAME00X]

Can you provide versions such as Vue and pixi.js ? @NONAME00X All my dependencies below

"pixi.js": "^7.4.0",
"screenfull": "^6.0.2",
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11",
"vue3-pixi": "^0.9.0"

[pearlphoenix0106]

@hairyf my current versions:

vue3-pixi: ^0.9.0
pixi.js: ^7.4.0
vue: ^3.3.4
vite: ^4.4.5
node: 20.11.0

If I use vue3-pixi: 0.8.4 and pixi.js: 7.3.2, then yarn dev works fine

[eduard-gonzalez]

I have the same situation with Node 20.11.0 || 18.19.0

"pinia": "^2.1.4", "pixi.js": "^7.4.0", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue3-pixi": "^0.9.0"

failed to load config from \vite.config.js error when starting dev server: ReferenceError: Worker is not defined

[eduard-gonzalez]

@hairyf See that https://github.com/pixijs/pixijs/issues/10170

pixi.js does not run natively in Node.js, it's browser only. If you need to run in Node.js, you can use this project: https://github.com/pixijs/node

because when you try to compile the npm run dev it does not recognize it

[senritsu]

@hairyf This seems to be a side-effect of how the docs for vue3-pixi import the functions used for vite.config.ts. Apparently too much of pixi is imported in the vite config, vite tries to compile it in node, and it crashes.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { isCustomElement, transformAssetUrls } from "vue3-pixi"; // <-- this right here

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement,
        },
        transformAssetUrls,
      },
    }),
  ],
});

Without that import from vue3-pixi the dev server (or build) starts, but with it, the ReferenceError appears.

[senritsu]

Heads up for others with this issue, it seems like just using

import { isCustomElement, transformAssetUrls } from "vue3-pixi/compiler" // <-- note the `/compiler` here

does the job.

[hairyf]

@senritsu Thank, I will merge him