While trying to run application locally I am getting these errors, I just upgraded to webpack-dev-server from 2.11.3 to 4.15.2.
Below are my configs and files
webpack.config.js
const autoprefixer = require('autoprefixer');
const postcssFlexbugsFixes = require('postcss-flexbugs-fixes');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const babelRuntimeEntry = require.resolve('babel-preset-react-app');
const babelRuntimeEntryHelpers = require.resolve(
'@babel/runtime/helpers/esm/assertThisInitialized',
{ paths: [babelRuntimeEntry] },
);
const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
paths: [babelRuntimeEntry],
});
const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.baseline,
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath,
devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),
},
infrastructureLogging: {
level: 'verbose', // Enable detailed logging
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'node_modules'), paths.appNodeModules].concat(
process.env.N_PATH.split(path.delimiter).filter(Boolean),
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson, babelRuntimeEntry,
babelRuntimeEntryHelpers,
babelRuntimeRegenerator]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
postcssFlexbugsFixes,
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
require.resolve('less-loader'),
],
},
{
test: /.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
postcssFlexbugsFixes,
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/.(js|jsx|mjs)$/, /.html$/, /.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
publicPath,
}),
new webpack.DefinePlugin(env.stringified),
new CaseSensitivePathsPlugin(),
new webpack.IgnorePlugin({
resourceRegExp: /^./locale$/,
contextRegExp: /moment$/,
}),
],
node: {
__dirname: true, // Allow __dirname to be used as in Node.js
__filename: true, // Allow __filename to be used as in Node.js
global: true, // Allow global to be used as in Node.js
},
performance: {
hints: false,
},
};
webpackDevServerConfig.js
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const config = require('./webpack.config.dev');
const paths = require('./paths');
const protocol = 'https';
const host = '0.0.0.0';
module.exports = function (proxy, allowedHost) {
return {
port: 3000,
allowedHosts: 'all',
compress: true,
hot: true,
devMiddleware: {
publicPath: config.output.publicPath,
},
static: {
directory: paths.appBuild,
watch: {
ignored: ignoredFiles(paths.appSrc),
},
},
https: protocol === 'https',
host,
historyApiFallback: {
disableDotRule: true,
},
client: {
logging: 'info',
overlay: {
warnings: true,
errors: true,
},
webSocketURL: {
hostname: allowedHost,
},
},
proxy,
setupMiddlewares: (middlewares, devServer) => {
devServer.app.use(errorOverlayMiddleware());
devServer.app.use(noopServiceWorkerMiddleware());
return middlewares;
},
};
};
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href='//fonts.googleapis.com/css?family=Lato:400,300,600' rel='stylesheet' type='text/css'>
<link href="/web-fonts/2.6.0/webfonts-eg.min.css" rel="stylesheet" type="text/css">
<title>app</title>
<base href="/" />
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script>
window.__PRELOADED_STATE__ = {{{ json runtime }}};
</script>
<div id="root" class="root"></div>
</body>
</html>
I could also see that in static/js/bundles.js when viewed from Sources tab, the content should be all the JS from the entry point and beyond but could see the html similar to that of index.html, may be that is what causing the “Unexpected token ‘<‘ (at bundle.js:1:1)” error.
My index.js already has frontend static path set
app.use('/static', express.static(path.join(__dirname, '../build/static'), { maxAge: '30d' }));
Already tried these:
but there seems to be no way I can get this fixed 🙁 Absolutely no idea whats wrong here, any help is appreciated. Thanks in advance!
