We have a react app based on the react-production-starter boilerplate.
Our dev build runs fine in IE11, but for some reason our production build doesn't.
We get the following error:
Minified React error #109; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=t for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Here are the project dependencies:
"dependencies": {
"actual": "0.2.0",
"async": "2.1.4",
"attr-accept": "1.1.0",
"aws-sdk": "2.7.11",
"babel-register": "6.18.0",
"bcrypt": "1.0.0",
"body-parser": "1.15.2",
"canvas": "1.6.2",
"clipboard": "1.5.15",
"clor": "2.0.2",
"color-convert": "1.8.2",
"color-thief": "2.2.2",
"columnify": "1.5.4",
"compression": "1.6.2",
"cookie-parser": "1.4.3",
"cors": "2.8.1",
"couchbase": "2.2.4",
"couchnode": "4.3.4",
"cross-env": "3.1.3",
"debug": "2.3.3",
"dockerode": "2.3.1",
"dotenv": "2.0.0",
"elasticsearch": "12.1.0",
"email-templates": "2.5.4",
"express": "4.14.0",
"express-useragent": "1.0.4",
"fluent-ffmpeg": "2.1.0",
"geoip-lite": "1.1.8",
"glamor": "2.20.12",
"gsap": "1.19.0",
"handlebars": "4.0.6",
"history": "4.4.1",
"hpp": "0.2.1",
"image-size": "0.5.0",
"js2xmlparser": "2.0.2",
"json2csv": "3.7.2",
"kue": "0.11.5",
"lodash": "4.17.2",
"material-ui": "0.16.4",
"moment": "2.17.1",
"mongo-oplog": "cayasso/mongo-oplog#eba0c4fe6698854cd85442ef12da97fd74282dbc",
"mongodb": "2.2.16",
"morgan": "1.7.0",
"ms": "0.7.2",
"multer": "1.2.0",
"node-cache": "4.1.0",
"node-schedule": "1.2.0",
"normalize.css": "4.2.0",
"npm-run-all": "3.1.2",
"open-graph": "0.2.2",
"passport": "0.3.2",
"passport-facebook": "2.1.1",
"passport-google-oauth": "1.0.0",
"passport-local": "1.0.0",
"promise": "7.1.1",
"pug": "2.0.0-beta6",
"react": "15.4.1",
"react-addons-css-transition-group": "15.4.1",
"react-addons-shallow-compare": "15.4.1",
"react-anything-sortable": "matanasa/react-anything-sortable",
"react-avatar-editor": "6.1.0",
"react-canvas": "1.2.1",
"react-click-outside": "tj/react-click-outside",
"react-color": "2.10.0",
"react-confirm": "0.1.14",
"react-cropper": "0.10.0",
"react-custom-scrollbars": "4.0.0",
"react-dom": "15.4.1",
"react-ga": "2.1.2",
"react-gsap-enhancer": "0.3.0",
"react-helmet": "3.2.3",
"react-infinite-scroll-component": "Hazantip/react-infinite-scroll-component#master",
"react-key-handler": "0.3.0",
"react-masonry-component": "4.4.0",
"react-paginate": "4.0.0",
"react-redux": "4.4.6",
"react-rnd": "4.2.0",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-stickydiv": "3.4.19",
"react-swipeable": "3.7.0",
"react-tap-event-plugin": "2.0.1",
"react-text-input": "0.0.8",
"react-timer-hoc": "2.0.2",
"react-virtualized": "8.7.1",
"redial": "0.5.0",
"redlock": "2.1.0",
"redux": "3.6.0",
"redux-form": "6.2.1",
"redux-form-validation": "0.0.8",
"redux-logger": "2.7.4",
"redux-thunk": "2.1.0",
"request": "2.79.0",
"seamless-immutable": "7.0.1",
"sharp": "0.17.0",
"socketcluster-client": "5.1.1",
"sortablejs": "1.5.0-rc1",
"source-map-support": "0.4.6",
"ssh2": "0.5.4",
"superagent": "3.1.0",
"urijs": "1.18.4",
"vimeo": "1.2.0"
},
"devDependencies": {
"assets-webpack-plugin": "3.5.0",
"babel-cli": "6.18.0",
"babel-core": "6.18.2",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.8",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-polyfill": "6.16.0",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-0": "6.16.0",
"babel-register": "6.18.0",
"chai": "3.5.0",
"chai-http": "3.0.0",
"chalk": "1.1.3",
"core-decorators": "0.14.0",
"css-loader": "0.26.1",
"eslint": "3.11.1",
"eslint-config-airbnb": "13.0.0",
"eslint-loader": "1.6.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.8.0",
"extract-text-webpack-plugin": "1.0.1",
"json-loader": "0.5.4",
"mocha": "3.2.0",
"nodemon": "1.11.0",
"npm-check": "5.4.0",
"opn": "4.0.2",
"react-copy-to-clipboard": "4.2.3",
"style-loader": "0.13.1",
"stylus": "0.54.5",
"stylus-loader": "2.4.0",
"webpack": "1.14.0",
"webpack-dev-middleware": "1.8.4",
"webpack-hot-middleware": "2.13.2"
},
Our .babelrc:
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy"]
}
Our webpack build:
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');
const CONFIG = require('./webpack.base');
const { CLIENT_ENTRY, CLIENT_OUTPUT } = CONFIG;
module.exports = {
'devtool': 'source-map',
'entry': {
'main': [require.resolve('./polyfills'), CLIENT_ENTRY],
'vendor': [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
],
},
'output': {
'filename': '[name]_[chunkhash].js',
'chunkFilename': '[name]_[chunkhash].js',
'publicPath': '/assets/',
'path': CLIENT_OUTPUT,
},
'plugins': [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
'__DEV__': false,
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor_[hash].js', Infinity),
new AssetsPlugin({ 'filename': 'assets.json' }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
'compressor': {
'screw_ie8': true,
'warnings': false,
},
'mangle': {
'screw_ie8': true,
},
'output': {
'comments': false,
'screw_ie8': true,
},
}),
new webpack.NoErrorsPlugin(),
],
'resolve': {
'extensions': ['', '.js', '.styl'],
},
'module': {
'loaders': [
{
'test': /\.js$/,
'loader': 'babel',
'query': {
'cacheDirectory': true,
'presets': ['es2015', 'react', 'stage-0'],
'plugins': ['transform-decorators-legacy', 'transform-react-constant-elements', 'transform-react-inline-elements'],
},
'exclude': /(node_modules)/,
},
{
'test': /\.json$/,
'loader': 'json',
},
{
'test': /\.styl|\.css$/,
'loader': 'style-loader!css-loader!stylus-loader',
},
],
},
'stylus': {
'preferPathResolver': 'webpack',
},
};
Has anyone had similar issues with IE out there?
Remove transform-react-inline-elements from plugins list of babel-loader in webpack config file.
This requires ES6 Symbol, but it is not present in IE11.
Related
How to connect polyfill correctly?
I read all the documentation Babel 7 and followed it. Below you can see my settings.
if I add this in the webpack config
entry: [
'core-js/stable',
'regenerator-runtime/runtime',
'./main.js'
],
then everything works. but according to the documentation this line can be removed, since all the settings in the babel.config.js
If i remove from entry this line, redux store not working in IE11
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
[
'#babel/preset-env',
{
debug: true,
useBuiltIns: 'entry',
corejs: {
version: '3.6',
proposals: false
},
}
],
'#babel/preset-react',
'rsuite'
],
plugins: [
'react-hot-loader/babel',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-export-default-from',
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-syntax-object-rest-spread',
'#babel/plugin-transform-arrow-functions',
'#babel/plugin-transform-async-to-generator',
'#babel/plugin-transform-classes',
'#babel/plugin-transform-parameters',
'#babel/plugin-transform-property-literals',
['#babel/plugin-transform-runtime',
{
corejs: {
version: 3,
proposals: true
}
}
],
'#babel/plugin-transform-spread',
'#babel/plugin-transform-template-literals',
'babel-plugin-styled-components',
]
};
};
package.json
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/plugin-proposal-object-rest-spread": "^7.9.5",
"#babel/plugin-syntax-object-rest-spread": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.8.3",
"#babel/plugin-transform-async-to-generator": "^7.8.3",
"#babel/plugin-transform-classes": "^7.9.5",
"#babel/plugin-transform-parameters": "^7.9.5",
"#babel/plugin-transform-property-literals": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/plugin-transform-spread": "^7.8.3",
"#babel/plugin-transform-template-literals": "^7.8.3",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#devexpress/dx-react-grid-material-ui": "^2.4.0",
"babel-eslint": "^7.2.3",
"babel-helper-annotate-as-pure": "^7.0.0-beta.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.2",
"babel-plugin-styled-components": "^1.10.7",
"babel-preset-rsuite": "^4.0.1",
"clean-webpack-plugin": "^3.0.0",
"colors": "^1.3.2",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.7.0",
"optimize-css-assets-webpack-plugin": "^3.2.1",
"react-highlight-words": "^0.10.0",
"react-hot-loader": "^4.7.2",
"redux-saga": "^0.16.2",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"#babel/runtime": "^7.9.2",
"#babel/runtime-corejs3": "^7.9.2",
"#hot-loader/react-dom": "^16.13.0",
"axios": "^0.19.2",
"c3": "0.4.11",
"cookie": "^0.3.1",
"core-js": "^3.6.5",
"date-fns": "^2.0.0",
"file-saver": "^2.0.2",
"jquery": "^3.4.1",
"js-base64": "^2.5.2",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"normalizr": "^3.3.0",
"prop-types": "^15.7.2",
"query-string": "^5.1.1",
"ramda": "^0.26.1",
"rc-tree": "^3.1.1",
"react": "^16.8.3",
"react-datepicker": "^2.8.0",
"react-dom": "^16.8.3",
"react-html-parser": "^2.0.2",
"react-paginate": "^6.3.0",
"react-redux": "^7.1.0-rc.1",
"react-router-dom": "^4.4.0-beta.7",
"react-scrollbar": "^0.5.6",
"react-select": "^2.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.5",
"reselect": "^3.0.1",
"rsuite": "^4.1.4",
"styled-components": "^4.1.3"
}
webpack rules
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.less$/,
exclude: /node_modules/,
use: cssLoaders('less-loader')
},
{
test: /\.(png|jpg|svg|gif?)$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf?)$/,
use: 'file-loader'
},
]
},
Just don't remove these lines you've added for the polyfills
entry: [
'core-js/stable',
'regenerator-runtime/runtime',
'./main.js'
],
You are doing right, give us the link to the documentation where it is said this line can be removed. I think it's a misunderstanding.
Or maybe you are missing an other babel plugin ;)
UPDATE 2020-04-17
As it is said for #babel-polyfill
As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):
So install npm i core-js and npm i regenerator-runtime
Then in your webpack config file you manage the entry points like that
...
entry: {
bundle: [require.resolve('core-js/stable'), require.resolve('regenerator-runtime/runtime'), paths.srcClient]
},
...
Then you are good to go
I think this is due to the fact that the react does not support ie10. I get an error in ie10 Set in undefined and in ie11 the redux store is not loaded. According to the documentation, the react needs to be imported polyfill globally.
https://reactjs.org/docs/javascript-environment-requirements.html
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
Due to some update, my previously working set up no longer operates as expected. When I run yarn start WDS will look for changes to my files and make the right updates the first time, but any other changes to the file will not be send to the browser, even though WDS acknolodges the file change. Here is my current config
const path = require('path');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
require('babel-polyfill');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '/Zeus/src'),
build: path.join(__dirname, '/Zeus/dist'),
};
const common = {
entry: {
index: [
'babel-polyfill',
PATHS.app,
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss'],
},
output: {
path: PATHS.build,
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
include: PATHS.app,
use: {
loader: 'babel-loader',
},
},
{
test: /flickity/,
loader: 'imports-loader?define=>false&this=>window',
}
],
},
plugins: [
new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
],
};
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === 'development',
});
//
// Developmemt configuration
//
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: path.join(__dirname, '/Zeus'),
historyApiFallback: true,
hot: true,
// hotOnly: true,
clientLogLevel: 'info',
// stats: 'errors-only',
host: '0.0.0.0',
port: 8080,
},
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
// use style-loader in development
fallback: 'style-loader',
}),
}],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
extractSass,
],
});
}
Usually this means I will cancel the process and start it again. Which works, but obviously not very convenient.
[edit]
To include my dir structure, it follows:
/
webpack.config.js
/Zeus
/dist
/src
index.js
I'm using webpack: ^4.29.6.
[edit to include pck file]
{
"name": "zeus",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --progress",
"start": "webpack-dev-server --debug",
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-1": "^7.0.0",
"#babel/preset-stage-3": "^7.0.0",
"#babel/register": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"axios-mock-adapter": "^1.16.0",
"babel-eslint": "10",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^2.1.0",
"enhanced-resolve": "^4.1.0",
"enzyme": "^3.9.0",
"es6-promise-promise": "^1.0.0",
"eslint": "5.x",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"imports-loader": "^0.8.0",
"install": "^0.12.2",
"istanbul": "1.0.0-alpha.2",
"jquery": "^3.3.1",
"jsdom": "^14.0.0",
"mocha": "^6.0.2",
"mock-local-storage": "^1.1.8",
"nock": "^10.0.6",
"node-sass": "^4.11.0",
"offline-plugin": "^5.0.6",
"phantomjs": "^2.1.7",
"plato": "^1.7.0",
"react-addons-test-utils": "^15.6.2",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tapable": "^1.1.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"watchpack": "^1.6.0",
"webpack": "^4.29.6",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-sources": "^1.3.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.3.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.3.4",
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.24.1",
"enzyme-adapter-react-16": "^1.10.0",
"es6-promise": "^4.2.6",
"flickity": "^2.2.0",
"history": "^4.7.2",
"isomorphic-fetch": "^2.2.1",
"jest": "^24.3.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moxios": "^0.4.0",
"npm-check-updates": "^3.1.7",
"prop-types": "^15.7.2",
"query-string": "^6.2.0",
"react": "^16.8.3",
"react-async-script": "^1.0.0",
"react-async-script-loader": "^0.3.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.8.3",
"react-ga": "^2.5.7",
"react-google-login": "^5.0.2",
"react-infinite-scroller": "^1.2.4",
"react-loadable": "^5.5.0",
"react-masonry-component": "^6.2.1",
"react-modal": "^3.8.1",
"react-redux": "^7.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router-scroll": "^0.4.4",
"react-sticky": "^6.0.3",
"react-waypoint": "^9.0.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-promise": "^0.6.0",
"redux-saga": "^1.0.2",
"redux-storage": "^4.1.2",
"redux-thunk": "^2.3.0"
}
}
I have tried to fix my errors according to some answers. But I can't solve.
I am using webpack 1.15.0 and babel-loader 6.4.1.
Please help me to parse jsx file.
Here is the error message.
ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx Module
parse failed:
E:\code-bucket\university\node_modules\react-file-viewer\src\components\file-viewer.jsx
Unexpected token (74:6) You may need an appropriate loader to handle
this file type. SyntaxError: Unexpected token (74:6)
Here is my webpack.config.js file.
{
var path = require('path');
module.exports = {
entry: './client/js/app.js',
output: {
path: path.resolve('www/build/js'),
filename: 'app.bundle.js',
pathinfo: false
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread']
},
exclude: /node_modules/
},
{
test: /\.css$/, // Transform all .css files required somewhere within an entry point...
loaders: ['style-loader', 'css-loader', 'postcss-loader'] // ...with PostCSS
}
]
},
postcss: function() {
return [
require('postcss-import')({ // Import all the css files...
onImport: function (files) {
files.forEach(this.addDependency); // ...and add dependecies from the main.css files to the other css files...
}.bind(this) // ...so they get hot–reloaded when something changes...
}),
require('postcss-simple-vars')(), // ...then replace the variables...
require('postcss-focus')(), // ...add a :focus to ever :hover...
require('autoprefixer')({ // ...and add vendor prefixes...
browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
}),
require('postcss-reporter')({ // This plugin makes sure we get warnings in the console
clearMessages: true
})
];
},
target: "web", // Make web variables accessible to webpack, e.g. window
stats: {
colors: true
},
devtool: 'source-map'
};
}
Here is my package.json file.
{
"name": "university",
"version": "1.0.0",
"description": "Sample Application with React and the Lightning Design System",
"engines": {
"node": "4.2.1"
},
"main": "server.js",
"scripts": {
"webpack": "webpack",
"start": "node server.js",
"bundle": "build-bundle src/apps/ -o dist -v 1.0.0"
},
"author": "Christophe Coenraets <ccoenraets#gmail.com> (http://coenraets.org/)",
"license": "ISC",
"dependencies": {
"autoprefixer": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.3.13",
"bcryptjs": "^2.4.3",
"body-parser": "^1.14.2",
"build-bundle": "^2.0.8",
"compression": "^1.6.1",
"connect-busboy": "0.0.2",
"connect-multiparty": "^2.0.0",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"express": "^4.13.4",
"file-loader": "^0.11.2",
"filesize": "^3.5.10",
"fine-uploader": "^5.15.0",
"fontfaceobserver": "^2.0.13",
"fs": "0.0.1-security",
"fs-extra": "^4.0.2",
"gulp": "^3.9.1",
"json2csv": "^3.11.4",
"loader-utils": "^1.1.0",
"method-override": "^2.3.5",
"moment": "^2.11.2",
"multer": "^1.3.0",
"mysql": "^2.14.1",
"object.assign": "^4.0.4",
"path": "^0.12.7",
"pg": "^4.4.4",
"postcss-cssnext": "^3.0.2",
"postcss-focus": "^2.0.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-reporter": "^5.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-addons-transition-group": "^15.6.2",
"react-animate-height": "^0.10.3",
"react-bootstrap": "^0.31.3",
"react-csv": "^1.0.8",
"react-file-download": "^0.3.5",
"react-file-viewer": "^0.3.48",
"react-fileupload": "^2.4.0",
"react-fine-uploader": "^1.0.7",
"react-html-table-to-excel": "^2.0.0",
"react-redux": "^5.0.6",
"react-router": "^2.0.0-rc5",
"react-strap": "0.0.1",
"react-swipeable-views": "^0.12.8",
"react-transition-group": "^2.2.1",
"react-upload-file": "^2.0.0-beta.6",
"reactstrap": "^4.8.0",
"reactstrap-tether": "^1.3.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"sass": "^1.0.0-beta.2",
"style-loader": "^0.18.2",
"write": "^1.0.3",
"write-file": "^1.0.0",
"write-file-p": "^1.0.6"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-3": "^6.3.13",
"history": "^1.17.0",
"postcss": "^6.0.12",
"postcss-simple-vars": "^4.1.0",
"react": "^0.14.9",
"react-addons-linked-state-mixin": "^0.14.7",
"react-dom": "^0.14.9",
"react-onclickoutside": "^4.5.0",
"react-router": "^1.0.3",
"webpack": "^1.15.0"
}
}
Trying to compile my code with the webpack loader which i have set to ignore node_modules and have not been able to bypass the error below. I've tried clearing out my node_modules and reinstalling as well as adding and removing packages but have been unable to clear the block:
/home/mgarf/Documents/testApp/node_modules/babel-plugin- transform-react-jsx/lib/index.js:16
var visitor = require("babel-helper-builder-react-jsx")({ /*istanbul ignore next*/
^
TypeError: require(...) is not a function
at exports.default (index.js:14:17)
at Function.memoisePluginContainer (/home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:134:13)
at Function.normalisePlugin (/home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:32)
at /home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:208:30
at Array.map (native)
at Function.normalisePlugins (/home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:20)
at OptionManager.mergeOptions (/home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:300:36)
at /home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:371:14
at /home/mgarf/Documents/testApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:24
at Array.map (native)
Here is my webpackconfig snippet.
var webpack = require('webpack');
require('style-loader');
require('css-loader');
require('babel-register')({
ignore: /\.css$/,
});
...
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: [
['react-transform', {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react']
}
]
}]
]
}
},
{ test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" }
]
}
and package.json:
"dependencies": {
"async": "^1.5.2",
"bcrypt-nodejs": "^0.0.3",
"body-parser": "^1.15.1",
"bookshelf": "^0.10.0",
"compression": "^1.6.2",
"cookie-parser": "^1.4.1",
"dotenv": "^2.0.0",
"express": "^4.13.4",
"express-validator": "^2.20.4",
"jsonwebtoken": "^5.7.0",
"knex": "^0.11.7",
"moment": "^2.12.0",
"morgan": "^1.7.0",
"mysql": "^2.10.2",
"nodemailer": "^2.3.0",
"nunjucks": "^2.4.1",
"react": "^15.2.1",
"react-cookie": "^0.4.5",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.4",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
"request": "^2.69.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-plugin-react-transform": "^2.0.0-beta1",
"babel-plugin-rewire": "^1.0.0-rc-3",
"babel-plugin-transform-export-extensions": "^6.8.0",
"babel-register": "^6.8.0",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"enzyme": "^2.3.0",
"fetch-mock": "3.0.2",
"mocha": "^2.4.5",
"react-addons-test-utils": "^15.0.2",
"react-date-picker": "^5.3.21",
"redux-mock-store": "^1.0.2",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"style-loader": "^0.13.1",
"supertest": "^1.2.0"
},
"engines": {
"node": "6.1.0"
}
}