Related
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]' } }],
}],
},
};
I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}
I have a quick question. I just took over a React Boilerplate project. It uses Material UI && Bootstrap. But bootstrap is only added as a development dependency. How will the boilerplate behave/work in production mode? I don't see how.
Package.json:
"devDependencies": {
"babel-core": "^6.4.5",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",
"bootstrap": "^3.3.5",
"bootstrap-loader": "^1.2.0-beta.1",
"bootstrap-sass": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"eslint": "^3.4.0",
"eslint-config-airbnb": "13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^3.0.1",
"eslint-plugin-react": "^6.1.2",
"webpack": "^1.12.11",
"webpack-dev-middleware": "^1.5.0",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^1.0.2"
},
"dependencies": {
"autoprefixer": "6.5.3",
"axios": "^0.15.3",
"classnames": "^2.2.3",
"css-loader": "^0.26.1",
"csswring": "^5.1.0",
"deep-equal": "^1.0.1",
"expect": "^1.13.4",
"exports-loader": "^0.6.2",
"expose-loader": "^0.7.1",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gapi": "0.0.3",
"history": "^4.4.1",
"http-proxy": "^1.12.0",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"jquery": "^3.1.0",
"jwt-decode": "^2.1.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"lodash": "^4.5.1",
"material-ui": "^0.20.2",
"material-ui-upload": "^1.2.1",
"mocha": "^3.0.2",
"morgan": "^1.6.1",
"node-sass": "^4.9.3",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.1.1",
"q": "^1.4.1",
"qs": "^6.1.0",
"rc-datepicker": "^4.0.1",
"react": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-calendar-component": "^1.0.0",
"react-date-picker": "^5.3.28",
"react-datepicker": "^0.37.0",
"react-document-meta": "^2.0.0-rc2",
"react-dom": "^15.1.0",
"react-dropzone": "^5.1.0",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "^1.3.0",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "^5.3.3",
"react-redux": "^4.3.0",
"react-router": "3.0.0",
"react-router-redux": "^4.0.0",
"react-tap-event-plugin": "^2.0.1",
"react-transform-hmr": "^1.0.1",
"redux": "^3.2.1",
"redux-form": "^6.0.1",
"redux-logger": "2.7.4",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"yargs": "^6.5.0"
}
From bootstrap, we use mainly the grid and pull commands, for buttons. I don't get it though. Also, this is quite the complicated and old boilerplate.
Also another thing is that my scss doesn't get applied whatever method I use.. Inline, scss, css. I don't get it though. His webpack config is way too complicated, and I don't get it. Can someone help me.
Here is the webpack for Development:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
},{
test: /\.css$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
The webpack for Production:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['bootstrap-loader/extractStyles'],
output: {
publicPath: 'dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
The common one:
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');
const development = require('./dev.config');
const production = require('./prod.config');
require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.jsx', '.js', '.json', '.scss', '.css'],
modulesDirectories: ['node_modules', PATHS.app],
},
module: {
loaders: [{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports?jQuery=jquery',
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff2',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-otf',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/,
}, {
test: /\.png$/,
loader: 'file?name=[name].[ext]',
}, {
test: /\.jpg$/,
loader: 'file?name=[name].[ext]',
}],
},
postcss: (webpack) => (
[
autoprefixer({
browsers: ['last 2 versions'],
}),
postcssImport({
addDependencyTo: webpack,
}),
]
),
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(production, common);
}
If you could help me understand this. And also answer my question would be great thank you!!
I've updated my webpack file. Now it's won't apply my custom style to the main style bundle. No errors, classes with custom style just missing in bundle.
When I'm running build with development mode - everything is ok and my styles are exist in the bundle. Such happens only with production build.
I tried extract-text-webpack-plugin instead mini-css-extract-plugin but result is same - in prod build my styles are missing.
I'll be very apriciated for any kind of help.
Here is files:
webpack.config.js
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = 'public';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);
module.exports = (env, options) => {
const mode = env ? env.mode : options.mode;
return {
entry: './assets/app.jsx',
output: {
path: path.resolve(__dirname, publicPath),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
},
],
},
{
test: /\.s?css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loaders: ['babel-loader'],
resolve: { extensions: ['.js', '.jsx'] },
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70,
},
},
},
],
},
{
test: /\.(otf|ttf|woff|woff2)$/,
exclude: [/node_modules/],
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(publicPath, {}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './assets/www/index.html',
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
},
sourceMap: true,
}),
],
},
devServer: {
contentBase: path.join(__dirname),
compress: true,
port: 9000,
publicPath: '/',
historyApiFallback: true,
},
devtool: mode === 'development' ? 'cheap-inline-module-source-map' : '',
};
};
package.json
{
"name": "react-templates",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"sideEffects": false,
"scripts": {
"build": "webpack --progress --mode production",
"build-dev": "webpack -p --progress --mode development",
"start": "webpack-dev-server --mode production --open",
"eslint": "eslint . --ext .js --ext .jsx",
"stylelint": "stylelint assets/scss",
"deploy-current-branch-dev": "npm run build-dev && firebase deploy",
"deploy-dev": "git checkout -- . && git clean -fd && git checkout develop && git remote update && git pull && npm run build-dev && firebase deploy"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "3.8.2",
"autoprefixer": "9.0.1",
"brace": "0.11.1",
"clean-webpack-plugin": "0.1.19",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fast-async": "^6.3.8",
"file-system": "2.2.2",
"firebase": "5.3.0",
"history": "4.7.2",
"html-webpack-plugin": "^3.2.0",
"less-vars-to-js": "1.3.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.4.3",
"moment": "2.22.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"prop-types": "15.6.2",
"react": "15.6.1",
"react-ace": "6.1.4",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "15.6.1",
"react-favicon": "0.0.14",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-sticky": "^6.0.3",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.16.1",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-import": "^1.9.1",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"file-loader": "^2.0.0",
"husky": "1.0.0-rc.13",
"image-webpack-loader": "^4.3.1",
"less": "3.8.1",
"less-loader": "4.1.0",
"node-sass": "4.9.2",
"postcss-loader": "2.1.6",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.4.0",
"stylelint-config-recommended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"husky": {
"hooks": {
"pre-commit": "npm run eslint && npm run stylelint"
}
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
The probplem is sideEffects: false in my package.json file.
I found an issue on Github and there are some issues related to it.
Main reason I did it - I wanted to make a tree shank in my development mode. It worked as I expected but in production mode all my custom styles are missing. To solve this problem I just removed sideEffects: false. So I lost tree shank in dev mode (think it's not good solution to make it in development mode but however).
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.)