i am fighting with webpack since quite some time now. Basically i am trying to get it to run with my React Application.
My rough folder structure is:
-
|__ public/
|__ index.html
|__ src/
|__ App.js
|__ index.js
|___ ....
|___ .babelrc
|___ webpack.config.js
My webpack config looks like this:
const path = require('path');
const webpack = require('webpack')
const isDevelopment = process.env.MODE !== 'production';
console.log(`isDev: ${isDevelopment}`)
module.exports = {
mode: isDevelopment ? 'development' : 'production',
devtool: 'inline-source-map',
context: __dirname,
entry: {
main: './src/index.js'
},
output: {
path: path.resolve( __dirname, 'dist' ),
filename: '[name].bundle.js',
publicPath: '/',
},
stats: 'minimal',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
},
{
test: /.(sass|less|css)$/,
use: ['style-loader', 'css-loader']
},
{
test: /.(png|jpe?g|svg|gif)?$/,
exclude: /node_modules/,
use: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
devServer: {
hot: false, // disable hot reloading temporarily
port: 9000,
open: true,
},
}
This is how my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'rsuite/dist/rsuite.min.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
This is the .babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<title>Blog</title>
</head>
<body>
<div id="root"></div>
<script src="main.bundle.js"></script>
</body>
</html>
I tried alot of iterations on the config and none of them worked. Currently have a white screen and a js error on the console:
bootstrap:19 Uncaught TypeError: __webpack_modules__[moduleId].call is not a function
at __webpack_require__ (bootstrap:19:1)
at ./node_modules/axios/lib/axios.js (xhr.js:197:2)
at __webpack_require__ (bootstrap:19:1)
at ./src/utils/APIHandler.js (Writeups.js:80:24)
at __webpack_require__ (bootstrap:19:1)
at ./src/components/contact/index.js (App.js:62:19)
at __webpack_require__ (bootstrap:19:1)
at ./src/pages/home/Home.js (EditWriteup.js:154:1)
at __webpack_require__ (bootstrap:19:1)
at ./src/App.js (svg-injector.esm.js:317:1)