Node module file will not load, maybe a rewrite error?

I am trying to learn VueJS and Twig. I made my own (just for fun) MVC and that is working fine, the problem lies in not being able to include JS or CSS files.

When I press CTRL+U and view my source, I click on my javascript file and then the page reloads with the correct URL but I will still see my index pagina…

I have no clue what is causing this and -or how to fix this. Does anyone have any ideas on how to fix this? I guess it has to do with rewriting but I am not sure. I am using Xampp at the moment.

root
htaccess
public
htaccess

My root htaccess file is:

<IfModule mod_rewrite.c>
    Options -Multiviews
    RewriteEngine On
    RewriteRule ^$ public/ [L]
    RewriteRule (.*) public/$1 [L]
</IfModule>

and the htaccess file in my public folder is

<IfModule mod_rewrite.c>
    Options -Multiviews
    RewriteEngine On
    RewriteBase /public
    RewriteCond %{REQUEST_FILENAME}% !-d
    RewriteCond %{REQUEST_FILENAME}% !-f
    RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
</IfModule>

My layout (index) page is this:

<!DOCTYPE html>
<html>
<head>
    <title>Beta</title>

    <link rel="stylesheet" href="../../public/css/style.css" />
    <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../public/js/scripts.js"></script>

</head>
<body>

{% block content %}{% endblock %}

</body>
</html>

As said, when I click on my CSS or JS file I see this in the source:

<!DOCTYPE html>
<html>
<head>
    <title>Beta</title>

    <link rel="stylesheet" href="../../public/css/style.css" />
    <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../public/js/scripts.js"></script>

</head>
<body>

    Hello there!

</body>
</html>

Hope someone can help me out!

UPDATE:
I changed my htaccess to this:

<IfModule mod_rewrite.c>
    Options -Multiviews
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.*)$ index.php?/$1 [L,NC]
</IfModule>

And now my CSS and JS are visible, but the node_modules (Vue) still shows this weird behavior of just showing the index page’s source code.

When I look in my developers console it does say “vue.min.js status 200” i.e. it has been loaded succesfully, but when I check its response all I get is my index.php content / code.

Obvious rookie mistake!

You cannot include something from the “node_modules” folder. I used GULP to include and compile everything to one of my publically accessible folders and now I can include them perfectly fine!

3 Likes

Yes, that is what *legacy tools like gulp or modern tools like webpack are for - bundling css and javascript.

Slightly off topic:
It is good practice not to use <IfModule...> and </IfModule>. Either the module is loaded, in which case you don’t need it, or it isn’t, in which case you can get rid of the entire section.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.