Require JS Compile React application - reactjs

Question

I am working on React JS application. While building the code using grunt build I am getting the below error:
Running "requirejs:compile" (requirejs) task
Error: Cannot uglify file: C:/Dev/first-research/first-research-min.js.
Skipping it. Error is:
SyntaxError: Unexpected token: name (ClassicEditor)
If the source uses ES2015 or later syntax, please pass "omptimize: 'none'" to r.js
and use an ES2015+ compatible minifier after running r.js. The included
UglifyJS only understands ES5 or earlier syntax.
Calling webpack configuration from grunt to build and transpile from es6 to es5.
Attached are the Webpack, grunt, package.json and babel.rc file for ref
Webpack file
const path = require('path'),
webpack = require('webpack'),
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { styles } = require( '#ckeditor/ckeditor5-dev-utils' );
process.env.NODE_ENV = 'development';
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'app',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
mode: 'development',
entry: {
'app': './src/app'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
modules: ['./node_modules']
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name]-bundle.js',
libraryTarget: 'amd'
},
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
{ // To process CKEditor CSS files.
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('#ckeditor/ckeditor5-theme-lark')
},
minify: true
} )
}
]
},
// ESlint loader
{
test: /\.(js|jsx)$/, // include .js and .jsx files
use: [
'eslint-loader'
],
enforce: 'pre',
exclude: /node_modules/ // exclude any and all files in the node_modules folder
},
// ES6 loader
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // exclude any and all files in the node_modules folder
use: {
loader: 'babel-loader',
options:{
presets: ['env']
}
}
},
// Style loader other than CK5 editor CSS files.
{
test: /\.css$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.scss$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.scss/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
},
// html loader
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true,
}
}]
},
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep the "css" loader working as it injects
// its runtime that would otherwise be processed through the "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpack's internal loaders.
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
/(node_modules)/,
/\.css$/
],
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]-bundle.css',
}),
new webpack.LoaderOptionsPlugin({ options: {} }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
// new CKEditorWebpackPlugin( {
// language: 'pl'
// })
],
externals: [
/^user-profile/, //OK
/^settings\/settings/, //OK
/^am-permissions\/permission/, //OK
/^logger\/log/, //OK
/^am-permissions/, //OK
/^am-address/, //OK
/^am-alerter/, //OK
/^amfx-blotter-grid\//, //OK
/^amfx-blotter-grid-components\//, //OK
/^amfx-blotter-filters\//, //OK
/^amfx-react-components\//, //OK
/^menu\//, //OK
'react', //OK
'react-dom', //OK
'prop-types', //OK
/^jquery$/, //OK:
/^underscore$/, //OK:
/^lodash$/,
/^q$/, //OK:
/^d3$/, //OK:
/^text/, //OK:
/^d3-utils\//, //OK:
/^bootstrap\//, //OK:
/^moment$/, //OK:
/^am-modal\//, //OK
/^xhr-client\//, //OK
/^q\//, //OK
/^whatwg-fetch\//, //OK
'immutable', //OK
/^amfx-tab\//, //OK
/^fx-blotter\//, //OK
/^zap-tab-comms\//, //OK
/^trade-operations\// //OK
],
devtool: 'source-map',
resolveLoader: {
alias: {
'css/css': 'style-loader'
}
}
};
package.json
{
"name": "first-research",
"version": "0.1.18",
"description": "first-research: Built using the Zambezi Platform",
"main": "dist/react-your-component-name.min.js",
"repository": {
"type": "git",
"url": "https://stash.dts.fm.rbsgrp.net/scm/amfirstresearch/first-research.git"
},
"scripts": {
"build": "webpack --progress --watch --config ./config/webpack.dev.js",
"test": "jest"
},
"devDependencies": {
"#ckeditor/ckeditor5-dev-utils": "^10.0.3",
"#ckeditor/ckeditor5-theme-lark": "^11.0.0",
"babel": "^6.1.18",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.0",
"babel-jest": "^15.0.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-es2015-node5": "^1.2.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.6.1",
"cross-env": "^1.0.8",
"css": "^1.0.7",
"css-loader": "^0.28.7",
"eslint": "^3.7.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.1.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"grunt": "^1.0.3",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-webpack": "^3.0.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^15.1.1",
"jest-static-stubs": "^0.0.1",
"lodash": "^4.17.10",
"mini-css-extract-plugin": "^0.4.1",
"moment": "^2.22.2",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "^15.3.1",
"react-test-renderer": "^15.3.1",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.16.5",
"webpack-merge": "^4.1.0",
"zambezi-contrib-build": "^2.1.3"
},
"dependencies": {
"#ckeditor/ckeditor5-adapter-ckfinder": "^10.0.2",
"#ckeditor/ckeditor5-autoformat": "^10.0.2",
"#ckeditor/ckeditor5-basic-styles": "^10.0.2",
"#ckeditor/ckeditor5-block-quote": "^10.0.2",
"#ckeditor/ckeditor5-build-classic": "^11.0.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.3",
"#ckeditor/ckeditor5-easy-image": "^10.0.2",
"#ckeditor/ckeditor5-editor-classic": "^11.0.0",
"#ckeditor/ckeditor5-essentials": "^10.1.1",
"#ckeditor/ckeditor5-heading": "^10.0.2",
"#ckeditor/ckeditor5-image": "^10.2.0",
"#ckeditor/ckeditor5-link": "^10.0.3",
"#ckeditor/ckeditor5-list": "^11.0.1",
"#ckeditor/ckeditor5-paragraph": "^10.0.2",
"#ckeditor/ckeditor5-react": "^1.0.0-beta.1",
"#zambezi/sdk": "^5.19.1",
"axios": "^0.18.0",
"enzyme": "^3.3.0",
"es6-promise": "^4.2.4",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.6.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-modal": "^3.5.1",
"react-router-dom": "^4.3.1",
"react-tabs": "^2.2.2"
},
"_zambezi": {
"runtimeDependencies": [
"am-address",
"am-alerter",
"am-permissions",
"react",
"react-dom",
"css",
"lodash",
"prop-types"
]
},
"jest": {
"collectCoverage": true,
"moduleNameMapper": {
"^.+\\.(png|jpg|gif)$": "jest-static-stubs/$1",
"^.+\\.(eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
"^.+\\.(css|less)$": "identity-obj-proxy"
}
}
}
Grunt file
module.exports = function (grunt) {
grunt.initConfig({
build: {
options: {
optimize: 'none',
include: ['first-research'],
plugins: {
'css/css': '../node_modules/css/css',
'settings/settings': 'empty:',
"am-permissions/permission": "empty:",
"user-profile/user-profile": "empty:",
"logger/log": "empty:"
}
}
},
webpack: {
dev: require('./config/webpack.dev.js'),
prod: require('./config/webpack.prod.js')
},
watch: {
files: ['src/**/*.js'],
tasks: ['webpack:dev', 'build']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('zambezi-contrib-build');
grunt.registerTask('default', ['webpack:dev', 'build']);
grunt.registerTask('ci-build', ['webpack:prod', 'build']);
};
babel.rc
{
"presets": [
"stage-0",
"react",
"es2015-node5"
],
"plugins": [
"transform-class-properties"
],
"sourceMaps": true
}