Abdelaziz Mokhnache Abdelaziz Mokhnache - 3 months ago 9
React JSX Question

I can't import React components with webpack

in my project I have 2 main files "app.jsx" and "Layout.jsx". When I define my Layout component inside my "app.jsx", it renders successfully. But, when I move it to "Layout.jsx" and require it from "app.jsx" it doesn't work.
here is my code:

"Layout.jsx"

module.exports = class Layout extends React.Component {
render() {
return(
<h3>Layout Component</h3>
)
}
}


"app.jsx"

const React = require("react");
const ReactDOM = require("react-dom");

const Layout = require("./pages/Layout.jsx");

const App = document.getElementById("app");
ReactDOM.render(<Layout />, App);


What's wrong in my code ?

Answer

on your layout.jsx file you need to import

const React = require("react");