CODEWITHSUNDEEP
javascriptreactjswebpack
ArturK.
ArturK.

Reputation: 35

React do not render new components, new webpack setup

Today I was setting up my first Webpack Bebel React project and I got some strange case here.I don't know why, but every single Component that I make is not recognized by React. I can see it directly in the inspector, and It seems like it's not getting compiled. All standard HTML elements are getting rendered. Even console.log inside of constructor function of a component that I have created is not called. I run Hot mode with webpack -p

Here is my Webpack config:

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const isProduction = process.env.NODE_ENV === 'production'
const cssDeveloperLoaders = ['style-loader', 'css-loader', 'sass-loader']
const cssProduction = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
})

const cssConfig = isProduction ? cssProduction : cssDeveloperLoaders

module.exports = {
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.jsx$/,
                exclude: path.resolve(__dirname + '/node_modules/'),
                use: 'babel-loader',
                query: {
                    presents: ['es2015','react']
                }
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        open: true,
        openPage: ''                    //Fix to webpack version 3.0.0 after removing redirection to /undefined
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'app.css',
            disable: !isProduction,     //So if production is running it will generate file otherwise not
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}

My .bablerc

{
    "presets": [
        "es2015",
        "react"
    ]
}

App.jsx:

import './app.scss'

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


import engine from './engine.jsx'


render(
    <engine/>,
    document.getElementById('root')
);

engine.jsx

import React from 'react';


class engine extends React.Component{
    constructor(){
        super();
        console.log('Component has been constructed ')
    }
    render(){
        return(
            <div>xD</div>
        )
    }
}
export default engine;

The picture of React Chrome extension.

enter image description here

Please notice, console.log is not been called.

My html is empty, I see only engine element (Not compiled.)

Any suggestions about this problem?

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="app.bundle.js"></script>
</body>
</html>

Upvotes: 1

Views: 611

Answers (1)

KRISHNA PATEL
KRISHNA PATEL

Reputation: 135

  1. In your webpack config file add

    resolve : { extensions: [".js", ".jsx"] }

So that you won't need to import your jsx file with extenstion.

  1. Class names should start with Capital letters otherwise methods in react components will not be invoked and also no error will be thrown.

engine.jsx

    class Engine extends React.Component{
        constructor(){
            super();
            console.log('Component has been constructed ')
        }
        render(){
            return(
                <div>xD</div>
            )
        }
    }

export default Engine;

App.jsx

import Engine from './engine'
render(
    <Engine/>,
    document.getElementById('root')
);

Please verify https://codesandbox.io/s/D9rpvWWG6 Also you can refer https://github.com/facebook/react/issues/4695

Upvotes: 1

Related Questions