Error Loading in vite.config.js

[robhicks]

I'm using @sveltejs/kit 1.0.0-next.520, vite 3.1.8 and have installed this package as: "@vite-pwa/sveltekit": "github:vite-pwa/sveltekit".

When running dev or build, I get the following error:

[ERROR] [plugin externalize-deps] Failed to resolve entry for package "@vite-pwa/sveltekit". The package may have incorrect main/module/exports specified in its package.json.

    node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:1327:27:
      1327 │         let result = await callback({
           ╵                            ^

    at packageEntryFailure (file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34841:11)
    at resolvePackageEntry (file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34838:5)
    at tryNodeResolve (file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34584:20)
    at file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63472:44
    at requestCallbacks.on-resolve (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:1327:28)
    at handleRequest (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:697:19)
    at handleIncomingPacket (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:719:7)
    at Socket.readFromStdout (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:1251:20:
      1251 │       let promise = setup({
           ╵                     ^

    at setup (file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63465:27)
    at handlePlugins (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:1251:21)
    at buildOrServeImpl (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:942:5)
    at Object.buildOrServe (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:750:5)
    at /home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:2085:17
    at new Promise (<anonymous>)
    at Object.build (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:2084:14)
    at build (/home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/esbuild@0.15.12/node_modules/esbuild/lib/main.js:1931:51)
    at bundleConfigFile (file:///home/robhicks/dev/savvagent/budget-kit/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63432:26)

  The plugin "externalize-deps" was triggered by this import

    vite.config.js:4:29:
      4 │ import { SvelteKitPWA } from '@vite-pwa/sveltekit'
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

My vite.config.js file looks like this:

import { resolve } from 'path'
import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

const config = {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      devOptions: { enabled: false },
      includeAssets: ['favicon.png', 'apple-touch-icon-180x180.png', 'mask-icon.svg'],
      manifest: {
        background_color: '#FFFFFF',
        name: 'Savvagent Budgets',
        short_name: 'Budgets',
        theme_color: '#FFFFFF',
        icons: [
          { src: 'logo-192.png', sizes: '192x192', type: 'image/png' },
          { src: 'logo-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }
        ]
      },
      registerType: 'autoUpdate'
    })
  ],
  resolve: {
    alias: {
      $components: resolve('src', 'components'),
      $stores: resolve('src', 'stores'),
      $utils: resolve('src', 'utils'),
    }
  }
};

export default config;

[alensiljak]

I'm getting the same with the very basic vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

const config: UserConfig = {
    plugins: [sveltekit(), 
        SvelteKitPWA()
    ]
};

export default config;

[alensiljak]

And the reason is that there is no library in the module folder:

[alensiljak]

And, of course, the reason for that is that there is no dist folder, which is specified in the package.json. I guess the package needs to be built locally first?

Edit: SvelteKitPWA is defined in index.ts.

[alensiljak]

The workaround:

• clone this repository locally
• npm i + npm run build
• in your project npm i -D <path to the cloned folder>
• profit

The build command now generates the service worker (and workbox) before writing the output to the build directory:

[userquin]

released v0.0.1