bug: MIME Types ignored/blocked in strict mode

[CrystalLake87]

Bug Report

Platform(s)

iOS (14.0+)

Current Behavior

XCode / iOS Simulator is not loading local stylesheets when running on brand new MacBook with M1 Pro - page loads but local CSS files do not load. Safari Inspector shows error messages related to the MIME types of the specified stylesheets, even when type="text/css" is specified in the tags. XCode is NOT running in Rosetta mode as suggested in previous bug reports.

Safari Error Message:
"Did not parse stylesheet at 'capacitor://{app_name}/{file_name}.css' because non CSS MIME types are not allowed in strict mode."

Expected Behavior

Specified stylesheets should load without error and be applied properly.

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[CrystalLake87]

Issue can be reproduced using the standard capacitor test app at:
https://github.com/ionic-team/capacitor-testapp.git

Environment:
MacBook Pro (2021) with M1 Pro
MacOS Monterrey 12.3
Xcode version 13.4.1

Steps to reproduce:

From MacOS running on M1 or M1 Pro, clone repo:

• Clone repo from https://github.com/ionic-team/capacitor-testapp.git
• Install dependencies
• build package
• npx cap sync iOS
• npx cap open iOS
• run app in simulator (iOS 15.5, any simulated device)
• open safari web inspector
• reload page
• inspect console output:

Console gives following output:

[Error] Did not parse stylesheet at 'capacitor://localhost/static/css/7.532f36fa.chunk.css' because non CSS MIME types are not allowed in strict mode.
[Error] Did not parse stylesheet at 'capacitor://localhost/static/css/main.fc34ace5.chunk.css' because non CSS MIME types are not allowed in strict mode.

[CrystalLake87]

Inspecting the Network requests for these files shows they were served with MIME Type "application/octet-stream":

Summary
URL: capacitor://localhost/static/css/7.532f36fa.chunk.css
Status: 200
Source: —
Initiator:
home:1

Request
Accept: text/css,/;q=0.1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko)

Response
Cache-Control: no-cache
Content-Type: application/octet-stream

[christinaasu]

+1 just got an M1 Mac and now facing this issue with all of my projects. Not running Xcode in Rosetta either.

[CrystalLake87]

@jcesarmobile Have you guys been able to look into this? Even after updating Capacitor to the latest version (4.0.1), CSS files still aren't loading as expected

[notcaring42]

I know this repo is for Capacitor, but I can confirm this occurs in Cordova as well. I was able to get around this issue (temporarily) by adding this code to IONAssetHandler.m, in the function getMimeType:

if ([fileExtension isEqualToString:@"css"]) {
      return @"text/css";
}

I have only seen this when running in Rosetta, but I can't run on the M1 chip directly because of some of the plugins I am using. So I have not been able to confirm myself if this is Rosetta-only.

[adamkpurdy]

Same experience here. Cloned the repo for the standard test app.
Environment:
MacBook Pro (2021) with M1 Max
MacOS Monterrey 12.5
Xcode version 13.4.1

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.