react.js and webpack 2, need a solution

Question

I am doing a sample tutorial with create-react-app and webpack 2, but I am receiving this error:

This is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-latest-minimal": "^1.1.2",
    "babel-preset-react": "^6.22.0",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.0",
    "raw-loader": "^0.5.1",
    "react-scripts": "0.8.5",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "svgo-loader": "^1.1.2",
    "webpack": "^2.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "file-loader": "^0.10.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  }
}

My webpack.config.js:

module.exports = {
  context: __dirname,
  entry: {
    app: '../src/index.jsx', 

  },
  output: {
    path: './build',
    filename: 'app.js',
  },
  module: {
    loaders: [{
    test: /\.html$/,
    loader: 'html-loader',
    query: {
      minimize: true
    }
  },{
      test: /(\.jsx?)$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/,
      query: {
        presets: ['latest-minimal', 'react'],
      }
    }, {
      test: /\.css$/,
      exclude: /(node_modules)/,
      use: ['style-loader', 'css-loader']
    },{
      test: /\.svg$/,
      use: [{
        loader: 'file-loader'
      }, {
        loader: 'svgo-loader',
        options: {
          plugins: [{
            removeTitle: true
          }, {
            convertColors: {
              shorthex: false
            }
          }, {
            convertPathData: false
          }]
        }
      }]
    }]
  }
}

And my index.jsx:

import React, { Component } from 'react';
import { render } from 'react-dom';

import App from './App.jsx';

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

You're running React in Node, but you have to run the code in a browser. — Freyja
– Freyja, Commented Feb 12, 2017 at 6:35
You need to build the bundle using Webpack in node and then view the application in the browser. At the console, you need to run Webpack command to build and then run Webpack dev server. — Rahul Singh
– Rahul Singh, Commented Feb 12, 2017 at 8:37
check this repo i have created boilerplate which uses create-react-app structure and uses webpack 2 you can grab configs from there or add your components inside it. github.com/sagarrabadiya/react-boilerplate — Sagar Rabadiya
– Sagar Rabadiya, Commented May 2, 2017 at 13:22
also you need to eject from create-react-app if you want to customise all the behaviour.. ;) — Sagar Rabadiya
– Sagar Rabadiya, Commented May 2, 2017 at 13:23

Alex L · Accepted Answer · 2017-03-01 22:35:21Z

1

create-react-app was written for webpack 1. You have updated to webpack 2 which only came out a month ago. There are some syntax changes that break version 1 webpack.config.js files. Here is a migration guide:

https://webpack.js.org/guides/migrating/

answered Mar 1, 2017 at 22:35

Alex L

644 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Rabadiya · Accepted Answer · 2017-05-02 13:22:08Z

0

I have created a bolierplate which uses create-react-app and uses webpack 2 you can take configurations from there.

https://github.com/sagarrabadiya/react-boilerplate

answered May 2, 2017 at 13:22

Sagar Rabadiya

4,3211 gold badge24 silver badges28 bronze badges

Comments

cstuncsik · Accepted Answer · 2017-07-08 04:27:09Z

0

If you still haven't found one I think this is pretty good

answered Jul 8, 2017 at 4:27

cstuncsik

2,8182 gold badges18 silver badges21 bronze badges

Collectives™ on Stack Overflow

react.js and webpack 2, need a solution

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related