CSS and Javascript files are not loading after Magento 2 installation

Question

I've installed Magento 2 on local server successfully using composer but I'm not able to see frontend and admin panel designs. I see plain texts there. While looking at console I see following error.

TypeError: require.config is not a function requirejs-config.js
TypeError: require.config is not a function admin:59
TypeError: require is not a function admin:62
ReferenceError: Ext is not defined admin:68
ReferenceError: Fieldset is not defined admin:76
TypeError: require is not a function admin:83
TypeError: require is not a function

enter image description here

• zhartaunik: apache / nginx ?
• amitshree: I'm using apache server.
• Chris O'Toole: are you on windows?
• amitshree: Nope. I'm using ubuntu.
• Sarvesh Tiwari: I'm using ngnix. I am not finding JS files in my checkout page under source tab

Answer 1

This could be an issue with symlinks. I see that deploy.php worked for you, but you may also try deleting the resources from pub/static and seeing if the instructions from https://magento.stackexchange.com/a/64808/594 work for you. If so, then it may save you some time during development as it should be faster than running deploy.php.

It would also be good to know if multiple people are hitting issues with the symlinks and what the common cause is.

• Haijerome: Anybody came across this issue should try this at first. Thank you !
• Max: Basically we have had this specific problem with Magento-Installations below 2.0.6, if anybody has problems. Especially 2.0.4 bugged us. So, if you still need one of those versions, use this. Next upgrade should be to the latest stable version!

Answer 2

If you facing problem of css and design after installation in Windows please follow the following steps:

step 1. php bin/magento setup:static-content:deploy

step 2. php bin/magento indexer:reindex

step 3. make sure apache "rewrite_module" is enabled and then restart the server

step 4. delete cache folder under var/cache

The above steps are working for me.I hope this will work for you also.

Let me know if you still facing any problem.

• Nathan Merrill: If you are developing locally, this is not the solution you want. This requires you to redeploy static content every time you make a change to views. Make sure that you are in developer mode, and that symlinks are working.
• samumaretiya: @NathanMerrill thanks for your feedback. I guess, this only problem when you made theme level change, However I am getting perfect result without deploying locally each and every time.
• Nathan Merrill: It totally depends on what you are doing. If you are making changes in the view folder (not just creating new files), you will need to deploy.
• samumaretiya: @NathanMerrill, if you would like to have more conversation you can reach me out at skype : samumaretiya or may be we can have conversation over google hangout [email protected]
• Mike Nguyen: Work like a charm !!!

Answer 3

My issue was that I had gotten a little too excited with my pub/static and pub/media "cache clearing" and accidentally deleted the .htaccess file in pub/static.

A quick fix was to pull in a fresh /magento2ce/pub/static/.htaccess and flush the cache and Bob's your uncle. No more CSS issues.

Hope this helps. It'd be awesome if there was a way to remove files and somehow make sure other files didn't get removed, like a .gitignore for system linux rm -rf use. Maybe one day...

PLEASE NOTE: this is only for the CSS issues, sorry I'm not helping with the missing JS problem.

• Ares: You are a hero!

Answer 4

I've had this problem with V2.1.3 where the signature is default set to true. This means that the urls have "version" in the path name. For example the file path should be:-

pub/static/adminhtml/Magento/backend/en_US/mage/adminhtml/events.js

But comes through as:-

pub/static/version14043395384/adminhtml/Magento/backend/en_US/mage/adminhtml/events.js

To change this, open up file:-

source\vendor\magento\module-theme\etc\config.xml

And change the default value to zero:-

<config>
 <default>
 <dev>
 <static>
 <sign>0</sign>
 </static>
 </dev>
 </default>
</config>

Answer 5

I had this issue as well, but it ended being a core_config_data issue. All my assets were routing to the https URL, despite my having set that url to be http.

There's a field in core_config_data called web/secure/use_in_frontend which was set to 1. I set it to 0, cleared cache, and it worked properly.

• Thomas Harding: No way! I kid you not, I've been having this trouble for years with one of the older development servers - I put it down to it being badly configured (because none of my static assets were updating in the browser). As it turns out, the browser was looking for the reference in https, not http where it was actually visible. So while it's still misconfigured, you've helped me enormously by pointing out that this can happen. I switched the url to http and everything loads now. Thanks :D :D

Answer 6

I ran into this issue on several Magento 2 installations in production.

Assuming you did this first from the command line.

php bin/magento setup:static-content:deploy from <magento_install_dir>

Then change file permissions to 755 on the following directories:

/pub/

/pub/static/

/pub/static/frontend/

/pub/static/adminhtml/

/pub/static/_requirejs/

Voila! CSS/JS files load perfectly.

Answer 7

I had this problem when using language files.

When using a language, you need to include the system language:

php bin/magento setup:static-content:deploy nl_NL

Answer 8

After navigating to the folder dev/tools/Magento/Tools/View and running this in the command line solved the issue.

php deploy.php

• Tobias Hartmann: damn hoped that'll fix my Problem, too but dev/tools/Magento/Tools/View does not exists in my installation
• amitshree: @TobiasHartmann: Have you checked mod_rewrite is enabled or not? Also all directories/files are having correct permission or not?

Answer 9

1- Modify the app/etc/di.xml file by changing the following content:

Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

To:

Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

2- sudo php /var/www/html/magento2ce/bin/magento setup:static-content:deploy

Answer 10

Please follow the steps below to get rid of this issues.

1) Download the Magento 2.

2) Extract this in your www OR htdocs directory.

3) Install the magento. Do not use localhost, use 127.0.0.1 in store url and admin url.

4) After successful installation DO NOT RUN MAGENTO.

5) Now delete the cache / session of magento 2. Go to the below mentioned paths and delete the files.

Magento Root > var > cache > Delete all files
Magento Root > var > page_cache > Delete all files
Magento Root > var > session > Delete all files

6) Change the behavior of symlinks for some static resources as mentioned below:-

When Magento 2 is not in production mode, it will try to create symlinks for some static resources on local server. We have to change that behavior of Magento 2 by going to edit ROOT > app > etc > di.xml file. Open up di.xml in your favorite code editor, find the virtualType name="developerMaterialization" section. In that section below, you will find an item <item name="view_preprocessed" xsi:type="object"> which needs to be modified. You can modify it by changing the following content:

Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

To:

Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

7) Delete all the files except **.htaccess**

Magento Root > pub > static > Delete all files except **.htaccess**

ITS DONE. Now you may run the magento Front and Backend URL

Answer 11

Run the following commands:

php bin/magento setup:static-content:deploy
php bin/magento setup:upgrade
php bin/magento setup:di:compile 
php bin/magento cache:clean

Answer 12

Not need to edit di.xml. We were facing js loading errors while symlinks enabled.
Lots of;

TypeError: $.widget is not a function

Just close symlink

Advanced> Developer> Template Settings> Allow Symlinks> No

After closing it, may be not deployed resources loads slowly for first time but js errors gone.

Answer 13

Version issue in css and js urls can be resolved by reading this issue.

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

enter image description here

Answer 14

Also consider that changing your store's locale could have this effect if you don't have that locale available within your own theme. I've seen it happen a few times.

Answer 15

You can follow these instructions:

If there is any version####### like below method will surely help. http://localhost/magento2/pub/static/version1511270229/frontend/Magento/luma/en_US/mage/calendar.css

Stores>Configuration>Advanced>Developer>Sign Static Files(Yes->No)

IF you have access the database then execute this command:

Insert core_config_data (config_id, scope, scope_id, path, value) values (null, 'default', 0, 'dev/static/sign', 0);

Remove the cache and reload the page. These two simple steps helped me to solve the issues of js and css file path.

Answer 16

I was just missing the .htaccess inside pub/static folder. It needs to be there.

• Rama Chandran M: This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
• OZZIE: @RamaChandranM I had the same "symptoms" on my magento site, googled it and found this question. I later found a solution to my problem. Why wouldn't I share a possible solution with others? Even if that wasn't the authors specific problem here.. Really weird comment!

Answer 17

Faced this issue many times. First thing first pub/static should have .htaccess file which has the url rewrite for the version number included in static assets url.

Answer 18

In my case, in apache config I change AllowOverride from None to All in respective Directory section.

Answer 19

If you are facing problem of css and js page load design after installation in magento2 please follow the following step-:

open the terminal and navigate to magento web root

 $ cd /var/www/html/magento2 

Step 1.

 $ php bin/magento setup:static-content:deploy 

Step 2.

 $ php bin/magento indexer:reindex

Step 3.

make sure apache "rewrite_module" is enable and then restart the server

Step 4.

 $ chown -R www-data:www-data /var/www/html/magento2 

Step 5.

 $ cd <your Magento install dir> 
find . -type f -exec chmod 644 {} \; // 644 permission for files
find . -type d -exec chmod 755 {} \; // 755 permission for directory 
find ./var -type d -exec chmod 777 {} \; // 777 permission for var folder 
find ./pub/media -type d -exec chmod 777 {} \;
find ./pub/static -type d -exec chmod 777 {} \;
chmod 777 ./app/etc
chmod 644 ./app/etc/*.xml
chown -R :<web server group> .
chmod u+x bin/magento

Step 6.

delete cache folder under var/cache

The above step working. I hope this will work for you also.

• omerts: Step 5 imposes a security risk, as making all files and folders with 777 permissions is dangerous. See: superuser.com/questions/1034079/…
• Arvind Rawat: fixed file permission security risk

Answer 20

In my case nothing worked properly. I installed Magento 2.4.5-p1 on Windows via XAMPP. I had to change \vendor\magento\framework\App\StaticResource.php because of the directory separator. Further information here (German).