React with Webpack, ES6, simple component does not display

Question

This is my webpack-config.js:

module.exports = {
        entry: "./src/js/main.js",
        output: {
            path: './dist',
            filename: 'bundle.js',
            publicPath: './dist'
        }, 
        devServer:{
            inline: true,
        contentBase: './dist'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader:'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

I created simple component App.js:

import React from 'react';

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

and my main.js:

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

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

My index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="main"></div>
    <script src="bundle.js">,/scrip>
</body>
</html>

when I run webpack-dev-server, there is no errors, it is serve right folder , but I see empty page, with no errors in the WEB console. I see it loads the right file with id main, but thats all.

Where is the problem ?

Yes, like i wrote I see it loads the right file with id main — gdfgdfg
– gdfgdfg, Commented Nov 26, 2016 at 0:04
And did you link your bundle.js with <script src="bundle.js"> in the index? — Fabian Schultz
– Fabian Schultz, Commented Nov 26, 2016 at 0:05
Is it a typo or <script src="bundle.js">,/scrip> should be <script src="bundle.js"></script> ? — topheman
– topheman, Commented Nov 26, 2016 at 0:30

AaronCoding · Accepted Answer · 2016-11-26 01:24:37Z

2

in your html file, the closing script tag is broken.

,/scrip>

answered Nov 26, 2016 at 1:24

AaronCoding

1681 silver badge6 bronze badges

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

Comments

danidee · Accepted Answer · 2016-11-26 00:18:35Z

1

your file is named App.jsx but you're trying to import from App.js

answered Nov 26, 2016 at 0:18

danidee

9,6342 gold badges39 silver badges58 bronze badges

Collectives™ on Stack Overflow

React with Webpack, ES6, simple component does not display

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related