I'am tryng to use a webpack-obfuscator inside a React project. I added the configuration in order to obfucate the source code, but not the imported librariers, but I get this error message while luncing the command to create the webpack:
npm run dev
webpack Cannot find module 'object-assign'
Below the configuration I have for this project:
package.json
{
"name": "xyz",
"version": "1.0.0",
"private": true,
"homepage": "/apps/",
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^2.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@material-ui/core": "^4.8.2",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.39",
"@material-ui/pickers": "^3.2.10",
"apexcharts": "^3.28.1",
"babel-preset-es2015": "^6.24.1",
"crypto-browserify": "^3.12.0",
"crypto-random-string": "^4.0.0",
"cypress": "^9.1.1",
"date-fns": "^2.14.0",
"dayjs": "^1.8.28",
"fetch-retry": "^3.1.0",
"i18next": "^21.5.4",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-http-backend": "^1.3.1",
"isomorphic-fetch": "^3.0.0",
"jwt-decode": "^3.1.2",
"moment": "^2.26.0",
"mui-datatables": "^2.15.0",
"multimatch": "^6.0.0",
"npm": "^7.16.0",
"process": "^0.11.10",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-alert": "^7.0.3",
"react-apexcharts": "^1.3.9",
"react-async": "^10.0.0",
"react-avatar": "^3.9.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.14.0",
"react-filter-box": "^3.4.2",
"react-grid-layout": "^0.17.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.14.3",
"react-image-mapper": "0.0.15",
"react-lineto": "^3.2.1",
"react-native-svg": "^12.1.1",
"react-number-format": "^4.4.1",
"react-responsive-carousel": "^3.2.18",
"react-router-dom": "^5.1.2",
"react-scripts": "^4.0.3",
"react-split-pane": "^0.1.89",
"react-svg-pathline": "^0.5.0",
"react-youtube": "^7.11.2",
"recharts": "^1.8.5",
"stream": "^0.0.2",
"typescript": "^3.7.0-dev"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "webpack serve",
"production": "webpack --mode production"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.19.0",
"@babel/preset-env": "^7.19.0",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"csv-loader": "^3.0.5",
"file-loader": "^6.2.0",
"html-loader": "^4.1.0",
"html-webpack-plugin": "^5.5.0",
"interpolate-html-plugin": "^4.0.0",
"javascript-obfuscator": "^4.0.0",
"mini-css-extract-plugin": "^2.6.1",
"node-sass": "^7.0.1",
"object-assign": "^4.1.1",
"papaparse": "^5.3.2",
"sass-loader": "^13.0.2",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.1",
"webpack-obfuscator": "^3.5.1",
"xml-loader": "^1.2.1"
}
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
webpack.config.js
'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const InterpolateHtmlPlugin = require("interpolate-html-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
const webpack = require('webpack');
//const multimatch = require('multimatch');
const publicUrl = process.env.PUBLIC_URL;
module.exports = {
mode: "development",
entry: {
app: "./src/index.js"
},
devtool: 'source-map', //'eval',
devServer: {
static: {
directory: path.join(__dirname, 'public'),
staticOptions: {
index: false
}
},
liveReload: false,
compress: true,
port: 80,
open: true,
hot: false,
client: false,
historyApiFallback: false
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: "/"
},
resolve: {
extensions: [".wasm", ".mjs", ".js", ".jsx", ".ts", ".tsx", ".json"], // ['*', '.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src') // shortcut to reference src folder from anywhere
},
fallback: {
crypto: require.resolve('crypto-browserify'),
assert: require.resolve('assert'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
process: require.resolve('process/browser'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
vm: require.resolve('vm-browserify'),
zlib: require.resolve('browserify-zlib'),
isomorphic: require.resolve('isomorphic-fetch'),
log: false,
object_assign: require.resolve('object-assign'),
scheduler: require.resolve('scheduler')
}
},
module: {
rules: [
{ // config for es6 jsx
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ // config for sass compilation
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
{
loader: "sass-loader"
}
]
},
{
test: /\.css$/,
use: [
// [style-loader](/loaders/style-loader)
{ loader: 'style-loader' },
// [css-loader](/loaders/css-loader)
{
loader: 'css-loader',
options: {
modules: true
}
},
// [sass-loader](/loaders/sass-loader)
{ loader: 'sass-loader' }
]
},
{ // config for images
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset/resource',
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]']
},
{ // config for fonts
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
}
}
],
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.js$/,
exclude: [
//path.resolve(__dirname, 'content.js')
path.resolve(__dirname, 'node_modules/react/index.js')
],
enforce: 'post',
//exclude: /node_modules/,
use: {
loader: WebpackObfuscator.loader,
options: {
rotateStringArray: true
}
}
}
],
noParse: [require.resolve('typescript/lib/typescript.js')]
},
plugins: [
new WebpackObfuscator ({
rotateStringArray: true
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new HtmlWebpackPlugin({ // plugin for inserting scripts into html
template: path.resolve(__dirname, "public/index.html"),
inject: true,
PUBLIC_URL: publicUrl
}),
new MiniCssExtractPlugin({ // plugin for controlling how compiled css will be outputted and named
filename: "css/[name].css",
chunkFilename: "css/[id].css"
}),
new InterpolateHtmlPlugin({
PUBLIC_URL: ''
})
]
};
Can anybody help on this? Thanks in advance