Uncaught SyntaxError: Unexpected token < in React JS - .htaccess

Question

I have an .htaccess set up in http://example.com/testsite/ with the following commands:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
I am then trying to set up routing in my index.js file. It works fine if my route is just a single level such as http://example.com/testsite/page1
But if I try to connect to a route such as http://example.com/testsite/category/page1 then I get the following error:
Uncaught SyntaxError: Unexpected token < bundle.js:1
My route commands look like this:
<BrowserRouter>
<div>
<Switch>
<Route exact path={"/testsite"} component={Front} />
<Route path={"/testsite/page1"} component={Works} />
<Route path={"/testsite/category/page1"} component={NotWorks} />
<Route component={ErrorPage404} />
</Switch>
</div>
</BrowserRouter>
Even if I remove the third router path and just try to get it to display the error page I still get the same error. If I completely remove the Router code I still get the error. This leads me to believe that it is nothing to do with the router code itself. What else could be the problem?
UPDATE:
As requested, here is my webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/public/js',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
},
};
module.exports = config;
My .babelrc
{
"presets" : ["es2015", "react"]
}

Answer 1

I have tracked down the issue and found out that I needed to change the script line in my index.html file from this:
<script src="js/bundle.js" type="text/javascript"></script>
to this:
<script src="/testsite/js/bundle.js" type="text/javascript"></script>
The reason for this is that while on the backend the .htaccess does redirect all traffic to index.html, the path in the browser has been unchanged. Therefore when the browser tries to load the javascript file it is looking for it in the /testsite/category/ directory (which doesn't technically exist) instead of looking for it in the /testsite/ directory.

Answer 2

I've met the same problem.
In my case it is ok with next .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
And changed publicPath for prod from "" to "/" in webpack.config.js like:
output: {
path: argv.mode === "production" ? __dirname + '/prod' : __dirname + '/dist',
publicPath: '/',
filename: '[hash].bundle.min.js'
},