javascript - webpack + babel - react, unexpected token 'import' - Stack Overflow

admin管理员组

文章数量:1202362

I'm trying to make index.js work with es2015.

Before directing me to .babelrc, note that I have added BOTH es2015 and react (to be sure, but there's no react here).

It features

import { default as Logary, Targets, getLogger, build } from 'logary';

And here's .babelrc:

{
  "presets": ['es2015', 'react']
}

And webpack.config.js

var webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    './index.js'
  ],
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  loaders: [
    { test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
    { test: /\.svg$/, loader: "file" }
  ],
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.template.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  resolve: {
    extensions: ['', '.js']
  }
}

Gives error:

ERROR in ./index.js
Module parse failed: /Users/h/logary-js/examples/webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { default as Logary, Targets, getLogger, build } from 'logary';
|
| // once per site/app

Why is it not handling the import-token?

I'm trying to make index.js work with es2015.

Before directing me to .babelrc, note that I have added BOTH es2015 and react (to be sure, but there's no react here).

It features

import { default as Logary, Targets, getLogger, build } from 'logary';

And here's .babelrc:

{
  "presets": ['es2015', 'react']
}

And webpack.config.js

var webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    './index.js'
  ],
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  loaders: [
    { test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
    { test: /\.svg$/, loader: "file" }
  ],
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.template.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  resolve: {
    extensions: ['', '.js']
  }
}

Gives error:

ERROR in ./index.js
Module parse failed: /Users/h/logary-js/examples/webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { default as Logary, Targets, getLogger, build } from 'logary';
|
| // once per site/app

Why is it not handling the import-token?

• javascript
• webpack
• babeljs

Share Improve this question Follow asked Apr 3, 2016 at 18:34 HenrikHenrik 9,91566 gold badges5555 silver badges8888 bronze badges 10

• @Henrik - Can you try changing your JavaScript loader to just babel? – Michael Parker Commented Apr 3, 2016 at 18:43
• I had this issue as well and had to include the file extension in the import; import {...} from './logary.js' – Daniel Lizik Commented Apr 3, 2016 at 18:45
• @Daniel_L the file extension is not required with the import keyword. – Michael Parker Commented Apr 3, 2016 at 18:45
• @MichaelParker it was when I was using .jsx files – Daniel Lizik Commented Apr 3, 2016 at 18:46
• @Daniel_L if you browse packages.json you'll see I have a local package ref to the package in the root of the repository; aiming to be true to the fact that I'm building a library and want to show how it's used. So I'm afraid that's not the answer. – Henrik Commented Apr 3, 2016 at 18:48

 |  Show 5 more comments

1 Answer 1

Sorted by: Reset to default 17

Your webpack.config.js structure is not correct. Webpack doesn't recognize all your loaders. Specifically, you need to put the loaders property inside of a module section like this:

module: {
   loaders: [
    { test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
    { test: /\.svg$/, loader: "file" }
  ],
}

本文标签： javascriptwebpackbabelreactunexpected token 39import39Stack Overflow