Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

See original GitHub issue

Describe the bug Just added a new project and I am using production deployment using CloudFront and S3 hosting. I have an Angular project and when I try to access the deployed code I’m getting:

runtime-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
styles-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
scripts.js:1 Uncaught SyntaxError: Unexpected token <
main-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

To Reproduce Steps to reproduce the behavior:

amplify publish
See error

Expected behavior Angular app should load.

Note: I did not have this same problem with just a dev environment … Angular projects worked like a charm.

Desktop (please complete the following information):

OS: mac
Browser chrome
Version:

> amplify --version
1.10.0

Additional context

I had to change the Origin Path “Origins” via the CloudFront Distributions console. This was adjusted to be:

/example-site-20190806163113-hostingbucket-prod/example-site

Issue Analytics

State:
Created 4 years ago
Comments:21 (7 by maintainers)

Top GitHub Comments

23reactions

malcommcommented, Aug 16, 2019

OK, so after a lot of pain … I think I finally figured it out. @UnleashedMind - you were correct, it was an angular issue all the way. The issue: angular.json had the outputPath set to dist/example-site:

AFAIK, this is the default for Angular. Here is the config with some more context:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "example-site": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/example-site",
...

Changing that to:

            "outputPath": "dist/"

Made all the problems go away. I really can’t believe it took this long to figure out … the whole time I thought this was a CloudFront/S3 issue …

Also of note: I left the Origin Path variable blank (the default) in the CloudFront Origin settings. I’m happy that this is the case as well.

I did have to set permissions to grant public access in S3, which was painful, but after setting the ACL and the bucket policy correctly … life was better.

Thanks for all your help.

1reaction

sandy912commented, Jun 22, 2020

If you are deploying your build inside the folder in your server, then while generating the prod build make sure you add the folder to the --base-href flag and the folder path. Following is the command if you are deploying inside the “www” folder

ng build --prod --base-href /www/

Top Results From Across the Web

ES6 modules in local files - The server responded with a non ...

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

Failed to load module script: The server responded ... - GitHub

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module...

Failed to load module script: The server ... - Alex Arriaga

Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html” in Nginx when deploying an Angular application.

Build not work, but dev it´s work - Material Design for Bootstrap

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module...

Failed to load module script: Expected a JavaScript ... - Reddit

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type...