Rendering issues for WebExtensions/manifest.json on http://localhost:3000

[rebloor]

While pages in the en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json path render as expected on http://localhost:5000 they are not formatting correctly on http://localhost:3000.

[gumbol]

This is not an mdn issue. its that the server at 5000 cant locate the page resources.
use the browser debugger and post a screenshot of the error

[rebloor]

@gumbol Is this what you need:

[gumbol]

It seems the server is sending a different mime type to the request one and the browser doesnt know what to do with the received data.
i think the server might need to be adjusted or the page requested itself might have wrong instructions

[gumbol]

does it work with other pages?

[rebloor]

As mentioned it is problem for pages in the en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json path (not that I have exhaustively checked other paths outside the add-ons pages)

[schalkneethling]

Hey @rebloor - I have tested this using both port 3000 and 5000 and the page in question works fine for me. Are you still experiencing this problem?

If so, which operating system are you on and which browser are you using? Thanks.

[rebloor]

Thanks @schalkneethling I'm still seeing the issue in Firefox 96.0 and Firefox developer 97.0b2 running on an Apple silicon MacBook with macOS 12.0 (21A344). (I reported the problem from an iMac with Intel silicon.)

[schalkneethling]

Thanks @schalkneethling I'm still seeing the issue in Firefox 96.0 and Firefox developer 97.0b2 running on an Apple silicon MacBook with macOS 12.0 (21A344). (I reported the problem from an iMac with Intel silicon.)

I essentially have the exact same set-up. Could you grab the latest from main and then delete your node_modules folder, run yarn and then yarn dev and see whether the problem persists? Thanks!

[rebloor]

@schalkneethling sadly, that made no difference. Some more information, when I load pages from the /en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json path I get the following errors in the console (I get no such errors from other pages):

The development server has disconnected.
Refresh the page if necessary. webpackHotDevClient.js:76
Content Security Policy: Couldn’t process unknown directive ‘script-src-elem’ 2
The script from “http://localhost:3000/static/js/runtime-main.a5f32f32.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.   manifest.json
The script from “http://localhost:3000/static/js/4.0ffb41e3.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.    manifest.json
The stylesheet http://localhost:3000/static/css/main.cd55b6e0.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”.  manifest.json
Uncaught SyntaxError: expected expression, got '<'   runtime-main.a5f32f32.js:1
Uncaught SyntaxError: expected expression, got '<'   4.0ffb41e3.chunk.js:1
The script from “http://localhost:3000/static/js/main.702fd44b.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.    manifest.json
Uncaught SyntaxError: expected expression, got '<'   main.702fd44b.chunk.js:1

[gumbol]

@rebloor try edit the mime type in /static/css/main.cd55b6e0.chunk.css
to "text/css”

[rebloor]

@gumbol I can't see that the file includes a specification of mime type. The file appears to be a run time copy of yari/client/public/index.html:

[schalkneethling]

@rebloor Thank you for the additional information. This is an odd one. localhost:3000 is served by the dev server that comes with create react app so, not sure why it is choking for you on that particular page. I will hunt around and see whether anyone else has run into a similar issue.

[rebloor]

Thanks @schalkneethling

[schalkneethling]

localhost:3000 is served by the dev server that comes with create react app so, not sure why it is choking for you on that particular page.

This was wrong. We actually implemented our own dev server. Will investigate this issue.

[Elchi3]

I'm running into this as well. Maybe the ".json" in the slug is problematic here?

Mozilla/Add-ons/WebExtensions/manifest.json has quite a few subpages, so changing that is a bit annoying on the content side. Would be cool to fix the dev environment (and probably also disallow future slugs to have ".json")

https://github.com/mdn/yari/blob/main/client/src/setupProxy.js#L18C3-L18C31

[Elchi3]

For everyone else who runs into this issue, @rebloor found out that using http://localhost:5042/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/ (note the port 5042 and not port 3000) is a workaround for this problem.

[danielhjacobs]

Still an issue: #11530 (comment)