Combining Laravel + Vue.js I got Error: "Module not found: Error: Can't resolve './vue/app'"

Question

I did everything exactly as in this video https://www.youtube.com/watch?v=UHSipe7pSac but I got this error i cmd :( "ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'D:\osp\domains\laravel-todolist\resources\js' webpack compiled with 1 error" and error in browser console "Uncaught Error: Cannot find module './vue/app'".

Here is my short overview video with my code https://www.youtube.com/watch?v=zZqYJaIgau4

I created folder /vue/ in /resources/js/ folder and put here file 'app.vue' with code

<template><div>Hello</div></template> <script>export default {}</script>

Then in /resources/js/app.js file I'm importing Vue instance and my template file.

require('./bootstrap');
import Vue from 'vue';
import App from './vue/app';

const app = new Vue({
    el: '#app',
    components: { App }
})

Please help understand where is the problem :(

jhit · Accepted Answer · 2021-02-09 16:59:01Z

15

You're probably using Vue3 with Laravel Mix 6 so, in short, in your webpack.mix.js, instead of this:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Use this:

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

answered Feb 9, 2021 at 16:59

jhit

3474 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

web user Over a year ago

Thanks. It's work. But it's not 3, just old good vue 2 :)

Dharman · Accepted Answer · 2021-07-23 15:13:54Z

2

I had a similar issue from the same tutorial and tried the solution here but my error was still not resolved.

this is what I did. I used - 1.

mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
    //
]);

1. I install npm again with npm install because I was told some packages weren't installed.
1. I install vue again with npm install vue,
1. I did npm run dev and finally npm run watch.

edited Jul 23, 2021 at 15:13

Dharman♦

33.9k27 gold badges103 silver badges156 bronze badges

answered Jul 23, 2021 at 15:07

Benjamin Andoh

3452 silver badges8 bronze badges

Comments

Engineer sam Mundia · Accepted Answer · 2021-10-13 16:23:15Z

Delete the node_modules folder in your project folder.
Delete the npm and npm-cache folders in the C:\Users\AppData\Roaming and the C:\Users\AppData\Local paths.
Reinstall the node modules afresh using npm install

Install the Vue package npm install vue. In the webpack.mix.js file replace this (since it is mix version 6.0)

  mix.js('resources/js/app.js', 'public/js')
 .postCss('resources/css/app.css', 'public/css', [
  //
  ]);

with

      <code>mix.js('resources/js/app.js', 'public/js').vue()
     .postCss('resources/css/app.css', 'public/css', [
     //
     ]);

Run npm run hot. The error should be gone.

Suraj Rao · Accepted Answer · 2021-11-03 04:38:36Z

0

Replace

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

by

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Run the below in the command prompt
```
 npm i vue-loader 
```

edited Nov 3, 2021 at 4:38

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 3, 2021 at 4:33

Sergio Matias Urquin

1

Comments

SeriesBlue · Accepted Answer · 2022-01-29 07:31:09Z

In my webpack.mix.js file i replaced this

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    //
]);

with this

mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
    //
]);

But i was still getting errors when i run npm run dev or npm run watch after hours of searching it turned out i was using vue-loader 17 with Vue 2. If you want to use Vue 2 the latest supported version of vue-loader is 15, vue-loader 16 and up is purely made for Vue 3. I downgraded to vue-loader 15.9.8 and everything runs green.

Collectives™ on Stack Overflow

Combining Laravel + Vue.js I got Error: "Module not found: Error: Can't resolve './vue/app'"

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related