Related
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
Try in your terminal
npm install object-assign
Been trying to make my React app work with IE11 with not luck so far.
Getting the error:
Basically this error points to arrow function during bundle
I already tried adding react-app-polyfill in my index.js file and then in my package the advised config from this article and other posts .
I downgraded query-string to 5.1.1 like advised here.
And also tried importing core-js/stable and regenerator like advised here.
Also deleted node_modules and or only cache via rm -rf node_modules/.cache/.
And probably checked all similar issues as mine here in SO.
Sadly none of these options have helped me at all.
Anybody sees something in my config?
My package.json config:
{
"scripts": {
"postinstall": "patch-package",
"start": "cross-env NODE_ENV=development node ./server.js",
"start:debug": "cross-env NODE_ENV=development node --inspect ./server.js",
"start:prod": "cross-env NODE_ENV=production node ./server.js",
"lint": "eslint --fix ./src ./server",
"build": "cross-env NODE_ENV=production webpack",
"prestart": "npm run lint",
"prebuild": "npm run lint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
"author": "elios264",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#hot-loader/react-dom": "^17.0.1",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"classnames": "^2.2.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"core-js": "^3.8.0",
"cross-env": "^7.0.3",
"crypto-browserify": "^3.12.0",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"downscale": "^1.0.6",
"eslint": "^7.14.0",
"eslint-import-resolver-node": "^0.3.4",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"file-dialog": "0.0.8",
"file-loader": "^6.2.0",
"jwt-decode": "^3.1.2",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"moment-duration-format": "^2.3.2",
"moment-locales-webpack-plugin": "^1.2.0",
"patch-package": "^6.2.2",
"path-browserify": "^1.0.1",
"process": "^0.11.10",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-day-picker": "^7.4.8",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-hot-loader": "^4.13.0",
"react-rangeslider": "^2.2.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-virtualized": "^9.22.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"search-parser": "^0.1.19",
"semantic-ui-less": "^2.4.1",
"semantic-ui-react": "^2.0.1",
"stream-browserify": "^3.0.0",
"sweetalert": "^2.1.2",
"tachyons": "^4.12.0",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.9.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "^4.0.2",
"webpack-hot-middleware": "^2.25.0",
"xlsx": "^0.16.9"
},
"dependencies": {
"#azure/storage-blob": "^12.3.0",
"#supercharge/promise-pool": "^1.6.0",
"applicationinsights": "^1.8.10",
"compression": "^1.7.4",
"cors": "^2.8.5",
"env2": "^2.2.2",
"express": "^4.17.1",
"fast-xml-parser": "^3.17.5",
"joi": "^17.3.0",
"jsonwebtoken": "^8.5.1",
"jwk-to-pem": "^2.0.4",
"knex": "^0.21.12",
"locutus": "^2.0.14",
"lodash": "^4.17.20",
"mjml": "^4.7.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"mssql": "^6.2.3",
"nanoid": "^3.1.20",
"node-cache": "^5.1.2",
"node-fetch": "^2.6.1",
"nodemailer": "^6.4.16",
"parse": "^2.17.0",
"parse-dashboard": "^2.1.0",
"parse-server": "^4.4.0",
"query-string": "^5.1.1",
"react-app-polyfill": "^2.0.0",
"react-sortable-hoc": "^1.11.0",
"saslprep": "^1.0.3",
"sharp": "^0.26.3",
"uuid": "^8.3.1"
}
}
My babel.config.js
module.exports = {
sourceType: process.env.NODE_ENV === 'production' ? 'unambiguous' : 'module',
presets: [
['#babel/preset-react', { 'runtime': 'automatic' }],
['#babel/preset-env', {
loose: true,
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
modules: false,
targets: { browsers: process.env.NODE_ENV === 'production' ? 'chrome 53' : 'chrome 86' },
}],
],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
'react-hot-loader/babel',
],
};
And my appLoader which is equivalent to index.js
/* eslint-disable import/first */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// also tried with
// import core-js/stable;
// import regenerator-runtime/runtime
import 'tachyons';
import ReactDOM from 'react-dom';
import { MemoryRouter, Route } from 'react-router-dom';
import { App } from './components/app';
ReactDOM.render(
<MemoryRouter>
<Route component={App} />
</MemoryRouter>,
document.getElementById('root')
);
Finally my webpack.config.js
require('env2')('./.env');
const _ = require('lodash');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const ClosurePlugin = require('closure-webpack-plugin');
const isDev = process.env.NODE_ENV !== 'production';
const ifDev = (then) => (isDev ? then : null);
const ifProd = (then) => (!isDev ? then : null);
module.exports = {
target: isDev ? 'web' : ['web', 'es5'],
profile: true,
mode: isDev ? 'development' : 'production',
entry: {
admin: [ifDev('webpack-hot-middleware/client'), ifDev('react-hot-loader/patch'), './admin/appLoader'].filter(_.identity),
sso: ['./sso/publicPath', ifDev('webpack-hot-middleware/client?dynamicPublicPath=true'), ifDev('react-hot-loader/patch'), './sso/appLoader'].filter(_.identity),
},
optimization: {
runtimeChunk: isDev,
minimizer: [
new TerserPlugin({ extractComments: false, terserOptions: { toplevel: true, output: { comments: false } } }),
new CssMinimizerPlugin(),
new ClosurePlugin({mode: 'STANDARD'}, {
debug: true,
languageOut: 'ECMASCRIPT5',
renaming: false
})
],
},
performance: { hints: false },
context: path.resolve(__dirname, './src'),
devtool: false,
output: {
publicPath: '/',
path: path.resolve(__dirname, './dist'),
filename: isDev ? '[name].bundle.js' : '[name].bundle.[contenthash].js',
},
resolve: {
fallback: {
'crypto': require.resolve('crypto-browserify'),
'path': require.resolve('path-browserify'),
'stream': require.resolve('stream-browserify'),
},
modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './assets'), 'node_modules'],
alias: {
'#': path.resolve(__dirname, './src'), // include your file like this in less files: ~#/yourFile.less
'../../theme.config$': path.join(__dirname, './src/theme/semantic/theme.config.less'), // semantic requirement
'react-dom': isDev ? '#hot-loader/react-dom' : 'react-dom',
},
},
plugins: [
new webpack.ProvidePlugin({ process: 'process/browser' }),
ifDev(new webpack.SourceMapDevToolPlugin({ filename: '[file].map', exclude: /node_modules/ })),
ifProd(new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', path.join(process.cwd(), 'logs/**/*')], verbose: true })),
ifProd(new webpack.LoaderOptionsPlugin({ minimize: true, debug: false })),
new MomentLocalesPlugin(),
ifDev(new webpack.HotModuleReplacementPlugin()),
new WebpackAssetsManifest({ publicPath: true, writeToDisk: true, entrypoints: true, output: '../rendering-manifest.json' }),
new MiniCssExtractPlugin({ filename: isDev ? '[name].css' : '[name].bundle.[contenthash].css' }),
ifProd(new CopyWebpackPlugin({ patterns: [{ from: path.resolve(__dirname, './assets/static') }] })),
].filter(_.identity),
module: {
rules: [{
test: /\.js$/,
include: [path.resolve(__dirname, './src'), ifProd(path.resolve(__dirname, './node_modules/joi'))].filter(_.identity),
use: 'babel-loader',
}, {
test: /\.(css|less)$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader', options: { importLoaders: 1, sourceMap: isDev } },
{ loader: 'less-loader', options: { sourceMap: isDev } },
],
}, {
test: /\.jpe?g$|\.gif$|\.png$|\.ico$|\.ttf$|\.eot$|\.svg$|\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{ loader: 'file-loader', options: { esModule: false, name: isDev ? '[name].[ext]' : '[name].[contentHash].[ext]' } }],
}],
},
};
Im having a real hard time with this one. I was keen to get into webpack and do a setup from the ground up most of my build is building apart from the section that populates the index.html file. Webpack is throwing an error like so
ERROR in Error: undefined:1
undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js
I also get a similar error with css-loader
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
SyntaxError: Unexpected identifier
at Object../node_modules/css-loader/dist/cjs.js
The odd thing about this error is the start of the path which should be ./node_modules from the location webpack is building from but for some reason its assuming its ../node_modules
The full error is below if anyone could hazard a guess to why this is happening
ERROR in Error: undefined:1
undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js */ "./node_modules/lodash/lodash.js"defined undefined=undefined undefinedrundefinedeundefinedqundefineduundefinediundefinedrundefinedeundef
ined(undefined"undefined!undefined!undefined.undefined.undefined/undefinednundefinedoundefineddundefinedeundefined_undefinedmundefinedoundefineddundefineduundefinedlundefinedeundefinedsundefined/undefinedl
undefinedoundefineddundefinedaundefinedsundefinedhundefined/undefinedlundefinedoundefineddundefinedaundefinedsundefinedhundefined.undefinedjundefinedsundefined"undefined)undefined;undefinedmundefinedoundef
ineddundefineduundefinedlundefinedeundefined.undefinedeundefinedxundefinedpundefinedoundefinedrundefinedtundefinedsundefined undefined=undefined undefinedfundefineduundefinednundefinedcundefinedtundefinedi
undefinedoundefinednundefined undefined(undefinedtundefinedeundefinedmundefinedpundefinedlundefinedaundefinedtundefinedeundefinedPundefinedaundefinedrundefinedaundefinedmundefinedsundefined)
SyntaxError: Unexpected string
- template.html:97 Object../node_modules/html-webpack-plugin/lib/loader.js!./src/template.html
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:97:1
- template.html:21 __webpack_require__
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:21:30
- template.html:85
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:85:18
- template.html:88
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:88:10
- index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
[experimental_cloud_storage]/[html-webpack-plugin]/index.js:247:28
- index.js:161
[experimental_cloud_storage]/[html-webpack-plugin]/index.js:161:23
The webpack config looks like so
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['babel-polyfill', './src/index.jsx'],
target: 'web',
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, 'wwwroot'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
{
test: /\.json$/,
use: ['json-loader'],
type: 'javascript/auto',
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader',
name: '[name].[ext]',
outputPath: 'assets/',
publicPath: '/assets/',
},
},
],
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'fast-sass-loader',
options: {
sourceMap: true,
data: '#import "app.scss";',
includePaths: [path.resolve(__dirname, 'src/styles/sass')],
},
},
],
},
],
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new StyleLintPlugin({
syntax: 'scss',
}),
new MiniCssExtractPlugin({
filename: 'style.bundle.css',
}),
new HtmlWebpackPlugin({
template: './src/template.html',
filename: './index.html',
favicon: './src/assets/img/favicon.png',
}),
],
};
My babel config looks like this
module.exports = {
presets: [
[
'#babel/preset-env', {
targets: { esmodules: true },
},
],
'#babel/preset-react',
],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-object-rest-spread',
['inline-react-svg', {
svgo: {
plugins: [
{
removeTitle: true,
},
{
removeAttrs: { attrs: '(data-name)' },
},
],
},
}],
],
};
And the package.json looks like this
{
"name": "experimental_cloud_storage",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.4.1",
"firebase": "^7.8.2",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^9.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack --config webpack.dev.js --watch"
},
"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.6.4",
"#babel/plugin-proposal-object-rest-spread": "^7.6.2",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"autoprefixer": "^8.4.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-inline-react-svg": "^1.1.0",
"babel-plugin-lodash": "^3.3.4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^3.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.5.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"fast-sass-loader": "^1.5.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.0.0",
"jest-cli": "^23.0.0",
"jest-html-reporter": "^2.5.0",
"jest-localstorage-mock": "^2.4.0",
"jest-teamcity-reporter": "^0.9.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.4.5",
"mock-socket": "^8.0.5",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.4",
"precss": "^4.0.0",
"react-inlinesvg": "^1.1.7",
"react-svg-loader": "^3.0.3",
"redux-mock-store": "^1.5.4",
"resolve-url-loader": "^3.1.0",
"speed-measure-webpack-plugin": "^1.3.1",
"style-loader": "^0.21.0",
"stylelint": "^9.10.1",
"stylelint-config-airbnb": "0.0.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-order": "^0.8.1",
"stylelint-scss": "^3.5.4",
"stylelint-webpack-plugin": "^0.10.4",
"svg-inline-loader": "^0.8.0",
"terser-webpack-plugin": "^2.1.3",
"url-loader": "^2.2.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-merge": "^4.2.2",
"webpack-plugin-replace": "^1.2.0"
}
}
Cheers in advance as this one has had me stuck for over an hour with nothing seeming to do the trick from aliasing the modules folder including the modules: ['node_modules'] in the resolve part of the config to a whole variety of different things.
From looking around I think its something to do with the HtmlWebpackPlugin but I could be completely wrong on that one
So after hours of debugging I have finally found what was causing the issue.
when the script strats via npm it calls webpack.dev.js which merges the common setup with the dev setup. i removed all the values from
plugins: [
new ReplacePlugin({
exclude: [
/node_modules/,
/obj/,
/Properties/,
/react/,
/redux/,
/\.js$/,
],
values: {}, <--- here leaving im assuming lodash to freak out as it was trying to merge nothing.
}),
],
After i removed the plugins from that file everything was fine as im again assuming that the plugin wasnt being called with no arguments.
I have a React project that is bundled by Webpack and served up by react_on_rails. In this project I use the Select component from react-select. Everything works as expected when using Webpack 3. After upgrading to Webpack 4, everything also works as expected in development mode. However, when I build in production mode, the Select component from react-select does not have any styling applied to it.
(I don't have enough reputation points to post images so I am going to provide links to the images.)
Here is what the selector looks like when built in development mode.
selector with styling
And here is what the selector looks like when built in production mode.
selector without styling
The reason the styles are not applied is that react-select uses Emotion css-in-js and the css gets injected into the head in stylesheets.
Here is an example in the head when in development mode.
screenshot of stylesheets in the head
These style tags are all absent in the head when in production mode.
I have narrowed it down to the fact that it seems to be caused by the webpack minification step. If I add
optimization: {
minimize: false
}
to my webpack.config.js, then the styles are present when in production mode.
Here's my webpack.config.js without the optimization added:
const webpack = require('webpack');
const pathLib = require('path');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/analytic',
'./app/bundles/Pulse/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: pathLib.resolve(__dirname, '../app/assets/webpack'),
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", '.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
],
module: {
rules: [
{
test: /travel-info-type.ts/,
use: [{
loader: 'expose-loader',
options: 'TravelInfoType'
}]
},
{
test: /heatmap-getter.ts/,
use: [{
loader: 'expose-loader',
options: 'HeatmapGetter'
}]
},
{
test: /data-hub.ts/,
use: [{
loader: 'expose-loader',
options: 'DataHub'
}]
},
{
test: /exported-functions.js/,
use: [{
loader: 'expose-loader',
options: 'ExportedFunctions'
}]
},
{
test: /analyticsTracker.ts/,
use: [{
loader: 'expose-loader',
options: 'analyticsTracker'
}]
},
{
test: /railsAnalytics.js/,
use: [{
loader: 'expose-loader',
options: 'railsAnalytics'
}]
},
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
}
},
},
{
test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
use: [{
loader: 'url-loader'
}],
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Extract css files
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [ "style-loader", "css-loader", "sass-loader" ],
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
And here is my package.json
{
"name": "myProject",
"version": "0.0.1",
"private": true,
"scripts": {
"build:test": "webpack --config webpack.config.js",
"build:production": "NODE_ENV=production webpack --mode=production --config webpack.config.js",
"build:development": "webpack --mode=development -w --config webpack.config.js",
"test": "jest",
"test:watch": "yarn test --watch",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -o ../public/storybook"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"actioncable": "^5.2.0",
"color-convert": "^1.9.0",
"es5-shim": "^4.5.9",
"expose-loader": "^0.7.3",
"imports-loader": "^0.7.1",
"js-cookie": "^2.2.0",
"moment": "^2.18.1",
"prop-types": "^15.5.7",
"rc-slider": "^8.6.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-on-rails": "6.9.3",
"react-onclickoutside": "^5.11.1",
"react-redux": "^6.0.0",
"react-router-dom": "^4.1.1",
"react-select": "^2.3.0",
"react-table": "^6.0.5",
"react-toggle-switch": "^2.1.3",
"react-tooltip": "^3.6.1",
"redux": "^4.0.1",
"redux-batched-actions": "^0.2.0",
"redux-thunk": "^2.3.0",
"rxjs": "5.5.2"
},
"devDependencies": {
"#storybook/addon-knobs": "^3.4.11",
"#storybook/addons": "^3.4.11",
"#storybook/react": "^3.4.11",
"#types/actioncable": "^0.0.2",
"#types/bugsnag": "^2.5.28",
"#types/google-maps": "^3.2.0",
"#types/googlemaps": "^3.26.11",
"#types/highcharts": "^4.2.55",
"#types/jest": "23.3.10",
"#types/jquery": "^2.0.45",
"#types/js-cookie": "^2.2.0",
"#types/lodash": "^4.14.118",
"#types/moment": "^2.13.0",
"#types/rc-slider": "^8.6.3",
"#types/react": "^16.8.1",
"#types/react-dates": "^16.0.5",
"#types/react-dom": "16.0.11",
"#types/react-redux": "^7.0.1",
"#types/react-router": "^4.0.26",
"#types/react-router-dom": "^4.2.7",
"#types/react-select": "^2.0.11",
"#types/react-tooltip": "^3.3.5",
"ts-loader": "^5.3.3",
"babel-cli": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.22.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.0",
"highcharts": "^6.0.3",
"jest": "23.3.0",
"jquery": "^3.2.1",
"jsdom": "^10.0.0",
"node-sass": "^4.9.3",
"react-test-renderer": "^16.7.0",
"redux-mock-store": "^1.2.3",
"sass-loader": "^7.1.0",
"sinon": "^2.4.1",
"source-map-loader": "^0.2.1",
"storybook-addon-jsx": "^5.4.0",
"style-loader": "^0.16.1",
"ts-jest": "23.10.5",
"typescript": "^3.0.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
}
}
And here is the component that is using the Select component:
import * as React from 'react'
import Select from 'react-select'
import { MultiSelectOption } from '../interfaces/SelectionUI'
class MultipleSelectPicker extends React.PureComponent<MultipleSelectPickerProps> {
onChange = (allSelected: MultiSelectOption[]) => {
const {
onAdd,
onRemove,
values,
} = this.props
if (values.length < allSelected.length) {
const addedOption = allSelected.find(selected => !values.includes(selected))
onAdd(addedOption)
}
else if (values.length > allSelected.length) {
const removedOption = values.find(value => !allSelected.includes(value))
onRemove(removedOption)
}
}
render() {
const {
name,
values,
options,
placeholder,
} = this.props
return (
<Select
name={name}
value={values}
className={`${name} selectpicker`}
options={options}
onChange={this.onChange}
isMulti
placeholder={placeholder}
/>
)
}
}
export interface MultipleSelectPickerProps {
name: string,
options: MultiSelectOption[],
values: MultiSelectOption[],
placeholder?: string,
onAdd: (addedOption: MultiSelectOption) => void,
onRemove: (removedOption: MultiSelectOption) => void,
}
export default MultipleSelectPicker
Anyone have an idea about why the Webpack 4 minimization would keep the react-select Emotion stylesheets from getting injected and how to fix that?
I found a workaround. I swapped out the default webpack minimizer for the (UglifyJsPlugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin] and now everything works as expected.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [ new UglifyJsPlugin() ],
}
Not sure why I'm getting this error as webpack is setup the same as an older project.
ERROR in ./app/static/imgs/sketch.svg
Module parse failed: /Users/leongaban/projects/personal/CoinHover/coinhover.io/app/static/imgs/sketch.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" encoding="UTF-8"?>
| <svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
| <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./app/coinhover.scss 6:13780-13815
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The _svg.scss file:
.close-x {
position: relative;
background-size: 400px 400px;
background-image: url('static/imgs/sketch.svg'), none;
}
.close-x {
width: 30px;
height: 30px;
background-position: -41px -2px;
cursor: pointer;
}
package.json
{
"name": "coinhover",
"version": "0.0.2",
"main": "index.js",
"author": "Leon Gaban",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "eslint app && jest",
"test:fix": "eslint --fix app"
},
"now": {
"name": "coinhover",
"engines": {
"node": "7.4.x"
},
"alias": "coinhover.io"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"chalk": "^2.1.0",
"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"svg-loader": "^0.0.2"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
}
}
webpack
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';
const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'coinhover.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);
const PATHS = {
app,
build: coinhover
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: coinhover
})
}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'url-loader?limit=100000'
}
]
},
resolve: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] }
// resolve: {
// modules: ['node_modules', path.resolve(__dirname, '/app')]
// }
};
const developmentConfig = {
devServer: {
publicPath: '',
contentBase: path.join(__dirname, 'dist'),
quiet: true,
inline: true,
compress: true,
stats: 'errors-only',
open: true
},
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
);
I do not know if its equivocal in the version of Webpack you are using (I've been using 1.15.0), but Webpack has issues parsing certain <xml> tags and within the <svg> element there are sometimes xmls/xmlns attributes that Webpack has problems parsing. These are generally erroneous verbose leftovers from Illustrator or other SVG generating applications. I had a very similar if not identical error where Webpack prompted for a loader in the error screen.
I bet if you strip your "sketch.svg" document of the <xml> tag wrapper and possibly the xmlns attributes as well Webpack will compile successfully.
(Boo to the users who gripe about stackoverflow best practices and do not even attempt to help.)