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

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.

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.

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.

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.

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

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

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.

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.

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).