Capacitor: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

[Bandito11]

Description of the problem:
Everytime I try to run the app in electron I see a blank screen with that error on the console. The app works in iOS and Android with 0 problems.

Affected platform

• [ ] Android
• [ ] iOS
• [X] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [X] macOS
• [ ] linux

Other information:

Capacitor version: 1.1.1

node version: 12.6.0

npm version: 6.10.3

CocoaPods version: 1.7.2

Steps to reproduce:
npm init stencil > ionic-toolkit blah blah
npx cap add electron
npx cap copy
npx cap open electron

Link to sample project:
https://github.com/Bandito11/prunus2

[loopezz]

Open ts.config.json and replace "target": "es2015" with "target": "es5". That should do the trick.

[Bandito11]

That didn't work :(

[Bandito11]

Closing it as this is a Stencil issue and not a Capacitor issue.

[jcesarmobile]

The problem is <script type="module" src="./build/app.esm.js"></script> and <script nomodule src="./build/app.js"></script> don't work from file protocol, you have to use only one script without type="module" and without nomodule, something like <script src="./build/app.js"></script>

[Bandito11]

I am getting somewhere as I am at least getting a different error message.

I am using the ionic toolkit. I have not done any changes to the project it generates when npm init yet I am getting this error message: [ion-router] the path does not match any route.

I have tried setting the baseUrl in the stencil config as "./" and ".".

I have tried changing the ion-router root property to ".", "" and "./" but I get this error: [ion-router] URL is not part of the routing set

[katzenjunge]

I can confirm this issue. As of right now, I can't even run a freshly created Ionic 4 app using Capacitor and Electron.

The first issue is that the paths don't get resolved correctly. Electron, upon running, looks for all the scripts in the system root (e.g. C:/) instead of using the local root.
Changing the base href from <base href="/" /> to <base href="./" /> does solve this particular issue.

However, now I get the same error as OP:

Version info
Ionic:

Ionic CLI : 5.2.5
Ionic Framework : @ionic/angular 4.7.4
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Capacitor:

Capacitor CLI : 1.1.1
@capacitor/core : 1.1.1

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

[jcesarmobile]

See #1813

[Bandito11]

I fixed ion-router issue by using window.location.href on the root property.

For the error in the title I wrote a script on the index.html that writes the correct app.js depending if its on Electron or not.

You can check what I did here.

https://github.com/Bandito11/prunus2/blob/master/src/index.html

[Bandito11]

@jcesarmobile: my issue and the issue you referenced are different problems because mine was a Stencil issue and that one seems to be Angular only.

I don't think you were responding to me (OP) now that I reread the previous user post.

[jcesarmobile]

Yeah, it was for the other user that commented.
But in the end his problem and your initial problem was the same, the type="module" and nomodule in the script tags that I already told you the other day.

[katzenjunge]

Huge thanks @jcesarmobile, the workaround you provided in the other thread worked for me. For anyone curious, it was
You can change the target in tsconfig.json from es2015 to es5
that solved it.

So this attribute basically just got renamed in the new angular version, electron doesn't know it and that is the issue? Hopefully this will be fixed soon.

The application still has some path issues though, using the system root instead of the application root as an entry point, as seen here:

Of course it's possible to fix these paths manually, but this should still be adressed soon.

[jdnichollsc]

@Bandito11 did you change the configuration of Stencil to fix this issue? I'm debugging from Cordova (Android) and I have the same problem, also debugging your solution:

<script src="cordova.js"></script>
<script type="text/javascript">
  const head = document.querySelector('head');
  const noEsm = document.createElement('script');
  noEsm.src = './build/my-app.js';
  if (window.cordova) {
    noEsm.type = 'text/javascript';
    head.appendChild(noEsm);
  } else {
    const esm = document.createElement('script');
    esm.type = 'module';
    esm.src = './build/my-app.esm.js';
    head.appendChild(esm);

    noEsm.noModule = true;
    head.appendChild(noEsm);
  }
</script>

[OZZlE]

I don't think my issue is related to this module but it's likely the same issue and resolution. I think the issue is that whatever backend server you are using isn't returning the correct MIME type header for *.mjs I just renamed it to .js and everything works fine :)

[jdnichollsc]

Ohh thanks, I wasn't using a backend server to debug this, only localhost :)