react-linear-genome-view example didn't show up

[wangk4]

Hi, I am working on a Django project and I want to use react-linear-genome-view in my project. What I used is Django+webpack. I am new to all of these, after several days struggling with webpack, finally, I made a simple react app works in my Django project. But when I want to re-create the example of react-linear-genome-view on my webpage, it is not working. package.json, webpack.config.js, and index.html are attached.

package.json:
{
"name": "django-react-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack --config webpack.config.js --watch --mode development",
"build": "webpack --config webpack.config.js --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@fontsource/roboto": "^4.2.0",
"@jbrowse/core": "^1.0.3",
"@jbrowse/plugin-alignments": "^1.0.3",
"@jbrowse/plugin-bed": "^1.0.3",
"@jbrowse/plugin-circular-view": "^1.0.3",
"@jbrowse/plugin-config": "^1.0.3",
"@jbrowse/plugin-data-management": "^1.0.3",
"@jbrowse/plugin-gff3": "^1.0.3",
"@jbrowse/plugin-linear-genome-view": "^1.0.3",
"@jbrowse/plugin-sequence": "^1.0.2",
"@jbrowse/plugin-svg": "^1.0.2",
"@jbrowse/plugin-variants": "^1.0.3",
"@jbrowse/plugin-wiggle": "^1.0.3",
"@jbrowse/react-linear-genome-view": "^1.0.3",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.0.0",
"@material-ui/lab": "^4.0.0-alpha.45",
"mobx": "^5.10.1",
"mobx-react": "^6.0.3",
"mobx-state-tree": "3.14.1",
"node-polyfill-webpack-plugin": "^1.0.2",
"prop-types": "^15.0.0",
"react": "^16.13.1",
"react-dom": "^16.14.0",
"react-use-dimensions": "^1.2.1",
"rxjs": "^6.0.0",
"source-map-loader": "^2.0.0",
"typeface-roboto": "^1.1.13"
},
"peerDependencies": {
"react": "^15.0.0",
"@types/react": "^16.8.20",
"typescript": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"path-browserify": "^1.0.1",
"style-loader": "^1.2.1",
"webpack": "^5.21.0",
"webpack-bundle-tracker": "^0.4.3",
"webpack-cli": "^4.5.0"
}
}

webpack.config.js:

const path = require("path");
const BundleTracker = require("webpack-bundle-tracker");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
const regeneratorRuntime = require("regenerator-runtime");
const { SourceMapDevToolPlugin } = require("webpack");
module.exports = {
entry: {
jb2: "./jb2/src/index.js",
testjb: "./jb2/src/jbindex.js",
},
output: {
path: path.resolve("./static/jb2/"),
filename: "[name]-[fullhash].js",
publicPath: "http://0.0.0.0:8000/static/jb2/",
},
devtool: 'source-map',
plugins: [
new SourceMapDevToolPlugin(),
new NodePolyfillPlugin(),
new CleanWebpackPlugin(),
new BundleTracker({
path: __dirname,
filename: "./webpack-stats.json",
}),
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: "pre",
use: ["babel-loader", "source-map-loader"],
},
{
test: /.css$/,
use: ["style-loader", "css-loader", "babel-loader",],
},
],
},
resolve: {
fallback: {
"fs": false
},
}
};

index.html:

{% load render_bundle from webpack_loader %}

<title>My Site</title>

two div created here,
one for jb2 (simple react test)
one for the jbrowse id = 'linearGenomeVIew'
{% render_bundle 'jb2' %} <-- this is a simple react app, print "hello world" on the webpage and this works -->
{% render_bundle 'testjb' %} <-- this is for the jbrowse react demo -->

Could anyone help me with this problem? Thanks a lot.

[wangk4]

I figured this out, sorry I am new to this, in the index.js, the ReactDOM needs to be added:

ReactDOM.render(,document.getElementById("linearGenomeView"));