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
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: '/',
}),
},
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
in every page i am getting error .
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
Top comments (0)