import dependency from child_folder/node_modules doesn't work

Question

By default node_modules folder is under the root directory of my Laravel project and it's working fine. I can compile the scripts with npm run dev and there is no error.

However according to the project folder structure, I move node_modules folder into a child folder called backend.

Here, I also moved the files like webpack.mix.js, package.json into backend folder and run npm install again inside it. But I keep my resources and public folders as original and link them with relative path via backend folder.

The folder structure looks like this

Now, if I run npm run dev inside backend folder, it complains many errors like can't resolve '@babel/runtime/regenerator'.

But if I make a symbolic node_modules inside root folder which is linked to backend/node_modules, it works fine and I can compile the scripts without error.

My question is - How can I compile the scripts from child folder without making a symbolic like this? Probably it doesn't know where node_modules folder is located.

Croup

Answer 1

As laravel-mix is based on webpack. I add the modules path inside webpack config as below to make all import knows where the node_modules folder is located.

mix.webpackConfig({
  resolve: {
    modules : [
        path.resolve("./node_modules")
    ]
  }
});

There is no more can't resolve error.

Croup

As of Laravel 9, MIX has been deprecated in favor of Vite. Still looking for the new way of doing this. Vite has replaced Laravel Mix in new Laravel installations. For Mix documentation, please visit the official Laravel Mix website. If you would like to switch to Vite, please see our Vite migration guide. – Makeweight