404 /options/index.html (linked from /options) error

[thdoan]

I have stumbled on a build problem -- whenever you have an internal extensions link, it results in a 404 error on build:

> Using sveltekit-adapter-chrome-extension
> 404 /options/index.html (linked from /options)

An error is also thrown for the extension:

A minimal test case is attached:

1. Unzip
2. npm install
3. npm run dev:extension

sveltekit-template.zip

[michmich112]

Thank you for finding this bug with the test case! I'll run it and see what could be the cause!

[michmich112]

I think the error comes from the new way that svelte bundles the code and your layout. as you can see above, the HTML is not bundled into <directory>/index.html but rather <directory>.html and then links the js with that path.

try the following in your __layout.svelte and it should do the trick ;)

Let me know if it does work for you!

[thdoan]

I just tried as you suggested and got the same error, but this time I can no longer navigate to the internal pages like /help.html:

[michmich112]

ok i'll elevate this issue. I'll probably have an update and fix ready in the next 12h.

[thdoan]

Thanks for looking into it! No rush since I'm just exploring SvelteKit + your awesome adapter at the moment. By the way, I also tried other patterns like creating files in route/options/index.svelte and route/help/index.svelte and got the same error.

[thdoan]

Looks like someone experienced a similar issue with static adapter: https://community.prismic.io/t/404-failure-with-static-adapter-for-sveltekit/5946

Not sure how relevant it is, but I also found this issue: https://github.com/sveltejs/kit/issues/1329

[michmich112]

Probably linked as i based this adapter on the static adapter

[michmich112]

@thdoan Made it work. I've attached the zip file of the working extension. To use run npm run build Problems I found:

• with the dev:extension script, there was a problem when bundling your ts scripts into js scripts. what usually do is that i write them directly in js and put them in the static folder (it works and avoids complicated linking but removes the ability to "import" them in you svelte pages. I believe the import functionality does not really matter for content scripts and background scripts/service workers as they cannot communicate through normal means with a MV3 environment).
• There was the linking in the __layout.svelte that we had corrected previously but we needed to update the path in the manifest.json file as well.
• There was no default action when testing so the extension would not have a visible popup when i would test it. I added an index.svelte file as well as an action property in your manifest.json file.

Let me know if any of this helps!

sveltekit-template-fixes.zip

[thdoan]

@michmich112 thanks for the fixes. The build error went away, but now when I go to either popup.html or help.html I get this error:

It's definitely progress though :-).

[michmich112]

@thdoan Are there any changes you made? there should not be a file named popup.html.

[thdoan]

@michmich112 same error with popup:

Since the extension I'd like to make doesn't require a popup, I will not be using action in manifest.json, which still builds okay after your changes (but throws these JS errors when opening any internal HTML page). I've attached a revised test case below which adds a background script (service worker) and content script. Some other observations:

1. npm run build prevents extension from being installed because it doesn't deploy background.js and content.js to build/js (hence I had to use npm run dev:extension). Would we need to change something in package.json to ensure npm run build correctly deploys the background and content scripts for a production build?
2. npm run package results in "lib does not exist" error. This can be removed from your project if it's not used.

sveltekit-ext-test2.zip

[thdoan]

Btw, I was trying to figure out how come it was building to options/index.html in my original test case (sveltekit-template.zip) but options.html in your test case (sveltekit-template-fixes.zip) -- then I finally figured it out: my vite was outdated...

[package-lock.json]

      "dependencies": {
        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
        "sade": "^1.7.4",
        "vite": "^2.7.2"
      },

After updating vite to v2.8.0, the build issues went away (after updating the HTML file paths), but it introduced this new "Uncaught TypeError: Cannot read properties of null (reading 'parentNode')" error x_x.

[michmich112]

@thdoan Thats great! I think then the only think needed to solve it is bump the sveltekit-adapter-chrome-extension to v1.0.1-next.1 (lastest version)

[thdoan]

@michmich112 upgrading to v1.0.1-next.1 fixed all issues. Thank you!

[michmich112]

side note: @matyanson created a template and i use it whenever i start new extensions ;) sets up many things out of the box: https://github.com/Matyanson/SvelteKit-browser-extension-template