Uncaught Syntaxerror: unerwartete Token <in React JS

Question

Ich habe eine .htaccess in http://example.com/testsite/ mit den folgenden Befehlen ein:

RewriteEngine On 

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 

RewriteRule^index.html [L] 

ich dann in meiner index.js Datei Routing einzurichten versuchen. Es funktioniert gut, wenn meine Route wie http://example.com/testsite/page1

ist

nur eine einzige Ebene Aber wenn ich versuche, einen Weg zu verbinden, wie http://example.com/testsite/category/page1 dann ich die folgende Fehlermeldung erhalten:

Uncaught SyntaxError: Unexpected token <   bundle.js:1 

Meine Route Befehle wie folgt aussehen ich bekomme es zu bekommen die Fehlerseite angezeigt werden nach wie vor die gleichen Fehler

<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> 

Selbst wenn ich den dritten Router Pfad entfernen und nur versuchen. Wenn ich den Routercode vollständig entferne, erhalte ich immer noch den Fehler. Das lässt mich glauben, dass es nichts mit dem Router-Code selbst zu tun hat. Was könnte sonst noch das Problem sein?

UPDATE:

Wie gewünscht, hier ist meine webpack.config.js Datei:

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; 

Mein .babelrc

{ 
    "presets" : ["es2015", "react"] 
} 

Answer 1

ich verfolgt haben das Problem und fand aus, dass ich die Skriptzeile in meiner index.html-Datei ändern musste:

<script src="js/bundle.js" type="text/javascript"></script> 

dazu:

<script src="/testsite/js/bundle.js" type="text/javascript"></script> 

Der Grund dafür ist, dass, während auf dem Back-End der .htaccess den gesamten Datenverkehr umleiten tut der Pfad im Browser index.html hat unverändert. Wenn der Browser versucht, die JavaScript-Datei zu laden, sucht er im Verzeichnis/testsite/category/(das technisch nicht existiert) nach der Datei im Verzeichnis/testsite /.