laravel-mix: Vue 2.5.6 error on compiling

  • Laravel Mix Version: #.#.# laravel-mix@1.6.1
  • Node Version (node -v): v6.11.3
  • NPM Version (npm -v): 5.5.1
  • OS: MacOs 10.12.6 (Sierra)

Description:

I have up and running project in Vue 2.5.3 with laravel mix but now I am trying to upgrade it to latest i.e. 2.5.6 it gives error on compiling. I tried nuke node_modules and re-install again same error it says Vue packages version mismatch:

- vue@2.5.5
- vue-template-compiler@2.5.3

Steps To Reproduce:

Install latest Vue Js with laravel mix 1.6.1 and compile you vue files it will throw error

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 16 (6 by maintainers)

Most upvoted comments

This was an issue for me using vue@2.5.8, with yarn. My resolution was to remove the yarn.lock and node_modules, then rerun yarn install. Error was resolved after that. Looks like a conflict was introduced into the yarn.lock.

Manually install vue-template-compiler should fix your problem.

e.g. npm install -D vue-template-compiler@latest

@ruchern It works with Vue 2.5.3

But If I upgrade it breaks regardless off that Profile.vue any .vue file does not get compiled

here is my webpack mix its default only

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.options({
    processCssUrls: false
});

// uglify: 
//    { sourceMap: true,
//      compress: { warnings: false, drop_console: true },
//      output: { comments: false } },
//   cleanCss: {},
//   webpackConfig: 

if (!mix.inProduction() ) {
    Config.sourcemaps = 'source-map';
}
//console.log(Config);

mix.js('resources/assets/js/app.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css');


mix.browserSync({
    proxy: 'project.dev',
    logConnections: false,
    files: [
        // 'resources/',
        // '!app/' // Note the ! here
        'resources/views/**/*.php',
        'public/js/**/*.js',
    ]
});

// mix.js('src/app.js', 'dist/')
//     .sass('src/app.scss', 'dist/');

// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
// mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
// mix.less(src, output);
// mix.stylus(src, output);
// mix.browserSync('my-site.dev');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });