CODEWITHSUNDEEP
reactjswebpack-dev-server
Keevan Dance
Keevan Dance

Reputation: 68

Trouble getting React working with webpack-dev-server

I am trying to get started and learn react with webpack and eventually redux thrown in there (hard to find guides to learn the three together...) Anyway, having a problem with set up. Any help is appreciated. Thanks!

EDIT: @FakeRainBrigand's solution worked

My error is

enter image description here

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: ['react-hot-loader', 'babel-loader']
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

index.jsx

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

render(<App/>, document.getElementById('app'));

app.jsx

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>My Blog</h1>
      </div>
    )
  }
}

package.json

{
"name": "blog",
"version": "1.0.0",
"main": "index.jsx",
"license": "MIT",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
  "react": "^15.4.2",
  "react-dom": "^15.4.2"
},
"devDependencies": {
  "babel-core": "^6.24.0",
  "babel-loader": "^6.4.1",
  "babel-preset-es2015": "^6.24.0",
  "babel-preset-react": "^6.23.0",
  "react-hot-loader": "^1.3.1",
  "webpack": "^2.3.2",
  "webpack-dev-server": "^2.4.2"
}
}

I am new to both react and webpack so maybe this is much simpler than I think it is. Any help is greatly appreciated.

Upvotes: 1

Views: 180

Answers (1)

Brigand
Brigand

Reputation: 86230

It looks like you're missing a .babelrc file. You can generate one here, or just use this one and install the dependencies.

{
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%"
          ]
        }
      }
    ],
    "react"
  ]
}

Install

npm install --save-dev babel-preset-env babel-preset-react babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread

Upvotes: 1

Related Questions