20

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?

10
  • @Henrik - Can you try changing your JavaScript loader to just babel? 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' Apr 3, 2016 at 18:45
  • @Daniel_L the file extension is not required with the import keyword. Apr 3, 2016 at 18:45
  • @MichaelParker it was when I was using .jsx files 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
    Apr 3, 2016 at 18:48

1 Answer 1

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" }
  ],
}
1
  • Excellent, how very finicky :)
    – Henrik
    Apr 3, 2016 at 20:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.