cancel
Showing results for 
Search instead for 
Did you mean: 

Magento Front-End & Admin Page displaying incorrectly after installation

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Magento Front-End & Admin Page displaying incorrectly after installation

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

screencapture-localhost-magento230-2018-12-12-12_19_21.png

 

and the backend / admin page displays like this

screencapture-localhost-magento230-xpanel-admin-index-index-key-f8759f0b5987f0af612bb4c76aac788360858a42cb000ad9e1ca40f579dc536d-2018-12-12-12_22_28.png

 

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
10 REPLIES 10

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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/
Manish Mittal
https://www.manishmittal.com/

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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

 

 

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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

Manish Mittal
https://www.manishmittal.com/

Re: Magento Front-End & Admin Page displaying incorrectly after installation

Me too T^T

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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

Was my answer helpful? You can Click Kudos/Accept As Solution.
200+ professional extensions for M1 & M2 with free lifetime updates!

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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?

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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

Re: Magento Front-End & Admin Page displaying incorrectly after installation

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.