I have installed all the packages I need, And I believe my webpack is setup correctly. I can run the server and the dev script with no errors at all.
If I was to put anything in the HTML(e.g. text) file, it shows. But no react components on it.
Webpack.config
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
HTML
<body>
{% load static %}
<div id="main">
<div id="app">
</div>
</div>
<script src="{% static 'frontend/main.js' %}"></script>
</body>
React
import React, { Component } from "react";
import ReactDOM from 'react-dom';
export default class App extends Component(){
constructor(props){
super(props);
}
render(){
return <h1> Site Placeholder </h1>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
The index.js just has an import:
import App from "./components/App";
Views simply renders the index.html
def index(request, *args, **kwargs):
return render(request, 'frontend/index.html')
I am not getting any errors anywhere, but my html is blank. In chrome inspect, I can see that there is the main.js file is being created and send to static sources, yet none of it displays.
export default class App extends Component{...}
Instead of
export default class App extends Component(){...}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments