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"
]
}
}
}
}
Related
I started working on a 5-years old python+react project. I had many problems regarding old packages or incompatibility. I managed to fix most of the problems that I faced except for this one:
ERROR in ./app/index.js
Module parse failed: /home/kaiz3n/Desktop/iris/iris-agent/app/index.js Unexpected token (37:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:6)
at Parser.pp$4.raise (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExprList (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3)
package.json
{
"name": "iris-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"babel": "babel",
"webpack": "webpack",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.2",
"react": "^15.0.2",
"react-ace": "^5.0.1",
"react-data-grid": "^2.0.33",
"react-dom": "^15.0.2",
"react-hot-loader": "^3.0.0-beta.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-redux": "^4.0.4",
"react-split-pane": "^0.1.63",
"react-syntax-highlighter": "^5.1.3",
"react-vega-lite": "^1.0.1",
"redux": "^3.5.2",
"vega": "^3.0.0-rc6",
"vega-lite": "^2.0.0-beta.11",
"webpack": "^1.14.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"electron": "^1.6.5",
"electron-packager": "^8.6.0",
"eslint": "^2.9.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.16.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.1",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "^15.0.2",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"stats-webpack-plugin": "^0.3.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, 'dist/'),
filename: 'bundle.js',
publicPath: ''
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
//eslint: {
// configFile: '.eslintrc',
// failOnWarning: false,
//failOnError: false
//},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.json?$/,
loader: 'json'
},
{
test: /\.scss$/,
loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
},
{ test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file' }
]
}
};
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
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
I have written a set of React components which I wish to publish. However when I try to build them to commonjs format with babel before publishing I get the following error which I cannot find a resolution to.
The project is created and ejected from create-react-app
SyntaxError: src/packages/core/src/MyAppBar/MyAppBar.js: Unexpected token, expected ; (20:5)
18 | import {isEmpty} from "lodash";
19 |
> 20 | type MyAppBarPropsType = {
| ^
21 | position?: string,
22 | commandBarActions?: Array<React$Element<React$ElementType>>,
23 | title?: string,
The build line in my npm scripts is
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
I would have thought that #babel/preset-flow would have been sufficient to deal with flow types in my code.
The presets from my babel.config.js file are as follows
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
For completeness my full package.json and babel.config.js are as follows
package.json
{
"name": "react-ccl",
"version": "0.2.0-alpha",
"description": "Common component library based on xyz look and feel guidelines",
"private": true,
"dependencies": {
"#babel/core": "7.6.0",
"#material-ui/core": "3.9.2",
"#material-ui/icons": "3.0.2",
"#material-ui/lab": "3.0.0-alpha.30",
"#material-ui/styles": "3.0.0-alpha.10",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"highlight": "^0.2.4",
"highlight.js": "^9.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.10.0",
"react-addons-test-utils": "15.5.1",
"react-app-polyfill": "^1.0.3",
"react-dev-utils": "^9.0.4",
"react-dom": "^16.10.0",
"react-test-renderer": "16.10.0",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.40.2",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"#babel/cli": "7.7.7",
"#babel/node": "7.7.7",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/plugin-transform-react-constant-elements": "7.6.0",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.7",
"#babel/preset-flow": "7.7.4",
"#babel/preset-react": "7.7.4",
"#babel/register": "7.0.0",
"babel-cli": "^6.26.0",
"chokidar": "1.6.1",
"cpx": "^1.5.0",
"cross-env": "^6.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"flow-bin": "0.113.0",
"flow-typed": "^2.6.2",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"lerna": "3.16.4",
"npm-run-all": "4.0.2",
"prop-types": "15.7.2",
"rimraf": "3.0.0",
"react-docgen": "3.0.0"
},
"scripts": {
"prestart": "npm run gen:docs",
"start": "npm-run-all --parallel start:docs gen:docs-watch",
"start:docs": "node scripts/start.js",
"gen:docs": "node scripts/generateComponentData.js",
"gen:docs-watch": "npm run gen:docs -- --watch",
"build:docs": "node scripts/build.js",
"test": "node scripts/test.js",
"predeploy:docs": "npm run build:docs",
"deploy:docs": "gh-pages -d build",
"flow": "flow",
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
},
"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"
]
},
"jest": {
"roots": [
"<rootDir>/src/packages/core"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/jest-test-setup.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}
}
babel.config.js
const productionPlugins = [
'#babel/plugin-transform-react-constant-elements',
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
[
'babel-plugin-transform-react-remove-prop-types',
{
mode: 'unsafe-wrap',
},
],
];
module.exports = {
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-object-rest-spread', { loose: true }],
'#babel/plugin-transform-runtime',
// for IE 11 support
'#babel/plugin-transform-object-assign',
],
ignore: [/#babel[\\|/]runtime/], // Fix a Windows issue.
env: {
cjs: {
plugins: productionPlugins,
},
},
};
Evidently preset-flow was not enough for babel to transpile a flow type defined within a JS file. When I added the following line to devDependencies in my package.json the build worked perfectly.
"babel-plugin-react-remove-properties": "^0.3.0",
Hello I get the following error when compiling my js with webpack and babel-loader
*
ERROR in ../vendor/xxx/xxx/assets/js/xxx.js Module not found: Error:
Can't resolve '#babel/runtime-corejs2/core-js/object/define-property'
in xxx
*
This is the important part of my webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env'],
plugins: [
['#babel/plugin-transform-runtime', {
'corejs': 2,
'helpers': false,
'regenerator': false,
'useESModules': false,
}]
],
cacheDirectory: 'node_modules/.cache/babel-loader'
}
}
},
]
},
and this is my package.json
{
"name": "assets-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "./node_modules/webpack/bin/webpack.js --config webpack.development.js",
"prod": "./node_modules/webpack/bin/webpack.js --config webpack.production.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/runtime-corejs2": "^7.0.0-beta.55",
"babel-loader": "^8.0.2",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fancybox": "^2.1",
"file-loader": "^1.1.11",
"glob": "^7.1.2",
"jquery": "^2.0",
"jquery-touchswipe": "^1.6.18",
"js-cookie": "^2.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"sprintf": "^0.1.5",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.17.2",
"webpack-merge": "^4.1.2",
"webpack-validator": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.0.0",
"source-map-loader": "^0.2.3",
"webpack-cli": "^2.1.4"
}
}
Any ideas on this one?