CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
Cheng
Cheng

Reputation: 17894

Babel loader not recognizing es2015 code

Update:

I uploaded a sample project to github: https://github.com/guocheng/debug-webpack

In this sample project, I have two identical index.js file. One is under the project root, the other is under /src.

After npm install, run this command webpack-dev-server --config webpack.dev.config.js. You should see this error:

ERROR in ./index.js
Module parse failed: /Users/cheng/Dev/debug-webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, { Component } from 'react';
|
| export default class App extends Component {
 @ multi main

But if you change Line #9 in the webpack.dev.config.js to ./src/index, the same command will work.

So the location of where I put index.js affects the output.

Any ideas of why this is happening?

Here is my .babelrc file:

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy", "transform-runtime"],
  "ignore": ["node-modues/**/*.js"]
}

I do have babel-preset-2015, stage-0 and react installed.

I run the webpack-dev-server with this CLI command: node ./webpack/server.js

Here is server.js

const webpack = require('webpack'),
      WebpackDevServer = require('webpack-dev-server'),
      config = require('./dev.config')

new WebpackDevServer(webpack(config), {
    contentBase: './build',
    // webpack-dev-server options
    hot: true,
    historyApiFallback: true,
    inline: true,
    // webpack-dev-middleware options
    noInfo: false,
    quiet: false,
    lazy: false,
    publicPath: config.output.publicPath,
    headers: {'Access-Control-Allow-Origin': '*'},
    stats: { colors: true }
}).listen(port, ip, function(err, result) {
    if (err) {
        console.log(err)
    }
})

Here is the webpack config file I used:

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

const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'build'),
    dist: path.join(__dirname, 'dist')
}

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        javascript: [
            'webpack-dev-server/client?http://127.0.0.1:5555',
            'webpack/hot/only-dev-server',
            './app/index.js'
        ]
    },
    output: {
        path: PATHS.dist,
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel?cacheDirectory'],
            exclude: /(node_modules|bower_components)/,
            include: path.join(__dirname, 'app'),
        },{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
        },{
            test: /\.(woff|woff2|eot|ttf)$/,
            loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
        },{
            test: /\.(png|jpg|svg)$/,
            loader: 'url-loader?limit=8192&name=img/[name].[ext]'
        }]

    },
    cssnext: {
        browsers: 'last 2 versions'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin(
            'bundle.css',
            {allChunks: true}),
        new webpack.DefinePlugin({
            '__DEVELOPMENT__': true,
            '__DEVTOOLS__': true
        })
    ]
}

When I run the dev server, here is the error message:

ERROR in ./app/index.js
Module parse failed: /Users/cheng/Dev/note/note-client/app/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react'
| import ReactDOM from 'react-dom'
| import { Provider } from 'react-redux'
 @ multi javascript

For some reason, the presets didn't kick in. I tried to use babel CLI to test the file manually:

babel index.js  // note: .babelrc is used for configuring the presets

I can actually see the correct output. Any suggestions on what might be causing the issues?

Package versions I have installed:

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Here is my project fold's structure:

project_name
   |── app
        |── index.js
   |── dist
   |── build  
   |── webpack
          |── dev.config.js
          |── server.js
   |── .babelrc

I tried to run the following command at project root, and it gives me the same error:

webpack-dev-server --config ./webpack/dev.config.js

but babel ./app/index.js works.

Upvotes: 2

Views: 789

Answers (1)

Bob Sponge
Bob Sponge

Reputation: 4738

You have invalid include path in js loader since your config is located in webpack directory:

    {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel?cacheDirectory'],
        exclude: /(node_modules|bower_components)/,
        include: path.join(__dirname, 'app'),
    }

Include path in your case is root/webpack/app and must be root/webpack/../app:

path.join(__dirname, '..', 'app')

Upvotes: 1

Related Questions