1

I just set up the environment for a webapp using react.

setInitialStates = () => {
    this.state = {showAuthorModal: false};
};

enter image description here

NOTE: This is the correct syntax!

This happens when I tried to run webpack --config webpack.config.js

This is my webpack.config.js. 

const path = require('path');

module.exports = {
    entry: {
        component: [
            './public/javascripts/Rendering.jsx',
            './public/javascripts/CentreQuote.jsx',
            './public/javascripts/AuthorModal.jsx',
            './public/javascripts/LeftNav.jsx'
        ]
    },
    output: {
        path: path.resolve('public/javascripts'),
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}
Then I have .babelrc, 

{
    "presets":[
        "es2015", "react"
    ],
    "plugins": ["transform-es2015-arrow-functions"]
}

I think I'm missing some wiring step that links babelrc to the loader config?

Community
  • 1
  • 1
Hung Nguyen
  • 301
  • 1
  • 2
  • 11

1 Answers1

0

replace the "module" in webpack with the following:

module: {
  rules: [{
    test: /\.jsx?$/,
    loader: "babel-loader",
    options: {
      cacheDirectory: true, //false for production
      babelrc: false,
      presets: ["es2015", "react"],
      plugins: ["transform-es2015-arrow-functions"]
    }
  }]
}

I did 2 things:

  1. unified the js/jsx loader in one regex test
  2. stopped using the babelrc to be able to specify the configs inside webpack.

it should work! give it a try

The main issue with the code you provided is that you have "loaders" but it should be "rules"

Bamieh
  • 10,358
  • 4
  • 31
  • 52