Related
I think this error from metro bundler,
here is the image for the error:
I try every solution on the net from the official react native GitHub issue.
also try deleting node modules
restart the cache
On the terminal, it didn't show any error but on the device, it threw an error. Any help?
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset',
'#babel/preset-typescript','#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-class-properties'],
['module:react-native-dotenv',
{
moduleName: '#env',
path: '.env',
},
],
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src/'],
alias: {
'#assets': './src/assets',
'#components': './src/components',
'#constants': './src/constants',
'#navigation': './src/navigations',
'#screens': './src/screens',
'#utils': './src/utils',
'#styles': './src/styles',
'#redux': './src/redux',
'#config': './src/config',
},
},
],
],
};
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
jestConfig.ts
import mockAsyncStorage from '#react-native-async-storage/async-storage/jest/async-storage-mock';
import 'react-native-gesture-handler/jestSetup';
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
jest.mock('react-native-keyboard-controller', () => ({}));
jest.mock('react-native-bootsplash', () => {
return {
hide: jest.fn(),
show: jest.fn(),
};
});
jest.mock('#notifee/react-native', () => ({}));
jest.mock('#react-native-async-storage/async-storage', () => mockAsyncStorage);
jest.mock('axios', () => {
return {
create: () => {
return {
get: jest.fn(),
post: jest.fn(),
put: jest.fn(),
interceptors: {
request: {eject: jest.fn(), use: jest.fn()},
response: {eject: jest.fn(), use: jest.fn()},
},
};
},
};
});
export {};
package.json
{
"name": "name",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"#notifee/react-native": "^7.2.0",
"#react-native-async-storage/async-storage": "^1.17.10",
"#react-native-masked-view/masked-view": "^0.2.8",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#reduxjs/toolkit": "^1.8.6",
"#shopify/flash-list": "^1.3.1",
"#types/lodash": "^4.14.191",
"axios": "^1.2.1",
"babel-plugin-module-resolver": "^4.1.0",
"native-base": "^3.4.22",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-bootsplash": "^4.3.2",
"react-native-dotenv": "^3.4.2",
"react-native-fast-image": "^8.6.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-keyboard-controller": "^1.4.2",
"react-native-modal": "^13.0.1",
"react-native-pager-view": "^6.1.2",
"react-native-pusher-push-notifications": "^2.5.1",
"react-native-reanimated": "^2.11.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.18.2",
"react-native-svg": "12.1.1",
"react-native-tab-view": "^3.3.4",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.26.0",
"react-redux": "^8.0.4",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2",
"ts-jest": "^29.0.3"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "29.0.3",
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.6",
"#types/react-native-dotenv": "^0.2.0",
"#types/react-native-vector-icons": "^6.4.12",
"#types/react-test-renderer": "^18.0.0",
"#types/redux-logger": "^3.0.9",
"#types/redux-persist": "^4.3.1",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "29.0.3",
"babel-plugin-transform-require-context": "^0.1.1",
"eslint": "^7.32.0",
"jest": "29.0.3",
"metro-react-native-babel-preset": "0.72.3",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFiles": [
"./jestConfig.ts"
],
"transformIgnorePatterns": [
"node_modules/node_modules/react-native-responsive-screen/index.js"
]
}
}
This line:
import 'react-native-gesture-handler/jestSetup';
Should probably be something like:
import jestSetup from 'react-native-gesture-handler/jestSetup';
Check the documentation of the library how that import should work.
when i try to build my project with yarn run build i get errors that are not exist in my code my code is clean it works fine in my local. I've been stuck for two weeks to resolve this problem please help me to solve this problem. this the errors that i get
node version: v10.15.3
webpack: 4.30.0
this is my package.json
{
"name": "xxxx",
"version": "1.8.0",
"description": "React website tempate with focus on perfomance and design",
"private": true,
"engines": {
"npm": ">=5",
"node": ">=8.15.1"
},
"author": "Dandelion Pro Team",
"license": "Envato Regular License",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint app/**/*.js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"#types/googlemaps",
"#types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.2.0",
"#babel/polyfill": "7.4.3",
"#date-io/date-fns": "^1.3.11",
"#date-io/moment": "1.3.8",
"#material-ui/core": "^4.9",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.33",
"#material-ui/pickers": "^3.2.10",
"#react-pdf/renderer": "^1.6.13",
"#types/googlemaps": "^3.38.1",
"#types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autoprefixer": "^9.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"caniuse-lite": "^1.0.30001223",
"chalk": "^2.4.2",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"country-language": "^0.1.7",
"country-state-city": "^1.0.5",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^4.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.11.7",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"emailjs-com": "^2.6.4",
"express": "4.16.4",
"file-saver": "^2.0.2",
"fontfaceobserver": "2.1.0",
"formik": "^2.1.4",
"geo-reverse": "^1.0.12",
"google-libphonenumber": "^3.2.13",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"html2canvas": "^1.0.0-rc.7",
"immer": "3.0.0",
"immutable": "3.8.2",
"interactjs": "^1.10.11",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jspdf": "^2.3.1",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "^3.1.2",
"keycode": "^2.2.0",
"leaflet": "^1.7.1",
"leaflet-control-geocoder": "^1.13.0",
"lodash": "^4.17.15",
"material-table": "^1.69.0",
"material-ui-color-picker": "^3.5.1",
"material-ui-pickers": "^2.2.4",
"minimist": "^1.2.5",
"moment": "^2.29.1",
"moment-weekday-calc": "^1.1.4",
"mui-datatables": "^2.13.1",
"net": "^1.0.2",
"nuxeo": "^3.17.0",
"profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-animated-slider": "^2.0.0",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.1",
"react-calendar": "^2.17.4",
"react-chartjs-2": "^2.7.4",
"react-charts": "^1.0.10",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-html5video": "^2.5.1",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.1.7",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-leaflet": "^2.7.0",
"react-loadable": "^5.5.0",
"react-markdown": "^4.1.0",
"react-modal": "^3.4.4",
"react-notifications-component": "^2.4.0",
"react-number-format": "^3.3.4",
"react-papaparse": "^3.8.0",
"react-pdf": "^5.0.0",
"react-pdf-print": "^0.2.0",
"react-player": "^2.9.0",
"react-popper": "^0.10.4",
"react-print-components": "^1.0.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scroll-parallax": "^1.3.5",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-swipeable-views": "^0.13.9",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"react-trello": "^1.33.0",
"react-ultimate-pagination": "^1.2.0",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"video-react": "^0.14.1",
"warning": "4.0.2",
"xlsx": "^0.16.6"
},
"devDependencies": {
"#babel/cli": "7.4.3",
"#babel/core": "7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-modules-commonjs": "7.4.3",
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/preset-env": "7.4.3",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"babel-preset-es2015": "^6.24.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "3.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "4",
"http-proxy-middleware": "0.19.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.12.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "5.0.1",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"react-to-print": "^2.12.3",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.4.1",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
this is my webpack structure
finaly this my contente of webpack.base.babel.js
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
/*
Disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',
test: /\.js?$/,
exclude: [/node_modules/],
loader: 'eslint-loader',
options: {
quiet: true,
}
}, */
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'happypack/loader?id=js',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}],
},
{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
/*
Disabled image compression by default,
due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this, first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// enabled: false,
// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,
// // progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// },
// pngquant: {
// quality: '65-90',
// speed: 4,
// },
// },
// },
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
node: {
fs: 'empty'
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader?cacheDirectory=true']
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'dan-components': path.resolve(__dirname, '../../app/components/'),
'dan-actions': path.resolve(__dirname, '../../app/actions/'),
'dan-redux': path.resolve(__dirname, '../../app/redux/'),
'dan-styles': path.resolve(__dirname, '../../app/styles/components/'),
'dan-api': path.resolve(__dirname, '../../app/api/'),
'dan-images': path.resolve(__dirname, '../../public/images/'),
'dan-vendor': path.resolve(__dirname, '../../node_modules/'),
}
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
thanks a lot stackoverflow
i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder
env: {
production: {
// only: ['app'],
only: ['app', 'transversal-administration', 'transversal-translation'],
plugins: [
'lodash',
'transform-react-remove-prop-types',
'#babel/plugin-transform-react-inline-elements',
'#babel/plugin-transform-react-constant-elements',
],
},
I can't get my tests to run.
When I run 'yarn test' for my react app, I get the dreaded error:
Jest encountered an unexpected token. SyntaxError: Unexpected token '.'
Image: Jest Error
It is failing on the import of the .scss from logon.tsx: import styles from './_logon.scss';
I have tried solutions such as the moduleNameMapper with 'identity-object-proxy' or with a style-mock:
Syntax Error when test component with SASS file imported
What am I doing wrong? I tried copying some of the jest config from the create-react-app as its working there. I put it in jest.config.js instead of package.json. Is this correct?
jest.config.js:
module.exports = {
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.spec.{ts,tsx}', '!src/**/*.node.{ts,tsx}', '!src/typings/**/*'],
coverageDirectory: 'build/coverage',
projects: [
{
setupFiles: ['./jestSetup.js'],
displayName: 'dom',
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/*.spec.ts?(x)'],
},
{
coverageDirectory: 'build/coverage',
setupFiles: ['./jestSetup.js'],
displayName: 'node',
testEnvironment: 'node',
testMatch: ['**/__tests__/**/*.node.ts?(x)'],
},
],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
'^.+\\.(css|scss|sass)$': '<rootDir>/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/jest/fileTransform.js',
},
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$', '^.+\\.(css|sass|scss)$'],
modulePaths: [],
moduleNameMapper: {
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
},
};
_logon.scss
.logon-page {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.logon-container {
background-color: $ui-01;
color: $text-02;
padding: 16px;
width: 450px;
:global {
.bx--inline-notification__text-wrapper {
width: 300px;
}
.bx--inline-notification {
margin-bottom: 0;
margin-top: 0;
}
.bx--inline-notification__details {
margin-bottom: auto;
margin-top: auto;
}
}
}
.logon-container__button {
float: right;
font-size: 1.3rem;
height: 60px;
max-width: 100%;
width: 50%;
}
.logon-container__input {
background-color: $field-02;
}
.logon-container__hr {
border-bottom: 1px solid $ui-03;
margin-top: 0;
}
.logon-container__gap {
height: 68px;
padding-bottom: 10px;
padding-top: 10px;
}
package.json
{
"name": "graphui",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production npm-run-all clean --parallel build:frontend build:server",
"build:server": "webpack --config webpack/webpack.server.babel.js",
"build:frontend": "cross-env IS_BROWSER=true webpack --config webpack/webpack.frontend.babel.js",
"clean": "npm-run-all -s clean:remove clean:recreate",
"clean:remove": "rimraf dist",
"clean:recreate": "mkdirp dist/web/static",
"commit": "cz",
"dev": "cross-env NODE_ENV=development npm-run-all clean --parallel dev:frontend dev:server",
"dev:server": "webpack -w --config webpack/webpack.server.babel.js",
"dev:frontend": "cross-env IS_BROWSER=true webpack-dev-server -d -w --config webpack/webpack.dev.babel.js",
"lint": "npm-run-all --parallel lint:js lint:css lint:commits lint:bundlesize",
"lint:js": "eslint --ext ts,tsx src ",
"lint:css": "stylelint src/**/*",
"lint:commits": "commitlint -e ./.git/COMMIT_EDITMSG",
"lint:bundlesize": "bundlesize",
"test": "jest",
"validate": "npm-run-all --parallel validate:lint validate:gbvalidator",
"validate:lint": "lint-staged --allow-empty",
"validate:gbvalidator": "gbvalidator --pattern \"^(feat|fix|release|refactor|test|docs|build|ci|perf|styles)/([a-z0-9_#-./]){3,40}\\$\" --message \"See CONTRIBUTING.md for examples of valid branch names\"",
"validated:translation": "node missingTranslations.js"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "yarn run validate",
"post-merge": "node postMerge.js"
}
},
"lint-staged": {
"src/**/*.{ts,tsx}": [
"eslint --fix",
"jest --bail --ci --silent --findRelatedTests"
],
"src/**/*.{css,scss}": [
"stylelint --fix"
]
},
"dependencies": {
"#carbon/grid": "^10.15.0",
"#carbon/icons-react": "^10.19.0",
"#carbon/themes": "^10.21.0",
"#carbon/type": "^10.16.0",
"#egjs/hammerjs": "^2.0.17",
"#emotion/cache": "^10.0.29",
"#emotion/core": "^10.0.35",
"#emotion/styled": "^10.0.27",
"#loadable/component": "^5.13.2",
"#loadable/server": "^5.13.2",
"#reduxjs/toolkit": "^1.4.0",
"blueimp-md5": "^2.18.0",
"body-parser": "^1.19.0",
"carbon-components": "^10.22.0",
"carbon-components-react": "^7.22.0",
"carbon-icons": "^7.0.7",
"chokidar": "^3.4.3",
"classnames": "^2.2.6",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"create-emotion-server": "^10.0.27",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"express-winston": "^4.0.5",
"gremlin": "^3.4.8",
"helmet": "^4.1.1",
"i18next": "^19.8.2",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-fs-backend": "^1.0.7",
"i18next-http-backend": "^1.0.21",
"i18next-http-middleware": "^3.0.6",
"ibm_db": "^2.7.1",
"identity-obj-proxy": "^3.0.0",
"immer": "^7.0.9",
"java.io": "^2.4.0",
"js-yaml": "^3.14.0",
"jsonwebtoken": "^8.5.1",
"keycharm": "^0.4.0",
"lodash": "^4.17.20",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dom": "^16.14.0",
"react-error-boundary": "^3.0.2",
"react-hook-form": "^6.9.2",
"react-i18next": "^11.7.3",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-window": "^1.8.5",
"reactour": "^1.18.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"remove": "^0.1.5",
"serialize-javascript": "^5.0.1",
"serve-static": "^1.14.1",
"styled-components": "^5.2.0",
"uuid": "^8.3.1",
"vis-data": "^7.1.0",
"vis-network": "^8.4.0",
"vis-util": "^4.3.4",
"winston": "^3.3.3",
"winston-daily-rotate-file": "^4.5.0"
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.1",
"#babel/node": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.1",
"#babel/plugin-proposal-private-methods": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#babel/preset-typescript": "^7.12.1",
"#commitlint/cli": "^11.0.0",
"#commitlint/config-conventional": "^11.0.0",
"#hookform/devtools": "^2.2.1",
"#lcluber/gitbranchvalidator": "^1.3.0",
"#loadable/babel-plugin": "^5.13.2",
"#loadable/webpack-plugin": "^5.13.0",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
"#testing-library/dom": "^7.26.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.8",
"#types/blueimp-md5": "^2.7.0",
"#types/body-parser": "^1.19.0",
"#types/carbon-components": "^10.15.0",
"#types/carbon-components-react": "^7.10.10",
"#types/carbon__icons-react": "^10.17.1",
"#types/carbon__type": "^0.0.1",
"#types/classnames": "^2",
"#types/compression": "^1.7.0",
"#types/cookie-parser": "^1.4.2",
"#types/copy-webpack-plugin": "^6.0.0",
"#types/eslint": "^7.2.4",
"#types/eslint-plugin-prettier": "^3.1.0",
"#types/express": "^4.17.8",
"#types/gremlin": "^3.4.6",
"#types/i18next-fs-backend": "^1.0.0",
"#types/ibm_db": "^2.0.6",
"#types/jest": "^26.0.14",
"#types/js-yaml": "^3.12.5",
"#types/jsonwebtoken": "^8.5.0",
"#types/loadable__component": "^5.13.1",
"#types/loadable__server": "^5.12.3",
"#types/loadable__webpack-plugin": "^5.7.1",
"#types/lodash": "^4",
"#types/mini-css-extract-plugin": "^1.0.0",
"#types/mkdirp": "^1.0.1",
"#types/node": "^14.11.8",
"#types/node-sass": "^4.11.1",
"#types/optimize-css-assets-webpack-plugin": "^5.0.1",
"#types/passport": "^1.0.4",
"#types/passport-jwt": "^3.0.3",
"#types/passport-local": "^1.0.33",
"#types/prettier": "^2.1.2",
"#types/prop-types": "^15.7.3",
"#types/react": "^16.9.52",
"#types/react-dom": "^16.9.8",
"#types/react-redux": "^7.1.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-window": "^1.8.2",
"#types/reactour": "^1.17.1",
"#types/rimraf": "^3.0.0",
"#types/serialize-javascript": "^4.0.0",
"#types/serve-static": "^1.13.5",
"#types/styled-components": "^5.1.4",
"#types/supertest": "^2.0.10",
"#types/terser-webpack-plugin": "^4",
"#types/testing-library__jest-dom": "^5.9.4",
"#types/uuid": "^8.3.0",
"#types/webpack": "^4.41.22",
"#types/webpack-dev-server": "^3.11.0",
"#types/webpack-env": "^1.15.3",
"#types/webpack-node-externals": "^2.5.0",
"#types/workbox-webpack-plugin": "^5.1.5",
"#typescript-eslint/eslint-plugin": "^4.4.1",
"#typescript-eslint/parser": "^4.4.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.5.2",
"babel-loader": "^8.1.0",
"babel-plugin-emotion": "^10.0.33",
"babel-plugin-module-resolver": "^4.0.0",
"bundlesize": "^0.18.0",
"chalk": "^4.1.0",
"commitizen": "^4.2.1",
"commitlint": "^11.0.0",
"copy-webpack-plugin": "^6.2.1",
"cross-env": "^7.0.2",
"css-loader": "^5.0.0",
"cz-conventional-changelog": "^3.3.0",
"dotenv": "^8.2.0",
"eslint": "^7.11.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-airbnb-typescript": "^11.0.0",
"eslint-config-prettier": "^6.12.0",
"eslint-config-react": "^1.1.7",
"eslint-import-resolver-babel-module": "^5.1.2",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-generic-intl": "^1.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"husky": "^4.3.0",
"jest": "^26.5.3",
"jest-environment-jsdom-fourteen": "^1.0.1",
"jest-transform-css": "^2.1.0",
"lint-staged": "^10.4.0",
"mini-css-extract-plugin": "^1.0.0",
"mkdirp": "^1.0.4",
"msw": "^0.21.2",
"node-sass": "^4.14.1",
"nodemon": "^2.0.5",
"nodemon-webpack-plugin": "^4.3.2",
"npm-run-all": "^4.1.5",
"open": "^7.3.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"preload-webpack-plugin": "^2.3.0",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"react-refresh": "^0.8.3",
"rimraf": "^3.0.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"stylelint": "^13.7.2",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-sass-guidelines": "^7.1.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-prettier": "^1.1.2",
"supertest": "^5.0.0",
"terser-webpack-plugin": "^4.2.3",
"typescript": "^4.0.3",
"typescript-plugin-css-modules": "^2.7.0",
"unicoderegexp": "^0.4.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-node-externals": "^2.5.2",
"workbox-webpack-plugin": "^5.1.4"
}
}
babel.config.js
/* eslint-disable #typescript-eslint/no-var-requires */
const path = require('path');
const browsers = ['last 2 Chrome versions', 'last 2 Safari versions', 'last 2 Edge versions', 'Firefox ESR'];
const { env } = process;
const plugins = [
'emotion',
'#loadable/babel-plugin',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-private-methods', { loose: true }],
[
'babel-plugin-module-resolver',
{
alias: {
'#frontend': path.resolve(process.cwd(), path.join('src', 'frontend')),
'#server': path.resolve(process.cwd(), path.join('src', 'server')),
'#shared': path.resolve(process.cwd(), path.join('src', 'shared')),
'#typings': path.resolve(process.cwd(), path.join('src', 'typings')),
'#testhelpers': path.resolve(process.cwd(), path.join('src', 'testhelpers')),
},
extensions: ['.ts', '.tsx', '.json'],
},
],
];
const targets = {
browsers,
node: 'current',
};
if (env.IS_BROWSER) {
delete targets.node;
} else {
delete targets.browser;
}
const presets = [
[
'#babel/preset-react',
{
runtime: 'automatic',
},
],
[
'#babel/preset-env',
{
shippedProposals: true,
targets,
},
],
'#babel/preset-typescript',
];
if (env.NODE_ENV !== 'production' && env.IS_BROWSER) {
plugins.unshift(['react-refresh/babel', { skipEnvCheck: true }]);
}
const config = {
plugins,
presets,
env: {
debug: {
sourceMaps: 'inline',
retainLines: true,
},
development: {
compact: false,
},
},
};
module.exports = config;
webpack.base.js
import 'dotenv/config';
import path from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const {
env: { NODE_ENV },
} = process;
const IS_PROD = NODE_ENV === 'production';
const rootDirectory = path.join(__dirname, '..');
const nodeModules = path.join(rootDirectory, 'node_modules');
const config = {
mode: IS_PROD ? 'production' : 'development',
performance: { hints: false },
devtool: IS_PROD ? 'cheap-module-source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.(s?)css$/,
sideEffects: true,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !IS_PROD,
},
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
exportLocalsConvention: 'dashesOnly',
},
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: `
$feature-flags: (
enable-css-custom-properties: true,
grid-columns-16: true,
ui-shell: true,
);
#import 'carbon-components/scss/globals/scss/vars';
#import '#carbon/type/scss/styles';
`,
},
},
],
},
{
test: /node_modules\/vis-.*\.js$/,
use: [
{
loader: 'babel-loader',
},
],
},
{
exclude: {
test: /node_modules/,
exclude: [
path.resolve(__dirname, 'node_modules', 'vis-network'),
path.resolve(__dirname, 'node_modules', 'vis-data'),
path.resolve(__dirname, 'node_modules', 'vis-utils'),
],
},
test: /\.(t|j)sx?$/,
use: [
{
loader: 'babel-loader',
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: NODE_ENV !== 'production' ? '[name].css' : '[name].[contenthash].css',
chunkFilename: NODE_ENV !== 'production' ? '[name].[id].css' : '[name].[id].[contenthash].css',
}),
],
resolve: {
extensions: ['.js', '.tsx', '.ts', '.json', '.css', '.scss'],
modules: [path.resolve(nodeModules), path.resolve(rootDirectory)],
},
stats: {
cached: false,
colors: true,
entrypoints: false,
children: false,
},
};
export default config;
My react+redux app is not working on Internet explorer 11. It is working fine on edge, Firefox and chrome.
I have already tried so many answers available on internet like this but didn't get any success, below attached error is I am getting in console
when I opened this error it shows like this
this file is generating when I am serving my app and can't change anything manually
package.json
{
"jest": {
"roots": [
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"testURL": "http://localhost",
"moduleDirectories": [
"node_modules",
"utils"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"text"
],
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/flow-typed/**",
"!**/vendor/**",
"!./*"
],
"setupFilesAfterEnv": [
"./utils/jestUtils/setupTests.js"
],
"testEnvironment": "./utils/jestUtils/freezeDateEnvironment.js",
"moduleNameMapper": {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/utils/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/utils/__mocks__/fileMock.js"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"react": "16.7.0",
"react-app-polyfill": "^1.0.5",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "16.7.0",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.1.4",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "4.0.1",
"redux-form": "7.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.4.4",
"#babel/node": "7.4.5",
"#babel/plugin-proposal-class-properties": "7.4.4",
"#babel/plugin-proposal-object-rest-spread": "7.4.4",
"#babel/plugin-proposal-optional-chaining": "7.2.0",
"#babel/plugin-transform-arrow-functions": "7.2.0",
"#babel/plugin-transform-classes": "7.4.4",
"#babel/plugin-transform-runtime": "7.4.4",
"#babel/preset-env": "7.4.4",
"#babel/preset-flow": "7.0.0",
"#babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
.babelrc
{
"presets": [
["#babel/preset-env", { "targets": { "ie": "11", "esmodules": true }}],
"#babel/preset-react",
"#babel/preset-flow"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-optional-chaining",
"react-hot-loader/babel",
"#babel/plugin-transform-classes",
"#babel/plugin-transform-arrow-functions"
],
"env": {
"lang":{
"plugins": ["#babel/plugin-syntax-object-rest-spread", ["react-intl", {
"messagesDir": "../assets/build-translations/messages/"
}]]
}
}
}
webpackconfig.js
const { DefinePlugin, NamedModulesPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin');
const path = require('path');
require('babel-polyfill');
const webpackAlias = require('./webpack.config.alias');
const pagenames = require('./utils/pageNames');
const DEV_SERVER_PUBLIC_PATH = 'http://192.168.1.14:44444/webpack/static/';
const environment = process.env && process.env.NODE_ENV || 'production';
const PROD = environment === 'production';
const environmentValues = new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(environment)
});
const UglifyJSPluginInit = new UglifyJSPlugin({
uglifyOptions: {
beautify: false,
ecma: 6,
compress: true,
comments: false,
parallel: true,
sourceMap: true,
warnings: false,
}
});
const flowPlugin = environment === 'lang' ? [] : [new FlowBabelWebpackPlugin()];
const commonPlugins = [environmentValues, ...flowPlugin, new MiniCssExtractPlugin({
filename: '[name].css',
})];
const productionPlugins = [UglifyJSPluginInit];
const pluginsArr = PROD
? [...commonPlugins, ...productionPlugins]
: [...commonPlugins, new NamedModulesPlugin()];
const devtool = PROD ? false : 'cheap-source-map';
const imagePublicPath = PROD ? '/static/' : DEV_SERVER_PUBLIC_PATH;
const modeAlias = PROD ? 'production' : 'development';
const outputPath = path.resolve(__dirname, '../assets');
const entry = {
app: './utils/app.js',
'password-reset': './utils/scss/password-reset.scss',
[pagenames.pageNames1]: './fileurl.js',
[pagenames.pageNames2]: './fileurl.js',
[pagenames.pageNames3]: './fileurl.js',
[pagenames.pageNames4]: './fileurl.js',
};
const config = {
...webpackAlias,
mode: modeAlias,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
minChunks: 13,
name: 'commons',
chunks: 'all',
},
},
}
},
context: __dirname,
entry,
devtool,
output: {
path: outputPath,
publicPath: '/webpack/static/',
filename: '[name].js',
},
devServer: {
contentBase: outputPath,
port: 44444,
host: '192.168.1.14',
publicPath: DEV_SERVER_PUBLIC_PATH,
stats: {
errors: true,
warnings: true,
assets: false,
chunks: true,
chunkGroups: true,
chunkModules: true,
chunkOrigins: true,
builtAt: false,
cached: false,
timings: false,
outputPath: false,
modules: true,
entrypoints: true,
},
headers: {
"Access-Control-Allow-Origin": "\*",
}
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-url-loader'
},
{
test: /\.js$/,
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
use: [
{
loader: 'babel-loader',
},
{
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: true
}
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000, // Convert images < 10kb to base64 strings
publicPath: imagePublicPath // Since the fallback is file-loader, We end up serving from /static/{file} or during development - wherever the server is located
}
}
]
},
{
test: /\.scss|css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !PROD,
reloadAll: true,
},
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{ loader: 'postcss-loader' },
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
}
]
},
plugins: pluginsArr
};
console.log('process.env.NODE_ENV', environment);
module.exports = config;
Any help would be appreciated, Thanks in advance.
I can see on your .babelrc presets, under #babel/preset-env you are defining "esmodules": true.
Based on the #babel/preset-env documentation, if you set esmodules to true, browsers targets will be ignored.
Please note: when specifying the esmodules target, browsers targets will be ignored.
Can you try changing this option to see if you have any luck?
Also, I suggest you try a production build to see if you get the same error/behavior.
Try to delete the package-lock.json and the node_modules folder, then using the following package.json content (change the name to your application name. In this file, I changed some package version.) and execute the npm install commands to install the related package. I have created a sample using this file, it works well on my side.
{
"name": "<your application name>",
"version": "0.1.0",
"private": true,
"dependencies": {
"#synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"raf": "^3.4.1",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "^16.8.6",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.3.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^7.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "3.0.1",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "^4.0.4",
"redux-form": "^8.2.5",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.4.4",
"#babel/node": "7.4.5",
"#babel/plugin-proposal-class-properties": "7.4.4",
"#babel/plugin-proposal-object-rest-spread": "7.4.4",
"#babel/plugin-proposal-optional-chaining": "7.2.0",
"#babel/plugin-transform-arrow-functions": "7.2.0",
"#babel/plugin-transform-classes": "7.4.4",
"#babel/plugin-transform-runtime": "7.4.4",
"#babel/preset-env": "7.4.4",
"#babel/preset-flow": "7.0.0",
"#babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "^3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
Unless you're supplying a .babelrc or babel.config.js (documentation) that you didn't include with your question, then your #babel/preset-env dependency may not be getting applied during transpilation.
The default behavior for #babel/preset-env is to transpile down to EMCAScript 2015+, which would then work for IE11.
Sidenote, if no targets are specified, #babel/preset-env will transform all ECMAScript 2015+ code by default.
I would suggest adding one of those. For example:
.babelrc
{
"presets": ["#babel/preset-env"]
}
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["#babel/preset-env"],
};
}
If the arrow function is ending up in the browser, then it doesn’t look like you are transpiling your code before serving it to the browser. I see your installing webpack and Babel, but their are no scripts in your package.json to run either. As you have not shared a webpack config, you give us little to go on without seeing how the rest of your project is setup
I would suggest moving your code into create-react-app and try running it from that.
Till now Internet Explorer 11 does not ECMAScript 6 (ES6) version of JavaScript.You have to write the function in old ways (curly brackets).Some thing like below:
var name = ""
function func1(filter){
if (filter instanceof RegExp === true)
return filter.text(name)
else{
return filter === name
}
}
function testParameter(name, filters){
name = this.name
return filters.some(func1);
}
Array.some() function is of ES5 which is supported in Internet Explorer.
Reference:
https://interoperability.blob.core.windows.net/web/MS-ES5EX/%5BMS-ES5EX%5D-180828.pdf
I've inherited a Create React App v1.5.2 project that has been ejected and I don't know what changes have been made to the defaults, but my problem is that yarn test runs Jest, finds my sample test but something in the transpilation process is missing since ES6 modules are not recognised. This is the error I'm getting:
FAIL src/components/ui/atoms/sample-atom/__tests__/sample-atom-test.js
● Test suite failed to run
/Users/me/project/config/polyfills.js:3
import 'core-js/es6/promise';
^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
This is the project.json file:
{
"name": "project",
"version": "1.0.3",
"private": true,
"scripts": {
"start": "node scripts/start.js",
"dev": "yarn start",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"mock": "node mock/index.js",
"flow": "flow",
"lint": "eslint . --ext js,jsx",
"lint-build": "eslint . -c .eslintrc-build.js --ext js,jsx",
"generate": "plop",
"storybook": "start-storybook -s ./public -p 6006",
"build-storybook": "KEEP_PROP_TYPES=true build-storybook"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"dependencies": {
"#babel/runtime": "^7.2.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.2.2",
"core-js": "^2.6.2",
"highcharts": "7.0.3",
"highcharts-react-official": "2.0.0",
"history": "^4.7.2",
"hoist-non-react-statics": "^3.2.1",
"object-assign": "4.1.1",
"promise": "8.0.2",
"prop-types": "^15.6.2",
"raf": "3.4.1",
"react": "^16.7.0",
"react-animate-height": "^2.0.7",
"react-dom": "^16.7.0",
"react-intl": "^2.8.0",
"react-perf-devtool": "^3.1.8",
"react-phone-input-2": "^2.8.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-swipeable": "^5.0.1",
"react-typed": "^1.1.0",
"reactour": "^1.13.1",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.0",
"storybook-react-router": "^1.0.2",
"whatwg-fetch": "3.0.0",
"why-did-you-update": "^1.0.6"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.2.3",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.2.0",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-arrow-functions": "^7.2.0",
"#babel/plugin-transform-destructuring": "^7.2.0",
"#babel/plugin-transform-react-jsx": "^7.2.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"#babel/preset-env": "^7.2.3",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/runtime-corejs2": "^7.2.0",
"#sambego/storybook-styles": "^1.0.0",
"#storybook/addon-actions": "^4.1.7",
"#storybook/addon-backgrounds": "^4.1.7",
"#storybook/addon-console": "^1.1.0",
"#storybook/addon-info": "^4.1.7",
"#storybook/addon-knobs": "^4.1.7",
"#storybook/addon-links": "^4.1.7",
"#storybook/addon-viewport": "^4.1.7",
"#storybook/addons": "^4.1.7",
"#storybook/react": "^4.1.7",
"#svgr/core": "^4.1.0",
"#svgr/webpack": "^4.1.0",
"autoprefixer": "9.4.5",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"babel-loader": "^8.0.5",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-macros": "^2.4.5",
"babel-plugin-transform-react-remove-prop-types": "^0.4.23",
"babel-preset-react-app": "7.0.0",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.2",
"connect": "^3.6.6",
"css-loader": "2.1.0",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^5.14.1",
"eslint-config-react-app": "^3.0.6",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "3.2.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "3.0.1",
"flow-bin": "^0.91.0",
"fs-extra": "7.0.1",
"html-webpack-plugin": "^4.0.0-beta.5",
"inquirer-directory": "^2.1.0",
"jest": "23.6.0",
"js-yaml": "^3.12.1",
"lost": "^8.3.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"plop": "^2.2.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"rc-slider": "^8.6.5",
"react-dev-utils": "7.0.1",
"sass-loader": "^7.1.0",
"storybook-addon-intl": "^2.3.2",
"storybook-addon-redux-listener": "^0.1.7",
"storybook-react-router": "^1.0.2",
"style-loader": "0.23.1",
"sw-precache-webpack-plugin": "0.11.5",
"swagger-tools": "^0.10.4",
"url-loader": "1.1.2",
"webpack": "4.29.0",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4"
}
}
This is the .babelrc.js file I've found in the project:
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
const isDev = env === 'development';
const isProd = env === 'production';
const isTest = env === 'test';
const keepPropTypes = !!process.env.KEEP_PROP_TYPES;
/**
* babelrc "extracted" from babel-preset-react-app,
* in order to customize 'babel-plugin-transform-react-remove-prop-types' plugin behavior.
* For details check out original babel config file
* https://github.com/facebook/create-react-app/blob/next/packages/babel-preset-react-app/index.js
*/
module.exports = {
presets: [
isTest && [
'#babel/preset-env',
{
targets: {
node: '6.12'
}
}
],
!isTest && [
'#babel/preset-env',
{
useBuiltIns: 'entry',
modules: false
}
],
[
'#babel/preset-react',
{
development: isDev || isTest,
}
],
'#babel/preset-flow'
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-transform-destructuring',
'#babel/plugin-proposal-class-properties',
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-react-jsx',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
corejs: 2,
regenerator: true,
useESModules: true
}
],
// keepPropTypes -> Prevent prop types to be removed during storybook build
isProd && !keepPropTypes && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true,
}
],
!isTest && [
'#babel/plugin-transform-regenerator',
{
async: false,
}
],
'#babel/plugin-syntax-dynamic-import',
isTest && 'babel-plugin-transform-dynamic-import',
// CUSTOM PLUGINS
// Lodash tree shaking plugin (convert normal imports to cherrypick imports)
// allows foo?.baz syntax
// '#babel/plugin-proposal-optional-chaining',
// allows export Something from './something' - Disabled for now
// '#babel/plugin-proposal-export-default-from'
isProd && '#babel/plugin-transform-arrow-functions',
].filter(Boolean)
}
They didn't write any test, so I don't think they they messed up with something jest-related.
Ejecting the current version of CRA doesn't even add a .babelrc.js file, so I don't know if a previous version did or if the file I have is theirs.
Any help in figuring out what's wrong in the configuration I have? Thanks
EDIT
The code of the file that isn't being transpiled (/config/polyfills.js) is the following. I guess it's just the standard ejected polyfill file used by the version of create-react-app that I'm using.
'use strict';
import 'core-js/es6/promise';
import 'core-js/es6/array';
import 'core-js/es6/object';
import 'core-js/es7/array';
import 'core-js/fn/array/includes';
import 'core-js/fn/string/includes';
import 'core-js/fn/object/assign';
import 'whatwg-fetch'
// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
require('raf').polyfill(global);
}
In the end, what solved my problem was upgrading the following dependancies:
"babel-jest": "24.8.0",
"babel-preset-react-app": "9.0.0",
"jest": "24.8.0",
And adding the following:
"babel-plugin-transform-dynamic-import": "^2.1.0",