Webpack, ES6 export/import & Vue.js

Question

I'm in the process of moving the build process of a vue.js app from gulp/browserify/vueify to webpack with vue-loader.

If I have modules: false in my .babelrc, I get an error on page load: Uncaught TypeError: Cannot assign to read only property 'exports' of object

If I remove modules: false, the errors I get are along the lines of Vue.use is not a function. This can be fixed by changing the way I import libraries from:

var Vue = require('vue');

to

var Vue = require('vue').default;

`webpack.conf.js`

var path = require('path');
var vueLoaderConfig = require('./vue-loader.conf.js');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist/js'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },
  module: {
    rules: [{
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    }, {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test')]
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('./dist/img', 'img/[name].[hash:7].[ext]')
      }
    }]
  }
}

So my question is:

Do I have to know ahead of time whether or not a library uses import/export default or require/module.exports? Or does webpack take care of that and I assume I can use import/export instead of require/module.exports across the board?

Do you have the same error without using eslint-loader? And what is in vueLoaderConfig? — François Romain
– François Romain, Commented Aug 7, 2017 at 18:47

Antonio Trapani · Accepted Answer · 2017-08-08 11:20:02Z

1

You can write all your code using ES6 and import/export. Do not worry about the code in libraries.

answered Aug 8, 2017 at 11:20

Antonio Trapani

8216 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Webpack, ES6 export/import & Vue.js

`webpack.conf.js`

So my question is:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

webpack.conf.js

So my question is:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`webpack.conf.js`