I was previously using the default script of "create-react-app" but the requriement for the project needed me to use WebPack 4 so I needed to create the script and add additional Babel/Webpack in my package.json.
Right now, I'm stuck on running the code:
yarn run v1.19.0
$ webpack --optimize-minimize --config=webpack.min.config.js
Hash: 073756e9eb95ab8e967e
Version: webpack 4.41.0
Time: 46729ms
Built at: 10/29/2019 11:10:55 AM
2 assets
Entrypoint main = app.bundle.min.js
[15] (webpack)/buildin/global.js 472 bytes {0} [built]
[36] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[37] ./src/index.scss 698 KiB {0} [built]
[38] ./src/App.css 380 bytes {0} [built]
[56] ./src/index.js + 74 modules 191 KiB {0} [built]
| ./src/index.js 590 bytes [built]
| ./src/store.js 1 KiB [built]
| ./src/serviceWorker.js 4.6 KiB [built]
| ./src/App.js 6.4 KiB [built]
| ./src/reducers/index.js 221 bytes [built]
| ./src/actions/systemActions.js 1.78 KiB [built]
| ./src/actions/types.js 833 bytes [built]
| ./src/reducers/systemReducer.js 1.94 KiB [built]
| ./src/reducers/partsReducer.js 2.17 KiB [built]
| ./src/actions/partsActions.js 2.7 KiB [built]
| ./src/reducers/initialState.js 855 bytes [built]
| + 64 hidden modules
+ 53 hidden modules
ERROR in ./src/components/CreateMCRStep1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\src\components\CreateMCRStep1.js: Support for the experimental syntax 'classProperties' isn't currently enabled (182:38):
180 | }
181 |
> 182 | externalComponentValidationCheck = (data, name) => {
| ^
183 | // console.log("data - " + JSON.stringify(data.target.value))
184 | // console.log("name - " + JSON.stringify(name))
185 | switch(name)
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
at Object.raise (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:6420:17)
at Object.expectPlugin (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:7778:18)
at Object.parseClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11013:12)
at Object.pushClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10978:30)
at Object.parseClassMemberWithIsStatic (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10917:14)
at Object.parseClassMember (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10851:10)
at withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10806:14)
at Object.withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9884:14)
at Object.parseClassBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10783:10)
at Object.parseClass (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10757:22)
at Object.parseStatementContent (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10051:21)
at Object.parseStatement (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10009:17)
at Object.parseBlockOrModuleBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10585:25)
at Object.parseBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10572:10)
at Object.parseTopLevel (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9940:10)
at Object.parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11447:17)
at parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11483:38)
at parser (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:168:34)
at normalizeFile (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:102:11)
at runSync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:44:43)
at runAsync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:35:14)
at process.nextTick (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transform.js:34:34)
at process._tickCallback (internal/process/next_tick.js:61:11)
@ ./src/components/CreateMCRPage.js 28:0-46 145:39-53
@ ./src/App.js
@ ./src/index.js
This goes on at least on my 5 components, for some reason it is flagging my class functions and callbacks.
Currently this is my webpack.config.js
var path = require('path');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.js',
mode: 'production',
output: {
path: __dirname + './build',
filename:'app.bundle.js'
},
module: {
rules : [ {
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['@babel/react']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
// {
// // After all CSS loaders we use plugin to do his work.
// // It gets all transformed CSS and extracts it into separate
// // single bundled file
// loader: MiniCssExtractPlugin.loader
// },
{
loader: "css-loader"
},
{
// First we transform SASS to standard CSS
loader: "sass-loader",
options: {
implementation: require("sass")
}
},
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
}]
},
// plugins: [
// new MiniCssExtractPlugin({
// filename: "bundle.css"
// })
// ]
};
I commented out all my CSS code because I was trying to trace what part in my config is the problem.
My .babelrc looks like this:
{
"presets": [
"@babel/env",
"@babel/react"
]
}
I have been trying to solve this for at least 4 hours now and tried multiple setup but nothing work so far.
