Webpack config help - console error

[bedakb]

Hello

I’m trying to setup the webpack module bundler, to make my code more modular, and easier to work with.Basically I use VueJS, so main point is use .vue extension files (components)

The error that I got is

This is mine webpack.config.js file

// Configure Webpack bundler
module.exports = {

	entry: './js/shop/app.js',
	
	output: {
		filename: './js/shop/build.js'
	},

	module: {
		// Configure vue-loader and Babel loader to compile ES6.
		loaders: [{
			// Use vue loader
			test: /\.vue$/,
			loader: 'vue'
		},
		{
			// Compiling ES2015 with Babel
	                test: /\.js$/,
	                loader: 'babel',
	                exclude: /node_modules/
		},
		{
			// Use JPG file loader
			test: /\.jpg$/,
			loader: 'file-loader'
		},
		{
			// Use SVG File loader
			test: /\.svg$/,
			loader: 'svg-loader'
		},

		]
	},

	babel: {
	    presets: ['es2015'],
	    plugins: ['transform-runtime']
	}
}

This is the error line in build.js

  // compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
    initHookName = 'init'
  }

[markbrown4]

@bedakb

Vue.config._lifecycleHooks

The error is telling you that is undefined when this code runs. In app.js are you requiring Vue which makes that global?

Have you compared with the code in https://github.com/vuejs/vue-webpack-example ?

[bedakb]

Hey Mark

Yes I require it

let Vue = require('vue');
let VueRouter = require('vue-router');
let VueResource = require('vue-resource');

Vue.use(VueRouter);
Vue.use(VueResource);

import shopHome   from './components/shopHome.vue';
import shopSingle from './components/shopSingle.vue';
import shopLenses from './components/shopLenses.vue';

Seems like that resource you posted is deprecated.

[markbrown4]

@markbrown4

Vue.config._lifecycleHooks

This code expects Vue.config._lifecycleHooks as a global, requiring it in a module doesn’t create a global.
You may need to assign it to global or window. window.Vue = Vue

[bedakb]

Hm weird - I followed the Vue loader docs, I don’t have any kind of special config, but it doesn’t work

http://vue-loader.vuejs.org/en/start/tutorial.html

Btw I noticed this warn in terminal, maybe it helps

[bedakb]

[FIXED] I didn’t define the path into my webpack.config.js, so with this

output: {
    path: './js/shop/',
    filename: 'build.js'
},

It works

But now I have issue with handling .svg files, basically it output this as the source of SVG icon

<img src="[object" object]="" alt="icon" class="svg-icon">

[FIXED] svg-url-loader did the trick.

[bedakb]

Hey guys, again me with webpack issue.

Now another file, but for some reasons I’m getting the Error - webpackJsonp is not defined.

It’s a bit larger app, where we have a lot of chunks (one of them is VueJS) chunk, and for page that use it, I got this error.

This webpack.config.js file looks like this

var webpack = require('webpack'),
    path    = require('path');

module.exports = {
  resolve: {
    modulesDirectories: ['./node_modules', './resources/assets/scripts']
  },

  entry: {
    // Commons and Libraries
    common: ['jquery', './resources/assets/scripts/main.js'],

    // Chunks per Page
    home: './resources/assets/scripts/home.js',
    blog: './resources/assets/scripts/blog.js',
    about: './resources/assets/scripts/about.js',
    contact: './resources/assets/scripts/contact.js',
    shop: './resources/assets/scripts/shop.js', // This is VueJS chunk
  },

  output: {
    path: path.join(__dirname, 'public/assets/js'),
    filename: '[name].min.js'
  },

  devtool: "source-map",

  module: {
    loaders: [
      {
        test:     /\.js$/,
        loader:   'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      { test: /jquery\.js$/, loader: 'expose?$' },
      { test: /jquery\.js$/, loader: 'expose?jQuery' },
      {
        test: /\.(png|jpg)$/,
        loader: 'url',
        query: {
            // limit for base64 inlining in bytes
            limit: 10000,
            // custom naming format if file is larger than
            // the threshold
            name: '[name].[ext]?[hash]'
          },
        },
        {
      // Use SVG File loader
      test: /\.svg$/,
      loader: 'svg-url-loader'
    }
    ],
  },

  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("package.json", ["main"])
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2
    }),

    new webpack.optimize.UglifyJsPlugin({minimize: true, preserveComments: 'license'})
  ]
};

I posted question on Webpack Github repo, but doesn’t get any useful info

webpackJsonp is not defined