Chrome tools in production throw Uncaught SyntaxError: Unexpected token '<' when I load my React App hosted on Github pages. I just about lost count with how many posts and pages of documentation I read through the past 5 days trying to debug this. I think this can possibly be a lazy loading issue for all I know despite the vague error. I included snippets of relevant code below. Please help.
Error Message
Uncaught SyntaxError: Unexpected token '<'
Screenshot of console
What Error points to in source tab of chrome tools
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://apis.google.com/js/api.js"></script>
<title>App Name</title>
<link rel="icon" href="/app-name/#/dist/favicon.png">
<link href="/app-name/#/dist/main.css" rel="stylesheet">
<script src="/app-name/#/dist/bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Webpack.common.js
const path = require('path')
// const modeBool = process.env.NODE_ENV === 'production'
const tempDir = __dirname + '/index.html'
const tempFileName = 'index.html'
const outputPath = path.join(__dirname, './dist')
// const outputPublicPath = modeBool ? '/app-name/dist' : '/'
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: tempDir,
filename: tempFileName,
inject: 'head',
favicon: "favicon.png"
})
module.exports = {
entry: path.resolve( __dirname, 'src', 'index.jsx' ),
output: {
path: outputPath,
filename: 'bundle.js',
publicPath: '/app-name/#/dist/'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/react'] }
},
},
{ test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
},
'css-loader'
],
}
]
},
// optimization: {
// splitChunks: { chunks: "all" }
// },
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
HTMLWebpackPluginConfig,
],
resolve: {
extensions: [".js", ".jsx", ".css", "*"]
},
performance: {
hints: false
},
stats: {
errorDetails: true,
warnings: true,
colors: true,
},
};Webpack.prod.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge( common, {
mode: "production",
devtool: "source-map",
} )Package.json
{
"name": "app-name",
"version": "1.2.2",
"description": "XXXXXXX",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"build": "webpack --config webpack.prod.js",
"start": "webpack serve --config webpack.dev.js"
},
"repository": {
"type": "git",
"url": "XXXXXXXXX"
},
"author": "Dan XXXXX",
"license": "ISC",
"bugs": {
"url": "XXXXXXXX"
},
"homepage": ".",
"dependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"gh-pages": "^3.1.0",
"googleapis": "^64.0.0",
"inline-source-map": "^0.6.2",
"mini-css-extract-plugin": "^1.3.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"webpack-cli": "^4.1.0",
"webpack-merge": "^5.4.1"
},
"devDependencies": {
"css-loader": "^5.0.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-dev-server": "^3.11.0"
}
}Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<!-- youtube video API -->
<script src="https://www.youtube.com/iframe_api"></script>
<!-- youtube data API -->
<script src="https://apis.google.com/js/api.js"></script>
<!-- SO post rec 3 -->
<!-- <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> -->
<!-- SO post rec 4 -->
<!-- <base href="/" /> -->
<title>App Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>Component with lazy loaded import
import React, { useEffect, useState } from 'react'
import LocationControls from '../controls/LocationControls'
import MusicControls from '../controls/MusicControls'
import { tracks, locations } from '../misc/data.js'
const importDataAPI = () => import('../../utils/YTDataAPI.js')
const importMediaAPI = () => import('../../utils/YTVideoAPI.js')
export const locationURL = React.createContext(null)
export const musicURL = React.createContext(null)
const Player = () => {
const [ currentCountry, setCountry ] = useState('France')
useEffect( () => {
importDataAPI()
importMediaAPI()
}, [])
// This method calls our API to load a new video
const mediaAPILoader = ( vidId, player ) => {
try {
window[ player ]?.loadVideoById({ videoId: vidId })
} catch( error ) {
console.log( `The following error has occured ${ error }. Restarting application. ` )
window.history.go()
}
}
return (
<div className="player-component-container">
<musicURL.Provider value={ currentCountry }>
<MusicControls trackLists={ tracks } loadFunc={ mediaAPILoader } />
</musicURL.Provider>
<div id="unclickable-overlay"></div>
<div id="musicPlayer"></div> {/* our music embedded player */}
<div id="locationPlayer"></div> {/* our location embedded player */}
<LocationControls locationURLs={ locations } updateCurr={ setCountry } loadFunc={ mediaAPILoader } />
</div>
)
}
export default PlayerALL help is appreciated.
