Develop Reference

ServiceWorker MIME Type Error ('text/html') on register (React)

The current behavior:
Service worker does not register due to the below error
The expected behavior:
Service worker registers
Details
Posted as a github issue:
https://github.com/facebook/create-react-app/issues/8593
Service worker is giving the following error when attempting to register:
Error during service worker registration:
DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'):
The script has an unsupported MIME type ('text/html').
console. # index.js:1
sw.js is showing in the sources tab of the Chrome dev tools, but not registering.
React version: 16.12.0
Error Message:
Error during service worker registration: DOMException:
Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'):
The script has an unsupported MIME type ('text/html').
Failed ServiceWorker in Chrome's Inspect Tab:
Steps To Reproduce:
Register a Service Worker in React (change from unregister to register, or place SW code directly in index.html, or use a simpler SW. All cause the same error when running, in either dev or a build react app.)
SW Example:
export function register() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./sw.js")
.then(function(registration) {
// Successful registration
console.log(
"Hooray. Registration successful, scope is:",
registration.scope
);
})
.catch(function(error) {
// Failed registration, service worker won’t be installed
console.log(
"Whoops. Service worker registration failed, error:",
error
);
});
}
}
Also, `http://localhost:3000/sw.js when using the default SW from React returns this HTML:
Using the code sample above returns index.html (default 404, http://localhost:3000/) when trying to access http://localhost:3000/sw.js
Suggested fixes:
Move sw.js to public folder, gives this error:
Is there a way to change the header (from text/html to application/javascript) for specifically sw.js when served to the browser in React?
I tried following some Medium articles on registering custom serviceWorkers in React, to no avail...

When running webpack dev server, it renders default index.html for missing resource.
If you use your browser to load http://localhost:3000/sw.js, you will actually see a rendered react app (started by the index.html). That's why the mime type is html, not javascript.
This fallback to index.html is designed to support SPA with front-end routes. For example /product/123/reviews has no such html file in backend, the JS SPA app takes care of it in front-end.
Why your file is missing? I guess you created that file in the root folder of your project.
Webpack dev server doesn't serve from that root folder.
Move your sw.js into public/ folder of your project, it will be served up as expected.

This may be a duplicate of this one 61776698
Main thing you need to know: Create the serviceWorker inside public folder in order to be treated as .js file and not text/html file.
Then register that service in your index.js
Step 1, create public/sw.js
self.addEventListener('message', async (event) => {
console.log('Got message in the service worker', event);
});
Step 2, create src/sw-register.js
export default function LocalServiceWorkerRegister() {
const swPath = `${process.env.PUBLIC_URL}/sw-build.js`;
if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production') {
window.addEventListener('load', function () {
navigator.serviceWorker.register(swPath).then(registration => {
console.log('Service worker registered');
});
});
}
}
Step 3, in src/index.js, add these two lines
import LocalServiceWorkerRegister from './sw-register';
...
LocalServiceWorkerRegister();
You can change some things for your needs, but with those changes, you should be able to work with a custom service worker in a create-react-app application

You can write code at server side to handle sw.js file. below is nodejs code which intercept sw.js file request and read from folder and send back to browser.
app.get('/sw.js', (req, res) => {
if (__DEVELOPMENT__) {
http.get('http://localhost:4001/static/build/sw.js', (r) => {
res.set({
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate'
});
r.setEncoding('utf8');
r.pipe(res);
}).on('error', (e) => {
console.error(`Error in sending sw.js in dev mode : ${e.message}`);
});
} else {
res.setHeader('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
res.sendFile('sw.js', { root: path.join(__ROOT_DIRECTORY__, 'assets', 'build') }); // eslint-disable-line no-undef
}
});

Loading module from heroku was blocked because of a disallowed MIME type (“text/html”)

I have an app with an html like that import script like this =>
<script type="module" src="/libs/ajax.js"></script>
<script type="module" src="/scripts/login.js"></script>
those 2 script look like this
ajax.js
export class Ajax {
//blabla
}
login.js
import { Ajax } from '../libs/ajax.js'
const loginBtn = document.getElementById('go_login');
const signupBtn = document.getElementById('go_signup');
const ajax = new Ajax();
document.getElementById('signup').onclick = () => {
const username = document.getElementById('signup_name').value;
if(username && email && password){
ajax.post('', {//blabla})
}
It works ok in local, and I am able to build and run it.
But, when I deploy on heroku, I get the following :
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.

When I link javascript file in html it sends a request to server and causing error

I am using express and node.js in backend and ejs templating engine in front-end. My app.js look like this
app.get('/book/:id', (req, res)=>{
var book_id = req.params.id;
console.log('this book :', book_id);
Book.findOne({
book_id
}).then((book)=>{
res.render('book.ejs', {book, title: "Book"});
}).catch((e)=>{
// console.log(e);
});
});
book.ejs file
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="books.js"></script>
</head>
<body style="font-family: arial">
<h1><%= title %></h1>
</body>
</html>
But when i route page to book/1234, I got following log in my server
this book : 1234
this book : jquery-3.3.1.min.js
this book : book.js
Why jquery-3.3.1.min.js and book.js are send to book/:id route? I am only sending book/1234 but jquery-3.3.1.min.js and book.js are also sent to server and causing error.
Browser console log is this
GET http://localhost:3000/book/jquery-3.3.1.min.js net::ERR_ABORTED 500 (Internal Server Error)
1234:1 Refused to execute script from 'http://localhost:3000/book/jquery-3.3.1.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
1234:6 GET http://localhost:3000/book/books.js net::ERR_ABORTED 500 (Internal Server Error)
1234:1 Refused to execute script from 'http://localhost:3000/book/books.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Since script links have relative paths, they are loaded from current path, which is /book.
They should either have absolute paths:
<script type="text/javascript" src="/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/books.js"></script>
Or base URL should be specified:
<base href="/">

You are using relative path in src attribute. Since you are serving the page from /books/<id>, if you use a relative path, browser will understand it as /books/(relative_path_of_resource) and so when it comes across those links it is sending a request to books/jquery.js and books/books.js
You should convert your link to point to the correct static path of the js files. Refer this link - https://expressjs.com/en/starter/static-files.html to see how to serve static files and once you set up the serving, you can change the links to /static/books.js and /static/jquery.js

I think that your book.ejs file is under the route of '/book'. if that so, you script tag like <script type="text/javascript" src="books.js"></script> will access the route of /book/book.js ,not your assets.
so you should set you src attribute like this /book.js and make sure you had made your assets accessible.

Wrapped java.net.UnknownHostException: file: unknown error Cause: file: unknown error for PTC thingworx service script to parse xml file

I tried the following javascript on PTC thingworx service
var params = {
url:"file:///C:/Users/ShaurabhKumar/Documents/MATLAB/AGENT.xml",
timeout:160
};
Getting the following error
Wrapped java.net.UnknownHostException: file: unknown error Cause: file: unknown error
Thank you

You need to put the xml file on a server and provide a valid URL path.

System JS not loading modules

I have a strange problem with System JS when I'm playing around with Angular 2.
Everything works fine for a while, but seemingly random System JS can't find modules anymore...
I get this error message:
GET http://localhost:9000/angular2/platform/browser.js 404 (Not Found) # system.src.js:4891(anonymous function) # system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/src/facade/lang.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) # system.src.js:4891
Sometimes it's more sometimes it's less errors...
The strangest thing is that after waiting a while and trying to refresh the page over and over, the app magically starts working again!
I use systemjs#0.19.20 and angular2#2.0.0-beta.3 (latest at the time).
Script section of index.html with SystemJS config look like this:
<script src="./node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="./node_modules/es6-shim/es6-shim.min.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({
defaultJSExtensions: true
});
//bootstrap the Angular2 application
System.import('dist/app').catch(console.log.bind(console));
</script>
<script src="./node_modules/rxjs/bundles/Rx.js"></script>
<script src="./node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="./node_modules/angular2/bundles/http.dev.js"></script>
<script src="./node_modules/angular2/bundles/router.dev.js"></script>
Anyone recognize this problem?
Thanks!

It seems that your SystemJS isn't correct:
Do you use something like that in your HTML entry page:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
From what I see in your HTTP calls, I guess that there is something like that in your SystemJS configuration:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
angular2: {
format: 'register',
defaultExtension: 'js'
}
}
});

Maybe a long shot as I don't have the enough privileges to comment and ask for more information. Did you try checking if the file app.ts actually resides in dist/app?