Cannot import react js component

Question

I trying to import a react component to jsx file but it throws this exception:

This is my main code:

import React, { Component } from "react";
import Sidebar from "./Sidebar";

class App extends Component{
    render(){
        return (
            <Sidebar/>
        );
    }
}

ReactDOM.render(
    <App />, 
    document.getElementById("root")
);

and this is my Sidebar component:

import React, { Component } from "react";

export default class Sidebar extends Component{
    render(){
        return (
            <h1>Hello Sidebar</h1>
        );
    }
}

My folders structure:

Probably import Sidebar from "./Sidebar.jsx"; will solve your issue.You might not have configured extensions to be resolved in webpack — Shubham Khatri
– Shubham Khatri, Commented Oct 17, 2018 at 7:13

ABlue · Accepted Answer · 2018-10-17 07:33:35Z

3

I post simpler version which I know does work:

./index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application'

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

./components/Application :

import React from 'react';

class Application extends React.Component {
  render() {
    return (
      <div className="App">
        My Application!
      </div>
    );
  }
}

export default Application;

This should be everything needed to make it work.

If you want to shorten the above even more, by removing the export line at the bottom, a less traditional approach would be defining the class like this...

export default class Application extends React.Component {...}

answered Oct 17, 2018 at 7:33

ABlue

6736 silver badges22 bronze badges

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

1 Comment

pedramcode Over a year ago

I try that but it throws me previous exception. module not found

Hemadri Dasari · Accepted Answer · 2018-10-17 07:46:47Z

Looks like you haven't added rule for .jsx file in webpack.config.js.

Since you have both .js and .jsx files you need to tell webpack to load files with extension .js and .jsx. Add below config to webpack.config.js in rules section

    {
        //tell webpack to use jsx-loader for all *.jsx files
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
    }

And add extensions like

   resolve: {
    modules: [
        path.resolve("./src"),
        path.resolve("./node_modules")
    ],
    extensions: [".js", ".jsx"]
  }

Below is the working webpack.config.js file for your ref

module.exports = {
    target: "web",
    entry: [
        "whatwg-fetch",
        'webpack-dev-server/client',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        "./src/index.js"
        ],
    output: {
        path: __dirname + 'build',
        publicPath: '/',
        filename: "bundle.js"
    },
    plugins: [new HtmlWebpackPlugin({
        template: "index.html"
    }),
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.jsx$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }),
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NoEmitOnErrorsPlugin()
    ],
    module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {}
                  }
                ]
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader",
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        modules: [
            path.resolve("./src"),
            path.resolve("./node_modules")
        ],
        extensions: [".js", ".jsx"]
    },
    devServer: {
        watchOptions: {
        // Needed for Windows Subsystem for Linux dev environment:
            poll: true
        },
        contentBase: './build'
    },
    devtool: "cheap-module-eval-source-map",
    node: {
        child_process : "empty",
        fs: "empty"
    }
};

Collectives™ on Stack Overflow

Cannot import react js component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related