Uncaught SyntaxError: Unexpected token 'export' (at entry.worker.js:5666:1)

[kayluhb]

Hello!

I'm trying to implement remix-pwa and I'm having an issue with the browser loading the entry.worker.js

Uncaught SyntaxError: Unexpected token 'export' (at entry.worker.js:5666:1)
(index):39 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/entry.worker.js'): ServiceWorker script evaluation failed

versions:

"@remix-pwa/dev": "^3.0.5",
"@remix-pwa/worker-runtime": "^2.1.2",
"@remix-run/react": "^2.8.0",
"@remix-run/server-runtime": "^2.8.0",

my vite config looks like this

import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {remixPWA} from '@remix-pwa/dev';
import {vitePlugin as remix} from '@remix-run/dev';
import commonjs from 'vite-plugin-commonjs';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    commonjs({
      filter(id: string) {
        // `node_modules` is exclude by default, so we need to include it explicitly
        // https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.10.1/src/index.ts#L143
        if (
          id.includes('node_modules/@sanity/image-url') ||
          id.includes('node_modules/lodash.debounce')
        ) {
          return true;
        }
      },
    }),
    remix({
      presets: [hydrogen.preset()],
      ignoredRouteFiles: ['**/.*', '**/*.test.*', '**/styleguide.tsx'],
      future: {
        v3_fetcherPersist: false,
        v3_relativeSplatPath: false,
        v3_throwAbortReason: false,
      },
    }),
    tsconfigPaths(),
    remixPWA(),
  ],
  optimizeDeps: {
    include: ['clsx', 'lodash.debounce', '@sanity/image-url'],
  },
});

Any ideas on what might be wrong w/ my config?

[ShafSpecs]

What does your entry worker look like?

[ShafSpecs]

The built service worker is meant to be a standalone js file, meaning no exports. But somehow, your entry.worker file gets built with export still present

[kayluhb]

The entry worker looks like this

https://gist.github.com/kayluhb/d2e1d0cac8b99d53af45339aa52972e2

[userquin]

@ShafSpecs I had similar problem, check vite-pwa/vite-plugin-pwa#629

[ShafSpecs]

Thanks! Would try and replicate it here as well 👍

[ShafSpecs]

@ShafSpecs I had similar problem, check vite-pwa/vite-plugin-pwa#629

@userquin Would building into mjs format, then simply renaming to js fix the export issue though? Or do I transform whilst renaming? Looking at his built worker, it's built in a completely different format for some reason:

var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_entry_worker = __commonJS({
  // ...
});
export default require_entry_worker();

Instead of as a script

[userquin]

Rename the js file to mjs (change the rollup input to the mjs file) before Vite build call, then rename it back to the original (don't forget to change also sourcemap file and reference in the js file): the problem is about using esbuild in Vite minify option (the default): check Vite issue vitejs/vite#15379 (comment)

You can try switching Vite minify option to terser (will require adding the dependency).