We Keep Coding

Proper way to migrate advanced code in JS for old browsers

I have some code in javascript in EC6, but I need it to open on old browsers (perfectly on Samsung S4). I'm testing with Safari 5.
For compiling code I've chosen webpack + babel, but whatever configuration I choose there is one error: 'SyntaxError: Expected an identifier but found '.' instead' and it's only shown on old browsers.
For example, removing all code, except this:
import io from 'socket.io-client';
let socket = io();
Gives following error in Safari 5:
"SyntaxError: Expected an identifier but found '.' instead"
My package.json:
{
"name": "knife",
"version": "1.0.0",
"description": "socket.io app",
"dependencies": {
"axios": "^0.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"fs": "0.0.1-security",
"jest": "^26.4.2",
"js-cookie": "^2.2.1",
"jsdoc": "^3.6.3",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"moment": "^2.27.0",
"mysql": "^2.17.1",
"phaser": "^3.20.1",
"request": "^2.81.0",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"sweetalert2": "^10.0.2"
},
"scripts": {
"start": "node index.js",
"test": "jest",
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"path": "^0.12.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js:
const path = require('path')
module.exports = {
entry: './game/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'public/js')
},
mode: 'production',
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['#babel/preset-env', {
targets: 'dead'
}]]
},
}
}
]
}
}
What is the proper way for compiling js files with webpack and babel for this purpose?

how to fix warning with React and babel: Parsing error: Unexpected token <

I have this app where I have added react, babel and webpack.
Repo in github: https://github.com/GiorgioMartini/holli
Its seems to work ok, buti get this error:
WARNING in ./src/scripts/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
/Users/giorgio/Documents/frontend-assessment-test/src/scripts/index.js
7:7 error Parsing error: Unexpected token <
✖ 1 problem (1 error, 0 warnings)
that line 7:7 is this one where the div starts after the reurn:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div>
Hella
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
So im guessing its some babel misconfiguration or something.
This is my babel config file:
const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js')
},
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: false
}
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{ from: Path.resolve(__dirname, '../public'), to: 'public' }
]),
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/index.html')
})
],
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src')
}
},
module: {
rules: [
{ test: /\.(js)$/, use: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} ]
}
};
And this is the package.json:
"name": "frontend-assessment-test",
"version": "1.0.0",
"description": "A frontend assessment test for our new pirates, which are willing to come on board.",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
"start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/holidaypirates/frontend-assessment-test"
},
"author": "HolidayPirates",
"license": "MIT",
"bugs": {
"url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
},
"devDependencies": {
"#babel/core": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.7.4",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"eslint": "^6.7.1",
"eslint-loader": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^4.0.0-beta.11",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"core-js": "^3.3.3",
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
Any ideas where could be the issue and how to fix it?
here is the repo: https://github.com/GiorgioMartini/holli

I found the answer,
that is just a eslint error, so the app works fine is just eslint complaining.
I had to add this to the eslintrc file and now its fixed:
"extends": [
"plugin:react/recommended"
]

Error when styling React components imported from index file, but not when importing directly from component file

Newbie here, so apologies in advance if I am overlooking something obvious or missed a duplicate posting (and also for not posting directly on styled-components, apparently I need a rep for that...) .
The closest I found to my problem was in this resolved issue, at the bottom of the thread:
https://github.com/styled-components/styled-components/issues/213
The guy had a very similar problem, but the solution was brief and Typescript specific.
BACKGROUND: I have an index file that imports my components from all over, and exports them under a webpack alias. Whenever I need to import elsewhere I just declare:
import { MyComponentA, MyComponentB, MyComponentC } from 'components';
I recently started incorporating styled-components into my project and have been getting an error like the following when I try to style components imported in this way:
Error: Cannot create styled-component for component: undefined._____________styled-components.browser.esm.js:233
at new StyledComponentsError (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:233:59)
at constructWithOptions (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:1355:12)
at styled (/home/jhillert/Dropbox/Projects/TimeLockr/node_modules/styled-components/dist/styled-components.browser.esm.js:2293:11)
at Module.eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/components/card-area/CardArea.jsx:111:91)
at eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/components/card-area/CardArea.jsx:133:31)
at Module../src/components/card-area/CardArea.jsx (http://localhost:8080/bundle.js:9343:1)
at __webpack_require__ (http://localhost:8080/bundle.js:724:30)
at fn (http://localhost:8080/bundle.js:101:20)
at eval (/home/jhillert/Dropbox/Projects/TimeLockr/src/indexes/components.jsx:17:89)
at Module../src/indexes/components.jsx (http://localhost:8080/bundle.js:9619:1)
If I import the component directly from the source file I do not get the error. It only happens when I try to pass components imported from the index file into the styled() method, and also when I try to use the CSS prop to add inline styling.
For some reason the error does not occur with all components imported in this way, and also I have made changes to my code that suddenly cause the index import to trigger the error. I really like having a central index file, so a fix would be greatly appreciated.
Example where css prop causes error:
*Project config below.
Index File looks like this (components.jsx):
export { default as ActionBar } from '../components/action-bar/ActionBar';
export { default as AuthForm } from '../components/auth/AuthForm';
export { default as AuthModal } from '../components/auth/AuthModal';
export { default as AuthTabs } from '../components/auth/AuthTabs';
export { default as Box } from '../components/box/Box';
/*==============================================================*/
//CardArea.js
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
CardColumn ◀◀◀—————————————— DOES PRODUCE ERROR
LockedEntryCard,
ReleasedEntryCard,
} from 'components';
import CardColumn from '../card-column/CardColumn' ◀◀◀——————— DOES NOT
const S = {};
S.CardArea = styled.div` ◀◀◀————— NOT IMPORTED, NOT A PROBLEM
/* ommitted */ BUT WOULD CAUSE SAME ERROR
`; IF IMPORTED.
const CardArea = ({ entries, refresh }) => {
const { locked, released } = entries;
const hasLockedChildren = !!(locked.length);
const hasReleasedChildren = !!(released.length);
const [showLocked, updateShowLocked] = useState(false);
const [showReleased, updateShowReleased] = useState(false);
useEffect(() => {
updateShowLocked(true);
updateShowReleased(true);
},
[]);
return (
<S.CardArea>
{(hasReleasedChildren && showReleased)
&& (
<CardColumn
id='card-column-released-entries'
css=' ◀◀◀ TRIGGERS THE ERROR
margin-left = 2rem; ◀◀◀ TRIGGERS THE ERROR
margin-right = 1rem; ◀◀◀ TRIGGERS THE ERROR
' ◀◀◀ TRIGGERS THE ERROR
heading='Unlocked'
Card={ReleasedEntryCard}
/* ommitted */
CardArea.propTypes = {
/* ommitted */
};
export default CardArea;
=================================================================
Webpack configuration (webpack.config.js):
Aliases are towards the bottom.
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const path = require('path');
const config = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.jsx?$/,
include: /node_modules/,
use: ['react-hot-loader/webpack'],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader/locals',
],
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
],
},
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty',
},
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
],
plugins: [
new CopyWebpackPlugin([
// relative path is from src
{ from: './static/favicon.ico' }, // <- your path to favicon
]),
new Dotenv({
systemvars: true,
}),
],
devServer: {
contentBase: './dist',
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
alias: {
components: path.resolve(__dirname, 'src/indexes/components.jsx'),
contexts: path.resolve(__dirname, 'src/indexes/contexts.jsx'),
theme: path.resolve(__dirname, 'src/indexes/theme.jsx'),
utilities: path.resolve(__dirname, 'src/indexes/utilities.jsx'),
},
},
};
module.exports = config;
Babel Config (.bablerc):
{
presets: [
[
'#babel/preset-env',
{
modules: false
}
],
'#babel/preset-react'
],
plugins: [
'react-hot-loader/babel',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-react-jsx-source',
[
'babel-plugin-styled-components',
{
"ssr": false
}
],
]
}
Dependencies (Package.json)
{
"name": "timelockr",
"version": "1.0.0",
"description": "Making information inaccessible.",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "https://github.com/jehillert/Keep-Away"
},
"scripts": {
"clean": "rm dist/bundle.js",
"build-dev": "webpack -d --mode development",
"build-prod": "webpack -p --mode production",
"dev-server": "nodemon --ignore node_modules --inspect server",
"start": "webpack-dev-server --host 0.0.0.0 --hot --mode development",
"start:dev": "nodenv -f .",
"lint:css": "stylelint './src/**/*.js'"
},
"dependencies": {
"#date-io/date-fns": "^1.1.0",
"#date-io/moment": "^1.1.0",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.0.0-alpha.4",
"#material-ui/system": "^3.0.0-alpha.2",
"ajv": "^6.10.0",
"axios": "^0.18.0",
"bluebird": "^3.5.3",
"body-parser": "^1.18.3",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"cors": "^2.8.5",
"date-fns": "^2.0.0-alpha.27",
"debug": "^4.1.1",
"dotenv-webpack": "^1.7.0",
"express": "^4.16.4",
"express-mysql-session": "^2.1.0",
"express-session": "^1.15.6",
"jquery": "^3.3.1",
"less": "^3.9.0",
"material-ui-pickers": "^2.2.4",
"moment": "^2.24.0",
"mysql": "^2.16.0",
"notistack": "^0.6.1",
"pbkdf2-password": "^1.2.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.6",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.2",
"react-router-dom": "^5.0.0",
"react-transition-group": "^2.7.1",
"styled-components": "^4.2.0",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"async": "^2.6.2",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"copy-webpack-plugin": "^5.0.2",
"css-loader": "^1.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"eslint_d": "^7.3.0",
"faker": "^4.1.0",
"less-loader": "^4.1.0",
"node-cmd": "^3.0.0",
"nodemon": "^1.18.10",
"style-loader": "^0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "^2.1.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.6.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}

The following github issues from the arc repo seem to describe problems similar to the one you are having here: #339, #130. The last issue specifically has this comment which suggests a potential solution. By styling in the following manner in most cases the problem is said to be resolved:
const StyledCComponent = styled(props => <CComponent {...props} />)``
The root underlying cause seem to be a circular dependency issue. By wrapping the component in a function the dependency is evaluated at runtime.

Webpack: TypeError: Cannot read property 'properties' of undefined

Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
Not sure why I'm getting this error, but I upgraded from Webpack 3 to 4.
webpack
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'moonholdings.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfigOptions = [{
from: 'app/static',
to: 'static/'
}];
const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
const PATHS = {
app,
build: moonholdings
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: ['babel-polyfill', PATHS.app],
performance: {
hints: false,
maxAssetSize: 1000000
},
output: {
path: PATHS.build,
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [app, nodeModules]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
const developmentConfig = {
devtool: 'inline-source-map',
devServer: {
contentBase: moonholdings
},
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: false,
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
package.json
{
"name": "moon.holdings",
"version": "1.0.0",
"description": "Cryptocurrency asset portfolio",
"main": "index.js",
"repository": "https://github.com/Futuratum/moon.holdings.git",
"author": "Leon Gaban <leongaban#gmail.com>",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"webpack": "webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "yarn run test-eslint; yarn run test-jest:update",
"test-eslint": "eslint app",
"test-eslint:fix": "eslint --fix app",
"test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
"test-jest": "jest",
"test-jest:watch": "jest --watch",
"test-jest:coverage": "jest --coverage",
"test-jest:update": "jest --updateSnapshot"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
"<rootDir>/src/setupTests.js"
],
"now": {
"name": "moonholdings",
"alias": "moon.holdings"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"app"
],
"setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
},
"dependencies": {
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-plugin-dependencies": "^2.4.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flexboxgrid": "^6.3.1",
"git-hooks": "^1.1.10",
"history": "^4.7.2",
"html-webpack-plugin": "^3.0.6",
"jest": "^22.4.2",
"lodash": "^4.17.10",
"node-sass": "^4.7.2",
"path-to-regexp": "^2.2.0",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.0.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-test-renderer": "^16.3.2",
"redux": "^3.7.2",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.2.0",
"rest": "^2.0.0",
"sass-lint": "^1.12.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"svg-inline-loader": "^0.8.0",
"svg-loader": "^0.0.2",
"url-loader": "^1.0.1",
"webpack": "^4.20.2",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}

If it is happening after you have updated npm packages , then remove and reinstall webpack webpack-cli
npm remove webpack webpack-cli
npm install --save-dev webpack webpack-cli
I would suggest you to upgrade/update node before doing anything.

There are two things you need to do:
Remove webpack#4.20.2 and webpack-cli#2.0.10 dependency and specifically install webpack#4.19.0 and webpack-cli#3.0.4 version. Webpack 4.20.x release has error.
Also do not use extract-text-webpack-plugin.
extract-text-webpack-plugin should not be used with Webpack 4 to extract CSS. It doesn't work. Instead of this, try using: mini-css-extract-plugin.
After these changes, webpack should compile your code and generate necessary bundle.
Note: When I cloned mentioned repository on my system, I had to make changes to board.js file. I made change to this import statement: import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; This doesn't work on Linux system as paths are case sensitive.

It's ^ symbol in "webpack-cli": "^2.0.10" dependency which resulting to minor/patch version getting upgraded to latest webpack-cli#2.x.x, which has following change.
Change in webpack resulting in the issue: (change output to outputOptions)
REF: https://github.com/webpack/webpack-cli/pull/605
Solution: (installing webpack-cli#3.x.x)
npm uninstall webpack-cli
npm install --save-dev webpack-cli#3.1.1
REF:Solution

Try to install latest LTS version of Node and test again. Works perfectly fine for me with latest LTS node and npm.

In my case, I just forgot to return the middlewares array in the setupMiddlewares function, like this:
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// Smth very important
return middlewares
}
}

migrating to latest version solved the error for me: webpack-cli^3.3.11

Appropriate loader error on index.js

I'm stuck on this same error and I need fresh eyes for help.... I'm confused on the "appropriate loader". I was thinking this was from an improper regular expression in the webpack file. I checked the babel docs and this issue for guidance.
This is the error...
ERROR in ./src/index.js
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
# multi (webpack)-dev-server/client?http://localhost:8080 ./src
This is my src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))
.babelrc
{
"presets": ["env", "react"],
"env": {
"development": {
"plugins": [["react-transform",{
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
webpack.dev.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
module: {
rules: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [path.resolve(__dirname, "src")]
}
],
},
devServer: {
historyApiFallback: true,
inline: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({template: 'src/index.html'}),
new webpack.HotModuleReplacementPlugin()
],
}
and my package.json
{
"name": "webpack-starter-kit",
"version": "1.0.0",
"description": "starter files for basic development and production using React, Babel, Webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --mode=development",
"build": "webpack --mode=production"
},
"author": "Kevin Turney",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.7",
"postcss-loader": "^2.1.2",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.1"
}
}