Can't load "content_scripts/content-0.js" ,Because it's not UTF-8 encoded

[John-Chan]

Create a project via :

 npx extension create my-extension --template=vue-typescript

and run npm run start

[cezaraugusto]

hi @John-Chan thanks for reporting.

Could you try running the React-TypeScript template to see if thee bug happens as well? I'm looking to know if the issue is template-specific.

npx extension create my-extension --template=vue-typescript

[John-Chan]

The React-TypeScript template cannot run due to icon path issues( #87), and it's uncertain whether there is an issue with UTF-8 encoding.

npx extension create my-extension-react --template=react-typescript

[OSpoon]

I suspect that the output.cssHeadDataCompression option in webpack@5.91.0 enabled in the production environment caused content-0.js to contain an unrecognizable character. I attempted to disable the output.cssHeadDataCompression option to avoid this issue. I also found a change in webpack@5.92.0, where the latest version will no longer have unrecognizable characters.

webpack@5.92.0 https://github.com/webpack/webpack/blob/34e2561addb0f65a7a6fb0ce7ae1aea4cd1d599f/lib/css/CssLoadingRuntimeModule.js#L227

Run npm run start

webpack@5.91.0

webpack@5.92.0

@cezaraugusto，I'm not quite sure about the purpose of the output.cssHeadDataCompression option being enabled. I think upgrading the webpack version would be more appropriate. Could you verify that?

[cezaraugusto]

@OSpoon thanks for investigating! Did updating webpack solved the issue? I'm not able to reproduce

[OSpoon]

@cezaraugusto, I reproduced this issue using the code of the main branch. For this inssus, I tried two solutions:

1. To disable the output.cssHeadDataCompression option.

2. Upgrade webpack to the latest version.

[cezaraugusto]

thanks @OSpoon, PR opened to bump webpack

[cezaraugusto]

@John-Chan could you please try again? I just released v1.8.0 which should fix it.

npx extension@latest start my-extension --template=vue-typescript

Also please note that start will bundle your extension in production mode without live-reload support. For development you want to run the dev command.

Let me know if that works for you so we can close this one. Thanks!

[John-Chan]

Compared to before, vue templates no longer pop up utf8 encoding errors, but the project still can't start successfully because of the icon path problem. Maybe we need to wait for the icon path issue to be resolved and try again.

[cezaraugusto]

@John-Chan @OSpoon happy to share that this bug is finally fixed.

# Ensure you run @latest as npx cache system can trick you are not
npx extension@latest create my-extension --template=vue-typescript

If I'm wrong, let me know!

[John-Chan]

The ICON path issue still exists, manually copying the file to the dist/chrome/icons path works. So the utf8 encoding issue should be fixed.

[OSpoon]

hi @cezaraugusto, webpack-run-edge-extension, webpack-run-chrome-extension and webpack-browser-extension-manifest were last updated 12 days ago, Do you need to release the latest version?

[cezaraugusto]

@OSpoon just bumped all three versions but can't repro the bug yet. do you?

[OSpoon]

@cezaraugusto, I don't see the new version of webpack-browser-extension-manifest

[cezaraugusto]

Oops my bad, released now

[OSpoon]

@cezaraugusto Regarding the problem of the path in the win environment, I have verified it, and please @John-chan can try again in his free time, thank you very much ~

[John-Chan]

@cezaraugusto Regarding the problem of the path in the win environment, I have verified it, and please @John-Chan can try again in his free time, thank you very much ~

Great! It's works

[cezaraugusto]

thanks for confirming @John-Chan! feel free to report anything else you find weird.

@OSpoon thanks for digging into it! 💯

Closing as fixed 🎉