Run MM² on W10 to test modules - 404 and X-Content-Type-Options: nosniff

poutr · Aug 29, 2020, 12:20 PM

Hello,

Trying to run MM² on my w10 laptop with node version 12.18.3.

git clone & npm install, config file with ip whitelist & npm run server ( https://docs.magicmirror.builders/getting-started/installation.html#usage )

The application starts and I can open localhost:8080 and it’s a black screen.

Main errors is a variation of :

GET http://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js
[HTTP/1.1 404 Not Found 29ms]
The resource from "http://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js" was blocked due to MIME type (« text/html ») mismatch (X-Content-Type-Options: nosniff).

At the bottom of the post are all the dev tools console logs.

So, I got 2 issues :

one is that mismatch MIME type (https://stackoverflow.com/questions/44657829/css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff)
but I don’t even have a /MagicMirror/vendor/node_modules directory inside my /MagicMirror/vendor/ directory (while I do have the /MagicMirror/node_modules/ directory after the install).

What is happening ? Should I run a npm install inside each sub-directory of /MagicMirror/ ? Do I need to modify the html of MM² to follow the stackoverflow answer?

Or is there a special case for running it on w10 / node 12 ?

Thanks for any tips. I will update my post with npm install in every sub-directory results.

GEThttp://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js
[HTTP/1.1 404 Not Found 29ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
GEThttp://localhost:8080/fonts/node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff2
[HTTP/1.1 404 Not Found 2ms]

downloadable font: download failed (font-family: "Roboto Condensed" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: http://localhost:8080/fonts/node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff2
GEThttp://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js
[HTTP/1.1 404 Not Found 3ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Échec du chargement pour l’élément <script> dont la source est « http://localhost:8080/vendor/node_modules/nunjucks/browser/nunjucks.min.js ». localhost:8080:41:1
Initializing MagicMirror. main.js:478:8
Loading core translation file: translations/en.json translator.js:202:9
Loading core translation fallback file: translations/en.json translator.js:227:9
Load script: modules/default/alert//alert.js loader.js:175:9
GEThttp://localhost:8080/fonts/node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff
[HTTP/1.1 404 Not Found 4ms]

downloadable font: download failed (font-family: "Roboto Condensed" style:normal weight:400 stretch:100 src index:3): status=2147746065 source: http://localhost:8080/fonts/node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff
Module registered: alert module.js:486:6
Bootstrapping module: alert loader.js:147:7
Load script: modules/default/alert/notificationFx.js loader.js:175:9
Scripts loaded for: alert loader.js:152:8
Load stylesheet: modules/default/alert/notificationFx.css loader.js:194:9
Load stylesheet: vendor/css/font-awesome.css loader.js:194:9
GEThttp://localhost:8080/vendor/node_modules/@fortawesome/fontawesome-free/css/all.min.css
[HTTP/1.1 404 Not Found 3ms]

GEThttp://localhost:8080/vendor/node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css
[HTTP/1.1 404 Not Found 4ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/@fortawesome/fontawesome-free/css/all.min.css » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
La ressource à l’adresse « http://localhost:8080/vendor/node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Error on loading stylesheet: vendor/css/font-awesome.css loader.js:205:10
Styles loaded for: alert loader.js:154:9
alert - Load translation fallback: translations/en.json translator.js:175:9
Translations loaded for: alert loader.js:156:10
Load script: modules/default/updatenotification//updatenotification.js loader.js:175:9
Module registered: updatenotification module.js:486:6
Bootstrapping module: updatenotification loader.js:147:7
Scripts loaded for: updatenotification loader.js:152:8
Styles loaded for: updatenotification loader.js:154:9
Translations loaded for: updatenotification loader.js:156:10
Load script: modules/default/clock//clock.js loader.js:175:9
Module registered: clock module.js:486:6
Bootstrapping module: clock loader.js:147:7
Load script: vendor/node_modules/moment/min/moment-with-locales.js loader.js:175:9
GEThttp://localhost:8080/vendor/node_modules/moment/min/moment-with-locales.js
[HTTP/1.1 404 Not Found 3ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/moment/min/moment-with-locales.js » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Échec du chargement pour l’élément <script> dont la source est « http://localhost:8080/vendor/node_modules/moment/min/moment-with-locales.js ». localhost:8080:1:1
Error on loading script: vendor/node_modules/moment/min/moment-with-locales.js loader.js:185:10
Load script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js loader.js:175:9
GEThttp://localhost:8080/vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js
[HTTP/1.1 404 Not Found 2ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Échec du chargement pour l’élément <script> dont la source est « http://localhost:8080/vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js ». localhost:8080:1:1
Error on loading script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js loader.js:185:10
Load script: vendor/node_modules/suncalc/suncalc.js loader.js:175:9
GEThttp://localhost:8080/vendor/node_modules/suncalc/suncalc.js
[HTTP/1.1 404 Not Found 3ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/suncalc/suncalc.js » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Error on loading script: vendor/node_modules/suncalc/suncalc.js loader.js:185:10
Échec du chargement pour l’élément <script> dont la source est « http://localhost:8080/vendor/node_modules/suncalc/suncalc.js ». localhost:8080:1:1
Scripts loaded for: clock loader.js:152:8
Load stylesheet: modules/default/clock/clock_styles.css loader.js:194:9
Styles loaded for: clock loader.js:154:9
Translations loaded for: clock loader.js:156:10
Load script: modules/default/calendar//calendar.js loader.js:175:9
Module registered: calendar module.js:486:6
Bootstrapping module: calendar loader.js:147:7
File already loaded: moment.js loader.js:235:9
Scripts loaded for: calendar loader.js:152:8
Load stylesheet: modules/default/calendar/calendar.css loader.js:194:9
File already loaded: font-awesome.css loader.js:235:9
Styles loaded for: calendar loader.js:154:9
Translations loaded for: calendar loader.js:156:10
Load script: modules/default/compliments//compliments.js loader.js:175:9
Module registered: compliments module.js:486:6
Bootstrapping module: compliments loader.js:147:7
File already loaded: moment.js loader.js:235:9
Scripts loaded for: compliments loader.js:152:8
Styles loaded for: compliments loader.js:154:9
Translations loaded for: compliments loader.js:156:10
Load script: modules/default/currentweather//currentweather.js loader.js:175:9
Module registered: currentweather module.js:486:6
Bootstrapping module: currentweather loader.js:147:7
File already loaded: moment.js loader.js:235:9
Scripts loaded for: currentweather loader.js:152:8
Load stylesheet: vendor/node_modules/weathericons/css/weather-icons.css loader.js:194:9
GEThttp://localhost:8080/vendor/node_modules/weathericons/css/weather-icons.css
[HTTP/1.1 404 Not Found 2ms]

La ressource à l’adresse « http://localhost:8080/vendor/node_modules/weathericons/css/weather-icons.css » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Error on loading stylesheet: vendor/node_modules/weathericons/css/weather-icons.css loader.js:205:10
Load stylesheet: modules/default/currentweather/currentweather.css loader.js:194:9
Styles loaded for: currentweather loader.js:154:9
Translations loaded for: currentweather loader.js:156:10
Load script: modules/default/weatherforecast//weatherforecast.js loader.js:175:9
Module registered: weatherforecast module.js:486:6
Bootstrapping module: weatherforecast loader.js:147:7
File already loaded: moment.js loader.js:235:9
Scripts loaded for: weatherforecast loader.js:152:8
File already loaded: weather-icons.css loader.js:235:9
Load stylesheet: modules/default/weatherforecast/weatherforecast.css loader.js:194:9
Styles loaded for: weatherforecast loader.js:154:9
Translations loaded for: weatherforecast loader.js:156:10
Load script: modules/default/newsfeed//newsfeed.js loader.js:175:9
Module registered: newsfeed module.js:486:6
Bootstrapping module: newsfeed loader.js:147:7
File already loaded: moment.js loader.js:235:9
Scripts loaded for: newsfeed loader.js:152:8
Styles loaded for: newsfeed loader.js:154:9
Translations loaded for: newsfeed loader.js:156:10
Load stylesheet: css/custom.css loader.js:194:9
GEThttp://localhost:8080/css/custom.css
[HTTP/1.1 404 Not Found 2ms]

La ressource à l’adresse « http://localhost:8080/css/custom.css » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).
localhost:8080
Error on loading stylesheet: css/custom.css loader.js:205:10
Starting module: alert alert.js:162:7
Start updatenotification updatenotification.js:19:7
Starting module: clock clock.js:46:7
Uncaught ReferenceError: moment is not defined

sdetweil · Aug 29, 2020, 12:28 PM

@poutr after install you have to manually do

npm install
in the vendor and fonts folders

poutr · Aug 29, 2020, 12:36 PM

Hello, just coming back from doing that (as I wrote I would) and it worked \o/ Thanks for confirming it’s the correct solution

Edit : how do I close the topic ? can we add this tip to the documentation ?

sdetweil · Aug 29, 2020, 12:39 PM

@poutr u did not open it as an issue, so cannot close it.

update doc. No, the project is only supported on pi 3 and 4.