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

Question

Write an answer

Yarn error with React native Navigation: "Module not found: Can't resolve 'react-navigation'"

React: "Module not found: Can't resolve" Path error

Module not found: Error: Can't resolve '@angular/flex-layout' in '/app'

React app deployment to Netlify : Module not found: Error: Can't resolve './pages/HomePage' in '/opt/build/repo/src'

Ionic jspdf error cannot Module not found: Error: Can't resolve 'jspdf'

Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

Module not found: Error: Can't resolve 'crypto'

Module not found: Error: Can't resolve 'http' in React

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server'

Module not found: Can't resolve 'fs' in Next.js application

Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\

angular 13: Module not found: Error: Can't resolve 'rxjs/operators'

Module not found: Error: Can't resolve '@mui/icons-material/SearchOutlined'

Module not found: Error: Can't resolve 'fs' in dotenv - upgrading to react 17

How to fix Module not found: Can't resolve '@heroicons/react/solid' in react app?

Module not found: Error: Can't resolve 'capacitor.config.json' in 'node_modules\@codetrix-studio\capacitor-google-auth\dist\esm'

Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css'

I already installed @react-navigation/stack but i got error: Error: Unable to resolve module `@react-navigation/stack` from `App.js`:

Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project

web user · Answer 1

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', [
        //
    ]);

Benjamin AndohAnswered 1 years ago · Answer 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.

Engineer sam MundiaAnswered 1 years ago · Answer 3

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.

ProgrammerAnswered 1 years ago · Answer 4

I get the following error if I try to npx mix:

ERROR in ./resources/js/app.js 1:0-22
Module not found: Error: Can't resolve 'vue' in 'C:\myproject\resources\js'

ERROR in ./resources/js/store.js 1:0-22
Module not found: Error: Can't resolve 'vue' in 'C:\myproject\resources\js'

My webpack.mix.js look like this:

let mix = require('laravel-mix'),
    path = require('path');

mix.alias({
    'vue$': 'vue/dist/vue.esm.js',
    '@': path.resolve('resources'),
    'ext': path.resolve('node_modules'),
})

mix.vue({ version: 2, extractVueStyles: true });
mix.js('resources/js/app.js', 'dist')
mix.sass('resources/scss/app.scss', 'dist');

I just use the import statement in my app.js:

import Vue from 'vue';
import store from './store'

...

new Vue({
	router,
	store
}).$mount('#app');

Just a npx mix... because I think I have a configuration problem. Btw.: If I try to use the LiveReloadPlugin it also drops the following error (maybe this info helps):

[webpack-cli] TypeError: compiler.plugin is not a function
    at LiveReloadPlugin.apply

I run into "Uncaught TypeError: Vue is not a constructor" with a very basic webpack.mix.js:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .vue()
   .sass('resources/sass/app.scss', 'public/css');

ProgrammerAnswered 1 years ago · Answer 5

Usually, if you were displaying your views using laravel blade, all you need to do to display errors after form submission is to have something like:

@if ($errors->any())    <div class="alert alert-danger">        <ul>            @foreach ($errors->all() as $error)                <li>{{ $error }}</li>            @endforeach        </ul>    </div>@endif

At this point, I expect that you have a validation code in your controller along the line of:

// TestController.php<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class TestController extends Controller{    public function showPage(){     return view('test');    }public function testValidation(Request $request){     $this->validate($request, [      'email' => 'required|string|email|max:200',      'name' => 'required|string|max:200',      'description' => 'required|string|max:300'     ]);    }}

I’ll also assume you have a view that contains a form like:

// test.blade.php<!DOCTYPE html><html><head> <title>Validation test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script></head><body> <div class="container-fluid" id="page">  <div class="row">   <div class="col-3"></div>   <div class="col-6">    <div class="card">     <h3 class="card-header">Validation form test</h3>     <div class="card-body">      <form>       <div class="form-group">        <input type="text" name="email" v-model="email" placeholder="email@example.com" class="form-control">       </div>       <div class="form-group">        <input type="text" name="name" v-model="name" placeholder="Name" class="form-control">       </div>       <div class="form-group">        <input type="text" name="description" v-model="description" placeholder="Write a short description" class="form-control">       </div>       <div class="form-group">        <center>         <button class="btn-success btn" type="button" @click="submitForm">Submit</button>         </center>               </div>      </form>          </div>    </div>       </div>   </div>   </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></body></html>

We create a vue component (that can be reused)

<script>        Vue.component('validation-errors', {            data(){                return {                                    }            },            props: ['errors'],            template: `<div v-if="validationErrors">                        <ul class="alert alert-danger">                            <li v-for="(value, key, index) in validationErrors">@{{ value }}</li>                        </ul>                    </div>`,            computed: {                validationErrors(){                    let errors = Object.values(this.errors);                    errors = errors.flat();                    return errors;                }            }        })    </script>

2. Then we create a vue instance to attach the component to:

let vm = new Vue({el: "#page",  data: {    name: '',    email: '',    description: ''   },   methods: {    submitForm(){     axios.post('/test', {      name: this.name,      email: this.email,      description: this.description     }).then(response => {      console.log('successful');     }).catch(error => {     if (error.response.status == 422){       this.validationErrors = error.response.data.errors;      }})    }   }  })

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

Write an answer

Recent Questions on laravel

Programming Languages

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

Write an answer

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

Recent Questions on laravel

Programming Languages