Error when running `npm run dev` on newly created extension project

[rluiten]

I created a brand new project just now using command. npm init @samrum/vite-plugin-web-extension@latest

Selected V2+3 manifest. Selected React Selected Typescript

When I run npm run dev i get an error.

  vite v2.9.5 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 329ms.

✘ [ERROR] Could not resolve "/@vite/client"

    node_modules/@samrum/vite-plugin-web-extension/client.js:2:42:
      2 │   const { addStyleTarget } = await import("/@vite/client");
        ╵                                           ~~~~~~~~~~~~~~~

10:38:14 pm [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@samrum/vite-plugin-web-extension/client.js:2:42: ERROR: Could not resolve "/@vite/client"
    at failureErrorWithLog (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1603:15)
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1249:28
    at runOnEndCallbacks (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1034:63)
    at buildResponseToResult (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1247:7)
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1356:14
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:666:9
    at handleIncomingPacket (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:763:9)
    at Socket.readFromStdout (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:632:7)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)

I am on Windows 10, node v16.14.2, npm 8.5.0

After running npm run build both npm run serve:firefox and npm run serve:chrome seem to run fine. When running serve:firefox running a npm run build will reload an updated extension into firefox.

I did notice the generated template code had typescript type errors, but that's a separate issue for later.

[samrum]

@rluiten, thanks for the heads up! This is fixed in v1.0.1.

[rluiten]

I create a new project and it has the extra code I see your fix in #25. It did install @samrum/vite-plugin-web-extension@1.0.1 as expected. I get the same error basically.

Possibly I am doing something wrong. I am not sure if there are steps I need to before / after the use of npm run dev. I am just executing it.

I tried build and serve:firefox and serve:chrome but running script dev just crashes. Have pasted the error again in case there is more to learn from it.

  vite v2.9.5 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 340ms.

✘ [ERROR] Could not resolve "/@vite/client"

    node_modules/@samrum/vite-plugin-web-extension/client.js:2:61:
      2 │   const { addStyleTarget } = await import(/* @vite-ignore */ "/@vite/client");
        ╵                                                              ~~~~~~~~~~~~~~~

1:25:55 pm [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@samrum/vite-plugin-web-extension/client.js:2:61: ERROR: Could not resolve "/@vite/client"
    at failureErrorWithLog (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1603:15)
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1249:28
    at runOnEndCallbacks (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1034:63)
    at buildResponseToResult (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1247:7)
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:1356:14
    at D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:666:9
    at handleIncomingPacket (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:763:9)
    at Socket.readFromStdout (D:\Dev\p\learn\webext1a\node_modules\esbuild\lib\main.js:632:7)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)

[samrum]

Ah, it works when I test with the package linked, but it doesn't when it's using the published version for some reason. I'll re-open this.

[samrum]

Alright, should really be fixed in v1.0.2 now.

[rluiten]

That fixed it I believe. I run npm run dev then run npm run serve:chrome it appears i get nice updates of changes in code now. It appears to work, I think I am using it appropriately.

Thanks for a neat project and the fix.