7

I want to handle my jsx code, so I write webpakc.config.js like this:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel-loader?presets[]=es2015'],
    exclude: /node_modules/
}

But it didn't handle my jsx code and throw an error like this: The error threw in terminal

By Google I find I need to add presets['react'] to my config file. So I update config like this:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    query: {
        presets: ['react', 'es2015']
    },
    exclude: /node_modules/
}

But it threw another error: A new error threw after update config file

I am a fresher in webpack, What should I do?

Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
wen
  • 71
  • 3
  • the first error: ERROR in ./src/App.js Module build failed: SyntaxError: /Users/wen/Documents/SDE/Olege/olege-webApp/src/App.js: Unexpected token (4:9) 2 | class App extends Component { 3 | render(){ > 4 | return

    | ^ 5 | } 6 | }     – wen Nov 11 '15 at 00:43
  • The second error: /Users/wen/Documents/SDE/Olege/olege-webApp/node_modules/webpack-core/lib/LoadersList.js:54 if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list"); ^ Error: Cannot define 'query' and multiple loaders in loaders list – wen Nov 11 '15 at 00:44
  • Can you edit your question to include the errors so they don't get lost in the comments? – ajshort Nov 11 '15 at 03:03
  • Possible duplicate of [How to add a query to a webpack loader with multiple loaders?](http://stackoverflow.com/questions/33117136/how-to-add-a-query-to-a-webpack-loader-with-multiple-loaders) – XML Mar 27 '16 at 01:11

1 Answers1

13

The first error seems to be a syntax error in your JSX. Difficult to tell what it is from the comment. Try posting the JSX file contents.

About the second error: Query params for a specific loader needn't necessarily be specified as a JSON object. You can specify them as a query string adjoining the loader name as well. Eg. the same config can be expressed with this line:

loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']

Of course, you'll need to remove the query JSON once you use the above. More info here: https://webpack.github.io/docs/using-loaders.html#query-parameters

akaashanky
  • 191
  • 1
  • 4