Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 })
  ])
}
like image 505
Phillip YS Avatar asked Apr 02 '17 04:04

Phillip YS


People also ask

How to use Babel with Webpack?

Moreover, in case you have Webpack in place to bundle your JavaScript application, you will have to install a Webpack Loader for Babel: Now, with all libraries (node packages) in place, you need to adjust your package.json and webpack.config.js (if necessary) to respect the Babel changes.

Why am I getting a Babel-loader error in Webpack?

If you receive this message, it means that you have the npm package babel installed and are using the short notation of the loader in the webpack config (which is not valid anymore as of webpack 2.x): webpack then tries to load the babel package instead of the babel-loader.

What is Webpack config file?

Webpack configuration can be defined in a configuration file. This drastically simplifies the entry-point JavaScript and makes code more concise and maintainable. The webpack config file is a JS file that exports an object. The object is processed by webpack based on the defined properties. The config file is a standard Node.js CommonJS module.

What happened to the NodeJS API for Babel?

The Node.js API for babel has been moved to babel-core. If you receive this message, it means that you have the npm package babel installed and are using the short notation of the loader in the webpack config (which is not valid anymore as of webpack 2.x):


3 Answers

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({
  ...
like image 118
Tom Van Rompaey Avatar answered Oct 13 '22 11:10

Tom Van Rompaey


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')
like image 40
Yangshun Tay Avatar answered Oct 13 '22 10:10

Yangshun Tay


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.

like image 1
sapy Avatar answered Oct 13 '22 11:10

sapy