Cannot find module 'vue-loader/lib/plugin' - version 16.0.0-beta.3

[ljcremer]

Version

16.0.0-beta.3

Reproduction link

https://github.com/xkjyeah/vue-google-maps

Steps to reproduce

npm i vue-loader@16.0.0-beta.3
npm run build:webpack

What is expected?

Project to build succesfully

What is actually happening?

C:\Trooptravel\Development\plugins\tt-vue3-google-maps>npm run build:webpack

tt-vue3-google-maps@0.12.1 build:webpack C:\Trooptravel\Development\plugins\tt-vue3-google-maps
cross-env NODE_ENV=production webpack --progress --hide-modules

C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\cli.js:93
throw err;
^

Error: Cannot find module 'vue-loader/lib/plugin'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object. (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\config\webpack.production.config.js:2:25)
at Module._compile (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object. (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\webpack.config.js:4:16)
at Module._compile (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach ()
at module.exports (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at yargs.parse (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\cli.js:71:45)
at Object.parse (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\yargs\yargs.js:567:18)
at C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\cli.js:49:8
at Object. (C:\Trooptravel\Development\plugins\tt-vue3-google-maps\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tt-vue3-google-maps@0.12.1 build:webpack: cross-env NODE_ENV=production webpack --progress --hide-modules
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tt-vue3-google-maps@0.12.1 build:webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Leonard Cremer\AppData\Roaming\npm-cache_logs\2020-06-23T08_19_07_989Z-debug.log

---

I am trying to convert the project from Vue2 to Vue 3

[haoqunjiang]

- const VueLoaderPlugin = require('vue-loader/lib/plugin')
+ const { VueLoaderPlugin } = require('vue-loader')

[RinkAttendant6]

Am I looking at an old version or does the documentation need to be updated?

https://vue-loader.vuejs.org/guide/#manual-setup

[haoqunjiang]

The documentation needs to be updated

[beyerenrico]

- const VueLoaderPlugin = require('vue-loader/lib/plugin')
+ const { VueLoaderPlugin } = require('vue-loader')

I added those changes to my gulpfile.babel.js but the terminal throws this error:

PATH/gulpfile.babel.js:143
    new VueLoaderPlugin()],
    ^

TypeError: VueLoaderPlugin is not a constructor
    at Object.<anonymous> (PATH/gulpfile.babel.js:138:9)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Module._compile (PATH/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Object.newLoader [as .js] (PATH/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at execute (PATH/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! foundationpress@2.10.6 build: `gulp build --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foundationpress@2.10.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     PATH/.npm/_logs/2021-03-11T09_30_55_630Z-debug.log

[haoqunjiang]

@enrico3498 any reproductions? Which version of vue-loader are you using?

[beyerenrico]

@sodatea I am using the following dependencies with versions:
vue@2.6.12
vue-loader@14.2.4
vue-template-compiler@2.6.12

The contents of my gulpfile.babel.js:

'use strict';

import plugins       from 'gulp-load-plugins';
import yargs         from 'yargs';
import browser       from 'browser-sync';
import gulp          from 'gulp';
import rimraf        from 'rimraf';
import yaml          from 'js-yaml';
import fs            from 'fs';
import dateFormat    from 'dateformat';
import webpackStream from 'webpack-stream';
import webpack2      from 'webpack';
import named         from 'vinyl-named';
import log           from 'fancy-log';
import colors        from 'ansi-colors';
import autoprefixer  from 'autoprefixer';

const { VueLoaderPlugin } = require('vue-loader')

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Check for --development flag unminified with sourcemaps
const DEV = !!(yargs.argv.dev);

// Load settings from settings.yml
const { BROWSERSYNC, COMPATIBILITY, REVISIONING, PATHS } = loadConfig();

// Check if file exists synchronously
function checkFileExists(filepath) {
  let flag = true;
  try {
    fs.accessSync(filepath, fs.F_OK);
  } catch(e) {
    flag = false;
  }
  return flag;
}

// Load default or custom YML config file
function loadConfig() {
  log('Loading config file...');

  if (checkFileExists('config.yml')) {
    // config.yml exists, load it
    log(colors.bold(colors.cyan('config.yml')), 'exists, loading', colors.bold(colors.cyan('config.yml')));
    let ymlFile = fs.readFileSync('config.yml', 'utf8');
    return yaml.load(ymlFile);

  } else if(checkFileExists('config-default.yml')) {
    // config-default.yml exists, load it
    log(colors.bold(colors.cyan('config.yml')), 'does not exist, loading', colors.bold(colors.cyan('config-default.yml')));
    let ymlFile = fs.readFileSync('config-default.yml', 'utf8');
    return yaml.load(ymlFile);

  } else {
    // Exit if config.yml & config-default.yml do not exist
    log('Exiting process, no config file exists.');
    log('Error Code:', err.code);
    process.exit(1);
  }
}

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "images", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
    const postCssPlugins = [
        // Autoprefixer
        autoprefixer()

        // UnCSS - Uncomment to remove unused styles in production
        // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
    ].filter(Boolean);

    return gulp.src([(PATHS.theme + '/src/assets/scss/app.scss')])
        .pipe($.sourcemaps.init())
        .pipe(
            $.sass({
                includePaths: PATHS.sass
            }).on('error', $.sass.logError)
        )
        .pipe($.postcss(postCssPlugins))
        .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
        .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest(PATHS.dist + '/assets/css'))
        .pipe(browser.reload({ stream: true }));
        // .pipe($.sourcemaps.init())
        // .pipe($.sass({
        // includePaths: PATHS.sass
        // })
        // .on('error', $.sass.logError))
        // .pipe($.postcss(postCssPlugins))

        // .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
        // .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        // .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV))
        // .pipe(gulp.dest(PATHS.dist + '/assets/css'))
        // .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
        // .pipe(gulp.dest(PATHS.dist + '/assets/css'))
        // .pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
const webpack = {
  config: {
    module: {
      rules: [
        {
          test: /.js$/,
          loader: 'babel-loader',
          exclude: /node_modules(?![\\\/]foundation-sites)/,
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
      ],
    },
    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ],
    externals: {
      jquery: 'jQuery',
    },
  },

  changeHandler(err, stats) {
    log('[webpack]', stats.toString({
      colors: true,
    }));

    browser.reload();
  },

  build() {
    return gulp.src(PATHS.entries)
      .pipe(named())
      .pipe(webpackStream(webpack.config, webpack2))
      .pipe($.if(PRODUCTION, $.uglify()
        .on('error', e => { console.log(e); }),
      ))
      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
  },

  watch() {
    const watchConfig = Object.assign(webpack.config, {
      watch: true,
      devtool: 'inline-source-map',
    });

    return gulp.src(PATHS.entries)
      .pipe(named())
      .pipe(webpackStream(watchConfig, webpack2, webpack.changeHandler)
        .on('error', (err) => {
          log('[webpack:error]', err.toString({
            colors: true,
          }));
        }),
      )
      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
  },
};

gulp.task('webpack:build', webpack.build);
gulp.task('webpack:watch', webpack.watch);

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src(PATHS.theme + '/src/assets/images/**/*')
    .pipe($.if(PRODUCTION, $.imagemin([
      $.imagemin.jpegtran({
        progressive: true,
      }),
      $.imagemin.optipng({
        optimizationLevel: 5,
      }),
			$.imagemin.gifsicle({
        interlaced: true,
      }),
			$.imagemin.svgo({
        plugins: [
          {cleanupAttrs: true},
          {removeComments: true},
        ]
      })
		])))
    .pipe(gulp.dest(PATHS.dist + '/assets/images'));
}

// Create a .zip archive of the theme
function archive() {
  var time = dateFormat(new Date(), "yyyy-mm-dd_HH-MM");
  var pkg = JSON.parse(fs.readFileSync('./package.json'));
  var title = pkg.name + '_' + time + '.zip';

  return gulp.src(PATHS.package)
    .pipe($.zip(title))
    .pipe(gulp.dest('packaged'));
}

// PHP Code Sniffer task
gulp.task('phpcs', function() {
  return gulp.src(PATHS.phpcs)
    .pipe($.phpcs({
      bin: 'wpcs/vendor/bin/phpcs',
      standard: './codesniffer.ruleset.xml',
      showSniffCode: true,
    }))
    .pipe($.phpcs.reporter('log'));
});

// PHP Code Beautifier task
gulp.task('phpcbf', function () {
  return gulp.src(PATHS.phpcs)
  .pipe($.phpcbf({
    bin: 'wpcs/vendor/bin/phpcbf',
    standard: './codesniffer.ruleset.xml',
    warningSeverity: 0
  }))
  .on('error', log)
  .pipe(gulp.dest('.'));
});

// Start BrowserSync to preview the site in
function server(done) {
  browser.init({
    proxy: BROWSERSYNC.url,

    ui: {
      port: 8080
    },

  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch(PATHS.theme + '/src/assets/scss/**/*.scss', sass)
    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
  gulp.watch(PATHS.theme + '**/*.php', reload)
    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
  gulp.watch(PATHS.theme + '/templates/**/*.twig', reload)
    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
  gulp.watch(PATHS.theme + '/src/assets/images/**/*', gulp.series(images, reload));
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
  gulp.series(clean, gulp.parallel(sass, 'webpack:build', images, copy)));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, gulp.parallel('webpack:watch', watch)));

// Package task
gulp.task('package',
  gulp.series('build', archive));

[haoqunjiang]

@enrico3498 There's no VueLoaderPlugin in vue-loader v14. It's added in v15. See https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

[beyerenrico]

@sodatea alright thank you! Installed the latest version and now it works