The command entered is not valid for 'text/css'. It is possible that there was a typo or the command is from a module that is not configured in

We are currently using Laravel 5.4 on a Linux server with Apache. Recently, we started encountering the following error in our /var/log/httpd/error_log file even though there have been no changes made to our .htaccess file:

/var/www/html/public/.htaccess: Invalid command 'text/css', possibly misspelled or not defined by a module included in the server configuration

This is what our entire .htaccess file looks like:

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

    # CSS
    ExpiresByType text/css                              "access plus 1 year"

    # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

    # Favicon (cannot be renamed!)
    ExpiresByType image/x-icon                          "access plus 1 week"

    # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

    # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

    # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"

    # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

    # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    # Web fonts
    ExpiresByType application/font-woff2                "access plus 1 month"
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

<IfModule mod_rewrite.c>

    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Force traffic through https
    # RewriteCond %{HTTPS} on

    # Redirect non-www urls to www
    # Force through www for SSL certificate coverage (except IP)
    RewriteCond %{HTTP_HOST} !^[0-9]+\.
    RewriteCond %{HTTP_HOST} ^[^.]+\.[^.]+$
    RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # End of Apache Rewrite Rules

</IfModule>

# BEGIN Compression
<IfModule mod_filter.c>

    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/ld+json
    AddOutputFilterByType DEFLATE application/manifest+json
    AddOutputFilterByType DEFLATE application/rdf+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/schema+json
    AddOutputFilterByType DEFLATE application/vnd.geo+json
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/eot
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE image/bmp
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/vnd.microsoft.icon
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/cache-manifest
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/vcard
    AddOutputFilterByType DEFLATE text/vnd.rim.location.xloc
    AddOutputFilterByType DEFLATE text/vtt
    AddOutputFilterByType DEFLATE text/x-component
    AddOutputFilterByType DEFLATE text/x-cross-domain-policy
    AddOutputFilterByType DEFLATE text/xml

</IfModule>
# END of Compression

Answer №1

Today, I encountered this error while setting up a new development environment. Despite trying various solutions, I came across an article that suggested the issue might be due to having too many lines in the filter block. According to the article:

Symptoms

The website fails to load and displays a 500 type error.

In the /var/www/vhosts/example.com/logs/error_log file, there is a line resembling this error message:

[core:alert] /var/www/vhosts/example.com/httpdocs/.htaccess: Invalid command 'text/css', perhaps misspelled or defined by a module not included in the server configuration

Cause

The cause of the problem is an excessively long declaration of the AddOutputFilterByType expression in the .htaccess file.

To learn more, you can refer to the following resources:

https://github.com/ezekg/theme-juice-vm/issues/4

Resolution

To resolve the issue, modify the section as follows:

<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" "application/javascript" "application/json" "application/ld+json" "application/manifest+json" "application/rdf+xml" "application/rss+xml" "application/schema+json" "application/vnd.geo+json" "application/vnd.ms-fontobject" "application/x-font-ttf" "application/x-javascript" "application/x-web-app-manifest+json" "application/xhtml+xml" "application/xml" "font/eot" "font/opentype" "image/bmp" "image/svg+xml" "image/vnd.microsoft.icon" "image/x-icon" "text/cache-manifest" "text/css" "text/html" "text/javascript" "text/plain" "text/vcard" "text/vnd.rim.location.xloc" "text/vtt" "text/x-component" "text/x-cross-domain-policy" "text/xml"
</IfModule>

Implementing this change resolved the issue for me.

Answer №2

We've successfully identified a corresponding request in the /var/log/httpd/access_log for each instance of the "Invalid command" errors:

[15/Jun/2017:10:22:15 -0500] "POST /login HTTP/1.1" 404 632 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"

Since yesterday morning, we haven't encountered this error even when accessing the page multiple times. In an effort to resolve the issue, we purged the cache, cleared all sessions, and performed a server restart immediately after our initial query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a logo be adjusted in a bootstrap navbar when the browser is resized or when the user zooms in or out?

I have been struggling for the past 4 hours to find a solution to scale an image when the browser is resized. The website I am working on uses bootstrap and the image is located in the navbar-brand section. Typically, navbar-brand is used for a logo, but i ...

Creating a Sticky Top Navigation Bar with Bootstrap

I'm currently working on a Bootstrap website and trying to make the navbar stick to the top. However, it seems like the class sticky-top isn't working as expected. Below is the code for the navbar: <div class="row"> <div class="col ...

Creating a circular text element with text both in the center and around the edges using CSS

I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...

The navigation bar is missing from the screen

Where is the navbar in this snippet? Did I overlook something important? If so, what? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar nav ...

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...

PNG can only be adjusted to a smaller size using IMG-Responsive, as opposed to scaling from small to large

I'm facing an issue when trying to adjust the size of a PNG image with a transparent background that has a width of 279 pixels and height of 432 pixels, using the img-responsive class in Bootstrap3. The Issue: Every time I attempt to upload the pn ...

Adjust focus dynamically on pressing enter in an HTML form

I am currently working on adjusting the functionality of my HTML input form to change focus upon pressing the enter key. I need to trigger the saveValue() function from the input field when the enter key is pressed and then move the focus to the next input ...

Only collapsing the uppermost level in the CSS hierarchy

Within my template, I have utilized the same tree structure code that was referenced in a previous question found at this link. The solution provided in that question initializes the page with the entire tree collapsed (view jsfiddle). My goal is to modif ...

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

Is there a way to move the navbar to the right side of the screen?

How do I create a navigation menu that takes up half of the screen on the left side while allowing for scrolling on the right side without moving the navigation? What I am aiming for is similar to the images linked below: example example I attempted to u ...

Stopping a parent's event from firing when clicking on child elements without interfering with the child element events

Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...

What is the best way to showcase images in a horizontal layout with the help of PHP and

Does anyone know how to retrieve images from a MySQL database and display them in rows of three horizontally, while also having a relevant image show on top? I'm struggling with this task. Below is the code snippet for the main div: <div class="co ...

Applying a border using CSS based on a condition, and removing it upon clicking

I have a requirement where I need to add a border around objects when clicked, and remove the border when clicked again. Despite using an if condition with .css, I couldn't make it work as expected. When I tried to print the border width using alert f ...

What is the best way to apply a CSS class to my anchor tag using JavaScript?

I have a good grasp of using JavaScript to insert an anchor element into my webpage. For instance, var userName_a = document.createElement('a'); However, I am interested in adding a style name to that same element as well. I attempted the follo ...

Custom control experiencing issues with vertical alignment

I am currently working on creating a basic filter bar that includes a custom control element. My intention is to align the element vertically, but so far, I have been unsuccessful. Below is the code for the filter bar: <div class="bg-light p-3 card"&g ...

Tips for concealing overflowing CSS content

How can I prevent CSS content from overflowing? I am trying to display a price tag in the CSS element, but it is protruding out of my card. .content{ content:''; position: absolute; left: 309px; ...

What is the best way to set the width of an inner element as a percentage of the Body's width?

Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width. Is there a way to specify the width of an inner element as a percentage of the overall Body width, r ...

What is the best way to enable this image lightbox to function seamlessly with both horizontal and vertical images?

Looking to create a responsive image lightbox? After starting from an example on W3Schools (https://www.w3schools.com/howto/howto_js_lightbox.asp), I ran into issues with portrait oriented images. Ideally, the solution should handle both landscape (e.g., 1 ...

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

The BorderWidth property is set to 2px, however, it is not visible on the

Struggling with adding a border to a div in my app built with react and material-ui. Here is the snippet of code I've been working with: <div className={classes.search}> ... </div> search: { ... borderWidth: '2px', borde ...