Magento Front-End & Admin Page displaying incorrectly after installation

[ethan_whitlock]

Basically, I've set up Magento 2 with sample data to work with my localhost env (Xampp)

However, even though everything has installed, the front end page looks like this

and the backend / admin page displays like this

Console Errors for each
~ Front End

jquery.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
translate-inline.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/translate-inline
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
jquery.mobile.custom.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: jquery/jquery.mobile.custom
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
dataPost.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/dataPost
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
bootstrap.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/bootstrap
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
responsive.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: Magento_Theme/js/responsive
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
theme.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:166 Uncaught Error: Script error for: Magento_Theme/js/theme
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681

~ Admin

Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
require.js:166 Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:299
(anonymous) @ requirejs-config.js:300
(anonymous) @ requirejs-config.js:512
require.js:166 Uncaught Error: Script error for: mage/backend/bootstrap
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:299
(anonymous) @ requirejs-config.js:300
(anonymous) @ requirejs-config.js:512
require.js:166 Uncaught Error: Script error for: Magento_Catalog/catalog/product
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:299
(anonymous) @ requirejs-config.js:300
(anonymous) @ requirejs-config.js:512
require.js:166 Uncaught Error: Script error for: mage/adminhtml/globals
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:299
(anonymous) @ requirejs-config.js:300
(anonymous) @ requirejs-config.js:512
require.js:166 Uncaught Error: Script error for: js/theme
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
configure @ require.js:1343
requirejs @ require.js:1734
req.config @ require.js:1745
(anonymous) @ requirejs-config.js:299
(anonymous) @ requirejs-config.js:300
(anonymous) @ requirejs-config.js:512

[Manish Mittal]

Hello @ethan_whitlock

Please run below commands to fix problems:

sudo chmod -R 0777 var/ pub/ generated/
rm -rf pub/static/* var/* generated/code/*
php bin/magento cache:flush
php bin/magento set:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
sudo chmod -R 0777 var/ pub/ generated/

[ethan_whitlock]

When running the following commands, I get the error after.

Code

php bin/magento cache:flush
php bin/magento set:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f

Error

An exception was raised while creating "Request"; no instance returned

[Manish Mittal]

Hello @ethan_whitlock

Please follow Below git URL and workaround to fix this:

https://github.com/magento/magento2/issues/1716

https://github.com/magento/magento2/commit/033e9c1312413e3c22d048b6d8fd9f203c231d0c

[desmonitus_doro]

Me too T^T

[Dhiren Vasoya]

Which Magento 2 version you are trying to setup with sample data?

[james_jo]

Spoiler

Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/dataPost
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/mage/bootstrap.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/bootstrap
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/jquery/jquery.mobile.custom.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: jquery/jquery.mobile.custom
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/jquery.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/mage/translate-inline.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: mage/translate-inline
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/Magento_Theme/js/responsive.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: Magento_Theme/js/responsive
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)
/Magento2_sam/Magento_Theme/js/theme.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:141 Uncaught Error: Script error for: Magento_Theme/js/theme
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)

I meet this Errors after Type in commandline "php bin/magento setup:static-content:deploy -f"

How can I solve it?

[RedChamps]

This problem is caused on windows system and to fix it, you need to edit a core file

Magento\Framework\View\Element\Template\File\Validator

or

vendor\magento\framework\View\Element\Template\File\Validator

replace  code line in function "isPathInDirectories" from

$realPath = $this->fileDriver->getRealPath($path);

to

$realPath = str_replace('\\', '/', $this->fileDriver->getRealPath($path));

source: https://magento.stackexchange.com/questions/251946/magento-2-3-problems-on-local-server

[khandoker ashique_mahamud]

Ya after doing this change in vendor folder i got the output but require JS is also not found in console.

[noviem]

Magento 2 development on Windows is broken, it's not even supported as per the dev docs. 

Even with patches like resolving paths to windows format it is slow - can take minutes to just load a page.

We use WSL to do the development on Windows machines and it just works.

Plan on also writing a post on our website about it.