SyntaxError: unknown file: When using '@babel/plugin-transform-arrow-functions', it's not possible to compile super.prop in an arrow function without compiling classes.

[zhex900]

"electron": "27.0.0",

Hi,

I am having a problem using bytecodePlugin. Please see the errors below when I run npm run start

export default defineConfig({
  main: {
    build: {
      sourcemap: true, // for Sentry source map upload
      rollupOptions: {
        input: {
          index: resolve(__dirname, "src/electron/index.ts"),
        },
      },
    },
    plugins: [
      bytecodePlugin({ transformArrowFunctions: true })
    ],
  },

vite v4.5.0 building for production...
✓ 3485 modules transformed.
[vite:bytecode] unknown file: When using '@babel/plugin-transform-arrow-functions', it's not possible to compile `super.prop` in an arrow function without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration.
  44111 |     async _asyncWrite(chunk) {
  44112 |         return new Promise((resolve, reject) => {
> 44113 |             super.write(chunk, error => {
        |             ^^^^^^^^^^^
  44114 |                 if (error) {
  44115 |                     reject(error);
  44116 |                     return;
✓ 0 bundles compiled into bytecode.
✓ built in 9.22s
error during preview electron app:
SyntaxError: unknown file: When using '@babel/plugin-transform-arrow-functions', it's not possible to compile `super.prop` in an arrow function without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration.
  44111 |     async _asyncWrite(chunk) {
  44112 |         return new Promise((resolve, reject) => {
> 44113 |             super.write(chunk, error => {
        |             ^^^^^^^^^^^
  44114 |                 if (error) {
  44115 |                     reject(error);
  44116 |                     return;
    at File.buildCodeFrameError (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/core/lib/transformation/file/file.js:205:12)
    at NodePath.buildCodeFrameError (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/index.js:101:21)
    at hoistFunctionEnvironment (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/conversion.js:219:27)
    at NodePath.arrowFunctionToExpression (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/conversion.js:116:7)
    at PluginPass.ArrowFunctionExpression (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js:18:16)
    at newFn (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/visitors.js:159:14)
    at NodePath._call (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/Users/jakehe/Code/PAM/pam-app/node_modules/@babel/traverse/lib/context.js:86:16)

[alex8088]

use externalizeDepPlugin to externalize depandences. https://electron-vite.org/guide/dev.html#dependencies-vs-devdependencies

[HAIlows]

I having the same problem, but my problem is running npm run build and has been used
externalizeDepsPlugin().

export default defineConfig({
  main: {
    envPrefix: 'VITE_', 
    plugins: [bytecodePlugin(), externalizeDepsPlugin()],
    build: {
      sourcemap: false,
      minify: true,
    },
  },
  preload: {
    envPrefix: 'VITE_', 
    plugins: [bytecodePlugin(), externalizeDepsPlugin()],
    build: {
      sourcemap: false,
      minify: true,
      // rollupOptions: {
      //   input: {
      //     index: resolve(__dirname, 'src/preload/index.ts'),
      //     webview: resolve(__dirname, 'src/preload/webview.ts'),
      //   },
      // },
    },
  },
  renderer: {
    envPrefix: 'VITE_', 
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: tag => tag === 'webview',
          },
        },
      }),
    ],
    optimizeDeps: {
      include: ['ant-design-vue'],
    },
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
      },
    },
    build: {
      sourcemap: false,
      minify: true,
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'src/renderer/index.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html'),
        },
      },
    },
    server: {
      port: 44360,
    },
  },
});

[alex8088]

Install relevant modules in dependencies.

[alex8088]

No need to bundle and protect third-party modules