CODEWITHSUNDEEP
javascriptwebpackvue.jsvuejs2webpack-dev-server
Phillip YS
Phillip YS

Reputation: 904

Error in using 'import' in webpack.config.babel.js

(function (exports, require, module, __filename, __dirname) { import path from 'path'
                                                              ^^^^^^
SyntaxError: Unexpected token import

This error occurs when I use webpack-dev-server --hot.

It seems like this occurs because it can't read import or webpack doesn't support import. I tried to use babel-register but it doesn't work. Is there any way to solve this problem? Refer to the code below.

webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
import HtmlPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const vueLoaders = {
  html: 'pug-loader',
  css: ExtractTextPlugin.extract({
    use: 'css-loader',
    fallback: 'vue-style-loader'
  }),
  scss: 'vue-style-loader!css-loader!sass-loader',
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}

export default {
  entry: './client/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new ExtractTextPlugin('bundle.css'),
    new HtmlPlugin({
      title: 'sex',
      template: 'client/assets/index.pug'
    })
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader', fallback: 'style-loader'
        })
      }, {
        test: /\.s[a|c]ss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader'], fallback: 'style-loader'
        })
      }, {
        test: /\.pug$/,
        loader: 'pug-loader'
      }, {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: { loaders: vueLoaders }
      }, {
        test: /\.(png|jpe?g|gif|svg|ttf|woff2?|eot)$/,
        loader: 'file-loader',
        options: { name: '[name].[ext]?[hash]' }
      }
    ]
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },

  devServer: {
    host: '0.0.0.0',
    historyApiFallback: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: '"production"' }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: { warnings: false }
    }),
    new webpack.LoaderOptionsPlugin({ minimize: true })
  ])
}

Upvotes: 6

Views: 7263

Answers (3)

sapy
sapy

Reputation: 9602

You have created a webpack.config.js and when tying to execute webpack you are getting above error. Cause your webpack config file need to be babelified before you can use it,

1) Rename your webpack.config.js to webpack.config.babel.js.

2) Now create a new file webpack.config.js with just the following 2 lines

require('babel-register');
module.exports = require('./webpack.config.babel.js');

3) create a .babelrc file in parallel to your webpack.config.js file with following content. We need to tell babel explicitly what preset to use.

{
  "presets": ["latest",'react', 'es2015','stage-2']
}

4) add following node modules to your dependency ( Required for presets used in .babelrc)

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) You are done . Now if you execute webpack --progress --colors --watch it should work.

Upvotes: 1

Tom Van Rompaey
Tom Van Rompaey

Reputation: 3586

babel-register only transforms the modules you require with babel where you call require("babel-register");, not the module itself.

You can use an intermediate step to make this work with the Webpack configuration.

webpack.config.js

require('babel-register');
module.exports = require('./webpack.config.babel.js');

webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
import HtmlPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const vueLoaders = {
  html: 'pug-loader',
  css: ExtractTextPlugin.extract({
  ...

Upvotes: 6

Yangshun Tay
Yangshun Tay

Reputation: 53229

Node does not support ES6 import syntax at the moment. Use CommonJS require syntax in the meanwhile.

const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

Upvotes: 4

Related Questions