DEV Community

P V D SIVA KRISHNA
P V D SIVA KRISHNA

Posted on

Manual Setup (Custom Webpack/Babel configuration) with react (i am not able running it )

https://drive.google.com/drive/folders/1aFFcm-qKUNrnZ4OxE5Rhd6JyRajytLEz?usp=sharing

This is code source for the frontend site it is build with redux and react version "react": "^17.0.0", and project build with babel and custom webpack so i tired all options i used chatgpt other sources but not working please can you any one help with out this it is actually my interview question this is my package.json
{
"name": "hrm",
"version": "0.1.0",
"homepage": "",
"private": true,
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open",
"production": "webpack --mode production"
},
"keywords": [
"reactjs",
"filter",
"sort",
"DataTables",
"jQuery",
"table",
"DataTables"
],
"files": [
"js/*/.js"
],
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@emailjs/browser": "^3.6.2",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@fullcalendar/daygrid": "^5.2.0",
"@fullcalendar/interaction": "^5.2.0",
"@fullcalendar/react": "^5.2.0",
"@fullcalendar/timegrid": "^5.2.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@mui/icons-material": "^5.4.1",
"@mui/material": "^5.13.1",
"@mui/x-date-pickers": "^6.5.0",
"@reduxjs/toolkit": "^1.6.2",
"antd": "^4.5.2",
"axios": "^0.24.0",
"bootstrap": "^4.5.0",
"core-js": "^3.32.1",
"date-fns": "^2.25.0",
"dayjs": "^1.10.7",
"emailjs-com": "^3.2.0",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.2.0",
"history": "^5.0.0",
"jquery": "^3.5.1",
"jquery-slimscroll": "^1.3.8",
"jquery-sticky-kit": "^1.1.3",
"jwt-decode": "^3.1.2",
"line-awesome": "^1.3.0",
"lodash": "^4.17.21",
"maskedinput": "^3.3.11",
"moment": "^2.27.0",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^17.0.0",
"react-autocomplete": "^1.8.1",
"react-beautiful-dnd": "^10.0.0",
"react-big-calendar": "^1.5.0",
"react-bootstrap": "^1.3.0",
"react-date-picker": "^9.1.0",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.0",
"react-dropzone": "^14.2.1",
"react-helmet": "^6.1.0",
"react-input-mask": "^2.0.4",
"react-loading-skeleton": "^3.0.1",
"react-owl-carousel": "^2.3.1",
"react-popper": "^2.2.3",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-scrollspy-nav": "^1.2.4",
"react-simple-timefield": "^3.2.5",
"react-slick": "^0.27.7",
"react-sticky": "^6.0.3",
"react-sticky-box": "^0.9.3",
"react-summernote": "^2.0.2",
"react-toastify": "^8.1.0",
"reactstrap": "^8.5.1",
"recharts": "^1.8.5",
"regenerator-runtime": "^0.14.0",
"reoverlay": "^1.0.2",
"slick-carousel": "^1.8.1",
"sticky-kit": "^1.1.3",
"sticky-sidebar": "^3.3.1",
"sweetalert2": "^11.3.10",
"theia-sticky-sidebar": "^1.7.0",
"xlsx": "^0.18.5",
"xlsx-style": "^0.8.13"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.1.0",
"csv-loader": "^3.0.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"papaparse": "^5.4.1",
"react-to-print": "^2.14.7",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.0",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3",
"xml-loader": "^1.2.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is File Structure

Image description
and webpack.config.js is
const path = require('path');
const webpack = require('webpack');
const fs = require('fs');
//const publicPath = '/maroon/';
const publicPath = '/';

// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// the path(s) that should be cleaned
let pathsToClean = ['dist', 'build'];

// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false,
};

module.exports = {
mode: 'development',
// externals: {
// // require("jquery") is external and available
// // on the global var jQuery
// "jquery": "jQuery"
// },
entry: {
app: './src/index.js',
},
output: {
// The build folder.
path: resolveApp('dist'),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[hash:8].js',
chunkFilename: 'static/js/[name].[hash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',
},
devServer: {
contentBase: './src/index.js',
host: 'localhost',
compress: true,
port: 3000, // port number
historyApiFallback: true,
quiet: true,
hot: true,
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: '',
imageapiUrl: '',

  publicPath: '/',
}),
Enter fullscreen mode Exit fullscreen mode

},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
Assets: path.resolve(dirname, 'src/assets/'),
},
modules: [path.join(
dirname, 'js/helpers'), 'node_modules'],
},
module: {
rules: [
{
// config for es6 jsx
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
// config for sass compilation
test: /.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
{
loader: 'sass-loader',
},
],
},
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
{
test: /.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
},
// { // config for fonts
// test: /.(woff|woff2|eot|ttf|otf)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// outputPath: 'fonts',
// }
// }
// ],
// }
],
},
optimization: {
minimizer: [new UglifyJsPlugin()],
},
performance: {
hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.png',
}),
new MiniCssExtractPlugin({
// plugin for controlling how compiled css will be outputted and named
filename: 'css/[name].css',
chunkFilename: 'css/[id].css',
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'css/
.',
'js/
.',
'fonts/
.',
'images/
.*',
],
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
],
};

if try to run it i am getting lot of errors in console

Image description

Image description

in every page i am getting error .

Image description
Please anyone help me with this to run Please clone the project from the drive link and any help or resource i will help Please make it work it

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay