Develop Reference

Webpack build results Terser Error: Unexpected token: punc ())

I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.
Error
ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
at c (/node_modules/terser/dist/bundle.min.js:1:28298)
at l (/node_modules/terser/dist/bundle.min.js:1:28389)
at f (/node_modules/terser/dist/bundle.min.js:1:28442)
at /node_modules/terser/dist/bundle.min.js:1:38167
at x (/node_modules/terser/dist/bundle.min.js:1:38198)
at O (/node_modules/terser/dist/bundle.min.js:1:34874)
at U (/node_modules/terser/dist/bundle.min.js:1:42405)
at me (/node_modules/terser/dist/bundle.min.js:1:48326)
at /terser/dist/bundle.min.js:1:49206
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js --env production",
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#types/jquery": "^3.5.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.6.2",
"prettier": "2.8.1",
"sass": "1.32",
"sass-loader": "^9.0.2",
"scss-loader": "0.0.1",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.0.8"
},
"dependencies": {
"#popperjs/core": "^2.9.2",
"#types/bootstrap": "^5.0.12",
"#types/googlemaps": "^3.43.3",
"#types/iframe-resizer": "^3.5.9",
"#types/js-cookie": "^3.0.0",
"#types/requirejs": "^2.1.32",
"autoprefixer": "^9.8.5",
"bootstrap": "^4.0.0",
"filemanager-webpack-plugin": "^8.0.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"highcharts": "^9.3.3",
"highlight.js": "^10.1.1",
"iframe-resizer": "^3.5.5",
"jquery": "^3.5.1",
"jquery-quicksand": "^1.6.0",
"js-cookie": "^3.0.1",
"loader-utils": "^2.0.3",
"parsleyjs": "^2.9.2",
"popper.js": "^1.0.8",
"postcss-loader": "^3.0.0",
"query-string": "^7.0.1",
"select2": "^4.0.13",
"slick-carousel": "^1.8.1",
"source-map-loader": "^2.0.1",
"swiper": "^6.5.3 <6.8",
"tippy.js": "^6.2.6",
"webpack": "^5.30.0"
},
"overrides": {
"got": "12.1.0",
"semver-regex#<3.1.4": "3.1.4",
"semver-regex#>=4.0.0 <4.0.3": "4.0.3",
"trim-newlines": "4.0.1",
"minimist": "1.2.6",
"terser#<4.8.1": "4.8.1",
"terser#>=5.0.0 <5.14.2": "5.14.2",
"nth-check": "2.0.1",
"minimatch": "3.0.5"
}
}
webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: false,
terserOptions: {
ecma: 5, // IE11
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
},
module: {
rules: [{
test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
use: info => {
const theme = path.basename(info.issuer, path.extname(info.issuer));
return [{
loader: "file-loader",
options: {
outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
name: "[name].[ext]",
publicPath: '../images'
},
},
]
}
}]
}
};
I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,
https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.
https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help
Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing

Webpack chunks are not found

I'm trying to setup webpack in my react.js application based on this starter kit
When I start development server, application is build successfully and I can see a list of chunks generated, but then application doesn't load and I got an error in console indicating that chunks were not found.
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
const SRC_DIR = path.join(__dirname, '/src');
const PUB_DIR = path.join(__dirname, '/public');
const DIST_DIR = path.join(__dirname, '/dist');
module.exports = {
entry: { main: `${SRC_DIR}/index.js` },
output: {
path: DIST_DIR,
chunkFilename: '[chunkhash].chunk.js',
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src/')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'source-map-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
},
},
{ loader: 'sass-loader' }
]
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
css: {
test: /\.(css|sass|scss)$/,
name: 'commons',
chunks: 'all',
minChunks: 2,
enforce: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
title: 'React-Redux-Webpack-Starter-Kit',
template: `${PUB_DIR}/index.html`,
filename: 'index.html',
favicon: `${PUB_DIR}/favicon.ico`,
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
}),
new WebpackMd5Hash(),
new Dotenv(),
],
devServer: {
port: 3003,
historyApiFallback: true,
},
};
My packate.json
{
"name": "FillRX",
"author": "Zoran Jeremic",
"email": "zoran.jeremic#gmail.com",
"licence": "UNLICENSED",
"version": "1.0.0",
"private": true,
"scripts": {
"lint": "eslint ./src",
"start": "webpack-dev-server --open --mode development --watch",
"prod": "webpack --mode production",
"build": "cross-env NODE_ENV=production && npm run prod",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/core": "^2.5.0",
"#date-io/moment": "^1.3.13",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/list": "^4.4.0",
"#fullcalendar/react": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#fullcalendar/timeline": "^4.4.0",
"#material-ui/core": "^4.9.9",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.48",
"#material-ui/pickers": "^3.2.10",
"#material-ui/styles": "^4.9.6",
"#mdx-js/react": "^1.5.8",
"#react-pdf/renderer": "^1.6.8",
"#redux-saga/core": "^1.1.3",
"apexcharts": "^3.18.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.17.0",
"babel-loader": "^8.1.0",
"change-case": "^4.1.1",
"chart.js": "^2.9.3",
"clsx": "^1.1.0",
"css-loader": "^4.2.1",
"dotenv-webpack": "^2.0.0",
"draft-js": "^0.11.5",
"formik": "^2.1.4",
"history": "^4.10.1",
"immer": "^6.0.3",
"immutable": "^4.0.0-rc.12",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"jss": "^10.1.1",
"jss-rtl": "^0.3.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.19",
"moment": "^2.24.0",
"nan": "^2.14.1",
"node-sass": "^4.14.1",
"notistack": "^0.9.9",
"nprogress": "^0.2.0",
"prismjs": "^1.20.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-app-polyfill": "^1.0.6",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.24.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-dropzone": "^10.2.2",
"react-feather": "^2.0.3",
"react-helmet": "^5.2.1",
"react-markdown": "^4.3.1",
"react-modal-image": "^2.5.0",
"react-perfect-scrollbar": "^1.5.8",
"react-quill": "^1.3.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.2",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sass-loader": "^9.0.3",
"socket.io-client": "^2.3.0",
"source-map-loader": "^1.0.1",
"uuid": "^7.0.3",
"webpack-dev-server": "^3.11.0",
"webpack-md5-hash": "^0.0.6",
"yup": "^0.28.3"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.8",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"html-webpack-plugin": "^4.3.0",
"mdx-loader": "^3.0.2",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^1.19.1",
"typescript": "^3.8.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
This is the error I'm getting in console:
All these chunks that are not found are generated during the application build, but I guess my configuration can't find it:
I didn't use webpack earlier so I'm not sure how to investigate this problem since error doesn't indicate what could be the problem, and google search gave me results indicating network problem which I don't think is the case here.
I would appreciate any help and suggestion.

The following configuration to the webpack should help :
{
path: DIST_DIR,
chunkFilename: "[chunkhash].chunk.js",
publicPath: "/",
}
Read more about this configutation here https://webpack.js.org/configuration/output/#outputpublicpath
Thanks

How do I import FullCalendar on my React Project?

I am getting TypeError: __webpack_require__.i(...) is not a function error when I am trying import FullCalendar from '#fullcalendar/react' on my project which is configured with webpack.
I tried manipulating webpack.config.dev.js but couldn't figure out how to implement it in a right way.
whenever I am trying to import any of the component from #fullcalendar it is throwing me the webpack error
webpack.config.dev.js:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
import CopyWebpackPlugin from 'copy-webpack-plugin';
export default {
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: [
// must be first entry to properly set public path
'babel-polyfill',
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
// new CopyWebpackPlugin([ { from: './src/scripts', to: 'assets' } ]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
// template: 'src/index.ejs',
// minify: {
// removeComments: true,
// collapseWhitespace: true
// },
// inject: true
// }),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
noInfo: true, // set to false to see a list of every file being bundled.
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/',
postcss: () => [autoprefixer],
}
})
],
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }
]
}
};
Package.json File:
{
"name": "MedFix",
"version": "1.0.0",
"description": "Project Tracking and Management",
"engines": {
"npm": ">=3"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node tools/srcServer.js",
"test": "mocha -w tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"open:dist": "babel-node tools/distServer.js",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist build:html",
"build": "babel-node tools/build.js && npm run open:dist",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
"author": "789",
"license": "123",
"dependencies": {
"#fullcalendar/bootstrap": "4.1.0",
"#fullcalendar/core": "4.1.0",
"#fullcalendar/daygrid": "4.1.0",
"#fullcalendar/interaction": "4.1.0",
"#fullcalendar/list": "4.1.0",
"#fullcalendar/react": "^4.1.0",
"#fullcalendar/timegrid": "4.1.0",
"#material-ui/core": "4.0.1",
"auth0-js": "7.6.1",
"auto-bind": "1.2.0",
"awesomplete": "1.1.2",
"axios": "0.16.2",
"babel-helper-bindify-decorators": "6.24.1",
"block-ui": "2.70.1",
"bootstrap-daterangepicker": "3.0.3",
"bootstrap-tagsinput": "0.7.1",
"cheerio": "1.0.0-rc.2",
"color": "2.0.0",
"copy-webpack-plugin": "4.0.1",
"country-currency-map": "1.0.9",
"country-data": "0.0.31",
"country-list": "2.1.0",
"currency-codes": "1.5.0",
"currency-symbol-map": "4.0.4",
"download-url-file": "0.0.2",
"downloadjs": "1.4.7",
"enzyme": "2.6.0",
"expect": "1.20.2",
"express": "4.15.3",
"fs": "0.0.1-security",
"fullcalendar": "3.10.0",
"geo-tz": "4.0.2",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jsdom": "11.1.0",
"mini-css-extract-plugin": "0.7.0",
"mocha": "3.4.2",
"mock-local-storage": "1.0.3",
"moment": "2.18.1",
"moment-timezone": "0.5.21",
"npm": "4.6.1",
"object-assign": "4.1.0",
"opentok-react": "0.7.0",
"path": "0.12.7",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-autobind": "1.0.6",
"react-autocomplete": "1.8.1",
"react-autosize-textarea": "0.4.8",
"react-autosuggest": "9.3.2",
"react-big-calendar": "0.14.0",
"react-block-ui": "1.1.1",
"react-bootstrap-daterangepicker": "3.4.0",
"react-bootstrap-datetimerangepicker": "2.0.4",
"react-bootstrap-table": "4.0.3",
"react-bootstrap-time-picker": "1.0.3",
"react-bootstrap-typeahead": "3.2.0",
"react-bootstrap-validation": "0.1.11",
"react-bootstrap-xeditable": "0.2.7",
"react-calendar": "2.14.0",
"react-checkbox-group": "4.0.1",
"react-ckeditor-component": "1.0.7",
"react-confirm-alert": "2.0.2",
"react-cookie-consent": "1.7.0",
"react-credit-card-input": "1.0.9",
"react-currency-input": "1.3.4",
"react-datepicker": "1.5.0",
"react-device-detect": "1.6.2",
"react-display-name": "0.2.4",
"react-dom": "15.4.1",
"react-dropzone": "4.2.7",
"react-edit-inline": "1.0.8",
"react-escape-html": "1.0.5",
"react-geocode": "0.1.2",
"react-google-autocomplete": "1.0.18",
"react-html-parser": "2.0.2",
"react-idle": "3.0.0",
"react-imask": "3.4.0",
"react-input-mask": "0.9.1",
"react-js-pagination": "3.0.2",
"react-ladda": "5.0.7",
"react-loadable": "5.3.1",
"react-loading": "2.0.2",
"react-maskedinput": "4.0.1",
"react-modal-bootstrap": "1.1.1",
"react-moment": "0.7.0",
"react-notification-system": "0.2.15",
"react-paginate": "5.0.0",
"react-pdf": "3.0.5",
"react-pull-to-refresh": "1.1.2",
"react-redux": "5.0.1",
"react-redux-toastr": "7.2.6",
"react-reorder": "3.0.0-alpha.6",
"react-responsive-modal": "2.0.1",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-rte": "0.11.0",
"react-scripts": "1.1.4",
"react-scrollable-anchor": "0.6.1",
"react-select": "1.0.0-rc.4",
"react-signature-pad-wrapper": "0.0.9",
"react-star-rating-component": "1.4.1",
"react-stripe-checkout": "2.6.3",
"react-switch": "3.0.4",
"react-tag-input": "5.0.2",
"react-tagsinput": "3.17.0",
"react-text-mask": "5.1.0",
"react-textarea-count": "1.0.3",
"react-times": "3.0.0",
"react-timezone": "2.1.0",
"react-toastify": "4.0.1",
"react-tooltip": "3.6.1",
"react-typeahead": "2.0.0-alpha.8",
"react-validation": "3.0.7",
"react-x-editable": "0.0.5-beta",
"reactstrap": "6.0.1",
"recharts": "1.0.1",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.1.0",
"sortablejs": "1.7.0",
"sweetalert": "1.1.3",
"text-mask-addons": "3.7.1",
"timezoner": "0.2.0",
"toastr": "2.1.2",
"video-react": "0.13.6"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.51",
"#babel/preset-react": "^7.0.0-beta.51",
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-loader": "6.2.10",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-polyfill": "6.20.0",
"babel-preset-env": "1.3.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "2.18.5",
"chalk": "1.1.3",
"compression": "1.6.2",
"compression-webpack-plugin": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"css-loader": "0.26.1",
"datatables.net": "1.10.16",
"enzyme": "2.6.0",
"express": "4.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "4.12.0",
"npm-run-all": "3.1.2",
"open": "0.0.5",
"opn-cli": "^3.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-immutable-state-invariant": "1.2.4",
"redux-logger": "3.0.6",
"replace": "0.3.0",
"riek": "1.1.0",
"rimraf": "2.5.4",
"sass-loader": "6.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.17.1"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
},
"babel": {
"presets": [
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"env",
"react-hmre"
]
},
"production": {
"presets": [
[
"env",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"env"
]
}
}
}
}

Trouble adding styled-components to React

I'm trying to add styled-components to some react boilerplate code. When I load the homepage I get the following error in console:
Uncaught TypeError: __webpack_require__.i(...) is not a function
at Object.eval (styled-components.browser.esm.js?60a8:1670)
at eval (313:2534)
at Object.<anonymous> (bundle.js:3837)
at __webpack_require__ (bundle.js:20)
at eval (index.js?b50c:62)
at Object.<anonymous> (bundle.js:1620)
at __webpack_require__ (bundle.js:20)
at eval (index.js?c3ed:7)
at Object.<anonymous> (bundle.js:1908)
at __webpack_require__ (bundle.js:20)
The App component looks like this:
import React from 'react';
import styled from 'styled-components';
const AppWrapper = styled.div`
max-width: 100px;
`;
const App = ({ user }) => (
<AppWrapper>
Test app
</AppWrapper>
);
export default App;
If I remove the line import styled from 'styled-components'; as well as replace AppWrapper with a div it works as expected.
I've installed styled-components using npm.
My webpack config looks like this:
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
entry: './client/src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'client/src/public/dist')
},
context: __dirname,
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '*']
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-1'],
sourceMap: true
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new LiveReloadPlugin({appendScriptTag: true})
]
};
Here is my package.json
{
"name": "biolerplate",
"version": "1.0.0",
"description": "a boilerplate for react, redux, & express",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"build-watch": "npm run build -- -w -d",
"start": "node server/index.js",
"start-watch": "nodemon server/index.js --watch server --watch db",
"dev": "cross-env NODE_ENV=development concurrently --kill-others --prefix \"[{name}]\" --names \"BUILD,SERVE\" -c \"bgBlack.bold.green,bgBlack.bold.red\" \"npm run build-watch\" \"npm run start-watch\""
},
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^3.9.2",
"axios": "^0.16.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.1",
"connect-session-sequelize": "^4.1.0",
"express": "^4.15.2",
"express-session": "^1.15.3",
"immutable": "^4.0.0-rc.12",
"nodemon": "^1.11.0",
"passport": "^0.3.2",
"passport-google-oauth2": "^0.1.6",
"pg": "^6.2.4",
"pg-hstore": "^2.3.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-select": "^2.3.0",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0",
"reselect": "^4.0.0",
"sequelize": "^4.4.0",
"styled-components": "^4.1.3",
"volleyball": "^1.4.1",
"webpack-livereload-plugin": "^0.11.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"concurrently": "^3.4.0",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.0.0",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"node-sass": "^4.5.2",
"redux-devtools-extension": "^2.13.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}
Any idea what's going on?

styled-components 4.1.3 is not gonna work with react 15.5.4 I think.
Try upping your dependencies and run npm install.

React.js Error: Invariant Violation: Minified React error #37

I've tried looking up in the internet, but I can't find the solution for this error.
Essentially, when I run my app in my localhost via npm start, it runs without a problem.
However, when I switch to git branch gh-pages to host in the gh-pages, I see the following error in my console.log
Uncaught Invariant Violation: Minified React error #37
_registerComponent(...): Target container is not a DOM element is what error #37 means.
Link to Git App Repository gh-pages branch
Here's my current setup:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ghpages = require('gh-pages');
var WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "./bundle.js.map",
path: path.join(__dirname, './static')
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.s?css$/,
loaders: ['style','css','sass'],
include: path.join(__dirname, 'src')
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
}
},
devServer: {
historyApiFallback: true,
contentBase: './',
outputPath: path.join(__dirname, './dist')
}
};
package.json
{
"name": "recipe-box",
"version": "1.0.0",
"description": "Portfolio",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"image-webpack-loader": "^2.0.0",
"jquery": "^3.1.0",
"jsdom": "^9.5.0",
"mocha": "^3.0.2",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^15.3.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.0",
"write-file-webpack-plugin": "^3.3.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"css-loader": "^0.25.0",
"express": "^4.14.0",
"jquery": "^2.2.4",
"lodash": "^4.16.1",
"materialize-css": "^0.97.7",
"node-sass": "^3.8.0",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.1 ",
"react-materialize": "^0.16.4",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.4",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.0",
"shortid": "^2.2.6",
"style-loader": "^0.13.1"
}
}

Answered my own question
It looked like I had to move bundle.js out from dist folder to the same directory where my index.html was.