capacitor icon indicating copy to clipboard operation
capacitor copied to clipboard

bug: MIME Types ignored/blocked in strict mode

Open CrystalLake87 opened this issue 1 year ago • 6 comments

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.

CrystalLake87 avatar Jul 26 '22 22:07 CrystalLake87

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 💙

Ionitron avatar Jul 27 '22 07:07 Ionitron

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 avatar Jul 27 '22 14:07 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

CrystalLake87 avatar Jul 27 '22 14:07 CrystalLake87

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

christinaasu avatar Aug 01 '22 17:08 christinaasu

@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

CrystalLake87 avatar Aug 09 '22 00:08 CrystalLake87

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.

notcaring42 avatar Aug 09 '22 14:08 notcaring42

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

Screen Shot 2022-08-10 at 7 24 31 PM Screen Shot 2022-08-10 at 7 25 38 PM

adamkpurdy avatar Aug 10 '22 23:08 adamkpurdy

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.

ionitron-bot[bot] avatar Nov 10 '22 18:11 ionitron-bot[bot]