'Did not parse stylesheet at 'ionic://localhost/styles.css' because non CSS MIME types are not allowed in strict mode

I'm working on a cross-platform mobile app and using ionic and angular frameworks. My app is running fine on iOS simulators and devices. recently I bought a new Macbook Air with M1 Chip. When I tried running the app on M1 MacBook I'm getting the below error.

Did not parse stylesheet at 'ionic://localhost/styles.css' because non CSS MIME types are not allowed in strict mode.

When I tried to navigate to the CSS file in web inspector it is showing "An error occurred trying to load the resource". I'm new to web technologies, so not sure how to fix it. I really appreciate any help. Thank you. enter image description here enter image description here

cssionic-frameworkios-simulatorapple-m1strict-mode


Solution 1:[1]

I am also facing the same issue on M1 Mac. Loading any CSS files pointing to the local ionic:// gives me the same mime type error.

One workaround i found to load the CSS from the sample server where its mime type is coming as text/css. Using a CDN URL solved the issue for me for Development.

var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.type = "text/css";
stylesheet.href = "https://cdn.xyz.cloud/myapp/build/main.css";

document.head.appendChild(stylesheet);

Not a solution for Production code, To go ahead with the development on Simulator.

Solution 2:[2]

I came across this problem too. I use an M1 with Xcode 13.3 and whenever I ran the app from the simulator it would not load the CSS file and in Safari it showed the same error. On the physical phone I was able to see the app correctly as it was taking the styles.css file.

In my case, it got solved by switching off the "Open with Rosetta" checkbox. I had it checked for some months already (and forgot it was like that) as an app was not working properly without Rosetta. After switching it off, the simulator loaded styles.css properly.

To uncheck "Open with Rosetta", go to "Applications", right click on Xcode, click on "Obtain Information":

Go to "Applications"

Right click on Xcode and click on "Obtain Information"

In the window that opens, uncheck "Open with Rosetta":

enter image description here

Screenshots are in Spanish, but the way to get there is the same in English (same order of buttons, options, etc).

I hope that helps.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Snehasis Mohapatra
Solution 2 Tomas

Related Questions