doesn't work with worker #23

val1984 · 2022-12-12T20:56:47Z

Describe the bug

I was trying to upgrade one of the projects I work to Vite 4.
Everything worked fine except the web worker which is served as raw Typescript to the web browser.
This work project is using ?worker&inline but I tried to make a small repro using the more recommended way (new Worker(new URL(...))) and it exhibits the same issue.

Reproduction

https://github.com/val1984/vite4-worker-ts

Steps to reproduce

pnpm i
pnpm dev
Check web browser console

What should be displayed: a log containing Worker lives!

What actually happens: an error log SyntaxError: Unexpected token ':'. Expected an opening '{' at the start of a function body. due to the : void type annotation in the worker.ts file served without being transformed.

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 84.09 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    Watchman: 2022.10.24.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 108.0.5359.98
    Edge: 108.0.1462.46
    Firefox: 105.0.3
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react-swc: ^3.0.0 => 3.0.0 
    vite: ^4.0.1 => 4.0.1

Used Package Manager

pnpm

Logs

  vite:config bundled config file loaded in 57.02ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:optimized-deps',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:react-swc',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   esbuild: false,
  vite:config   configFile: '/Users/valentin/Developer/vite4-worker-ts/vite.config.ts',
  vite:config   configFileDependencies: [ '/Users/valentin/Developer/vite4-worker-ts/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/valentin/Developer/vite4-worker-ts',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   publicDir: '/Users/valentin/Developer/vite4-worker-ts/public',
  vite:config   cacheDir: '/Users/valentin/Developer/vite4-worker-ts/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:optimized-deps',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:client-inject',
  vite:config       'vite:import-analysis'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +3ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  VITE v4.0.1  ready in 195 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 18.06ms /index.html +0ms
  vite:html-fallback Rewriting GET / to /index.html +31ms
  vite:time 1.65ms /index.html +16ms
  vite:load 0.64ms [plugin] /@react-refresh +0ms
  vite:import-analysis 0.29ms [no imports] /@react-refresh +0ms
  vite:transform 3.43ms /@react-refresh +0ms
  vite:time 7.94ms /@react-refresh +103ms
  vite:resolve 0.89ms /@vite/client -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 0.50ms /src/main.tsx -> /Users/valentin/Developer/vite4-worker-ts/src/main.tsx +4ms
  vite:load 1.12ms [fs] /src/main.tsx +11ms
  vite:load 8.19ms [fs] /@vite/client +5ms
  vite:resolve 0.46ms @vite/env -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +18ms
  vite:resolve 0.14ms /node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +1ms
  vite:import-analysis 2.42ms [1 imports rewritten] node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/client.mjs +25ms
  vite:transform 11.77ms /@vite/client +25ms
  vite:time 24.81ms /@vite/client +25ms
  vite:load 0.78ms [fs] /node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +15ms
  vite:import-analysis 0.03ms [no imports] node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +4ms
  vite:transform 1.02ms /node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +4ms
  vite:cache [304] /node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +0ms
  vite:time 0.40ms /node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/client/env.mjs +5ms
  vite:resolve 1.52ms react/jsx-dev-runtime -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +38ms
  vite:resolve 0.26ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +1ms
  vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b needs interop +35ms
  vite:resolve 1.15ms react -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react.js?v=4c84dc3b +3ms
  vite:resolve 0.09ms /node_modules/.vite/deps/react.js?v=4c84dc3b -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react.js?v=4c84dc3b +0ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=4c84dc3b needs interop +3ms
  vite:resolve 0.96ms react-dom/client -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +2ms
  vite:resolve 0.04ms /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +0ms
  vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b needs interop +2ms
  vite:resolve 3.28ms ./App -> /Users/valentin/Developer/vite4-worker-ts/src/App.tsx +4ms
  vite:resolve 0.32ms /src/App.tsx -> /Users/valentin/Developer/vite4-worker-ts/src/App.tsx +0ms
  vite:resolve 0.12ms ./index.css -> /Users/valentin/Developer/vite4-worker-ts/src/index.css +1ms
  vite:resolve 0.47ms /src/index.css -> /Users/valentin/Developer/vite4-worker-ts/src/index.css +0ms
  vite:import-analysis 14.41ms [5 imports rewritten] src/main.tsx +7ms
  vite:transform 70.73ms /src/main.tsx +50ms
  vite:time 75.07ms /src/main.tsx +49ms
  vite:optimize-deps load /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js +0ms
  vite:optimize-deps load /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react.js +1ms
  vite:optimize-deps load /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/react-dom_client.js +0ms
  vite:load 13.70ms [plugin] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +71ms
  vite:resolve 0.15ms ./chunk-FPYK6RFZ.js -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +25ms
  vite:resolve 0.03ms /node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b -> /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +0ms
  vite:import-analysis 1.18ms [1 imports rewritten] node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +23ms
  vite:transform 1.73ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +20ms
  vite:time 6.22ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +20ms
  vite:optimize-deps load /Users/valentin/Developer/vite4-worker-ts/node_modules/.vite/deps/chunk-FPYK6RFZ.js +13ms
  vite:load 16.14ms [plugin] /node_modules/.vite/deps/react.js?v=4c84dc3b +2ms
  vite:import-analysis 1.14ms [1 imports rewritten] node_modules/.vite/deps/react.js?v=4c84dc3b +2ms
  vite:transform 1.28ms /node_modules/.vite/deps/react.js?v=4c84dc3b +2ms
  vite:time 7.33ms /node_modules/.vite/deps/react.js?v=4c84dc3b +1ms
  vite:load 19.31ms [fs] /src/index.css +3ms
  vite:load 22.96ms [plugin] /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +4ms
  vite:import-analysis 7.58ms [1 imports rewritten] node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +17ms
  vite:transform 11.10ms /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +17ms
  vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +0ms
  vite:time 0.53ms /node_modules/.vite/deps/react-dom_client.js?v=4c84dc3b +22ms
  vite:load 44.31ms [fs] /src/App.tsx +21ms
  vite:load 32.56ms [plugin] /node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +4ms
  vite:import-analysis 0.46ms [no imports] node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +15ms
  vite:transform 0.95ms /node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +16ms
  vite:time 7.08ms /node_modules/.vite/deps/chunk-FPYK6RFZ.js?v=4c84dc3b +11ms
  vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b needs interop +5ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=4c84dc3b needs interop +3ms
  vite:resolve 0.11ms ./assets/react.svg -> /Users/valentin/Developer/vite4-worker-ts/src/assets/react.svg +43ms
  vite:resolve 0.06ms /src/assets/react.svg -> /Users/valentin/Developer/vite4-worker-ts/src/assets/react.svg +0ms
  vite:resolve 0.12ms ./App.css -> /Users/valentin/Developer/vite4-worker-ts/src/App.css +0ms
  vite:resolve 0.07ms /src/App.css -> /Users/valentin/Developer/vite4-worker-ts/src/App.css +0ms
  vite:hmr [self-accepts] src/App.tsx +0ms
  vite:import-analysis 7.22ms [5 imports rewritten] src/App.tsx +2ms
  vite:transform 14.55ms /src/App.tsx +9ms
  vite:time 16.48ms /src/App.tsx +10ms
  vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4c84dc3b +21ms
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=4c84dc3b +0ms
  vite:cache [memory] /@react-refresh +0ms
  vite:load 0.08ms [plugin] /src/assets/react.svg +12ms
  vite:import-analysis 0.00ms [no imports] src/assets/react.svg +1ms
  vite:transform 0.60ms /src/assets/react.svg +2ms
  vite:load 2.68ms [fs] /src/App.css +3ms
  vite:cache [304] /src/assets/react.svg +118ms
  vite:time 0.51ms /src/assets/react.svg?import +5ms
  vite:hmr [self-accepts] src/index.css +15ms
  vite:import-analysis 0.16ms [0 imports rewritten] src/index.css +14ms
  vite:transform 53.28ms /src/index.css +13ms
  vite:time 29.93ms /src/index.css +9ms
  vite:hmr [self-accepts] src/App.css +5ms
  vite:import-analysis 0.10ms [0 imports rewritten] src/App.css +4ms
  vite:transform 15.07ms /src/App.css +4ms
  vite:time 12.57ms /src/App.css +4ms
  vite:resolve 0.42ms /src/worker.ts?type=classic&worker_file -> /Users/valentin/Developer/vite4-worker-ts/src/worker.ts?type=classic&worker_file +32ms
  vite:load 0.76ms [fs] /src/worker.ts?type=classic&worker_file +28ms
  vite:import-analysis 0.01ms [no imports] src/worker.ts?type=classic&worker_file +14ms
  vite:transform 0.25ms /src/worker.ts?type=classic&worker_file +14ms
  vite:time 3.71ms /src/worker.ts?type=classic&worker_file +15ms
  vite:time 0.51ms /vite.svg +15ms
  vite:time 0.49ms /src/assets/react.svg +1ms
  vite:deps ✨ static imports crawl ended +1s
  vite:time 2.06ms /node_modules/.vite/deps/chunk-FPYK6RFZ.js.map +8s
  vite:time 4.31ms /node_modules/.vite/deps/react_jsx-dev-runtime.js.map +1ms
  vite:time 16.84ms /node_modules/.vite/deps/react-dom_client.js.map +21ms

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

sapphi-red · 2022-12-13T12:53:04Z

?worker&inline worked when I removed plugin-react-swc. So I guess this is a bug in plugin-react-swc.

About new Worker(...), when I removed plugin-react-swc, a different error happens (vitejs/vite#8470). Adding { type: 'module' } worked. But when I didn't remove plugin-react-swc, it didn't work even if I added { type: 'module' }.
So I guess there's a bug in plugin-react-swc in this case too.

val1984 · 2022-12-13T13:16:31Z

?worker&inline worked when I removed plugin-react-swc. So I guess this is a bug in plugin-react-swc.

About new Worker(...), when I removed plugin-react-swc, a different error happens (#8470). Adding { type: 'module' } worked. But when I didn't remove plugin-react-swc, it didn't work even if I added { type: 'module' }. So I guess there's a bug in plugin-react-swc in this case too.

Thank you for investigating deeper and moving the issue!
I'll try to use the existing React plug-in in the meantime.
I think I already experienced this issue with Vite 3 and the previous React SWC plug-in now that you mention it.

sapphi-red transferred this issue from vitejs/vite Dec 13, 2022

sapphi-red changed the title ~~Vite 4 does not seem to transform web workers anymore~~ doesn't work with worker Dec 13, 2022

ArnaudBarre closed this as completed in 7f22049 Dec 15, 2022

JarekToro mentioned this issue Jun 13, 2023

Using a ?sharedworker import causes early exit during build. #120

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doesn't work with worker #23

doesn't work with worker #23

val1984 commented Dec 12, 2022 •

edited

Loading

sapphi-red commented Dec 13, 2022 •

edited

Loading

val1984 commented Dec 13, 2022

doesn't work with worker #23

doesn't work with worker #23

Comments

val1984 commented Dec 12, 2022 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

sapphi-red commented Dec 13, 2022 • edited Loading

val1984 commented Dec 13, 2022

val1984 commented Dec 12, 2022 •

edited

Loading

sapphi-red commented Dec 13, 2022 •

edited

Loading