[Answered ]-Webpack 2 react code splitting

2đź‘Ť

âś…

This may be a side-effect of not having absolute paths in the auto-inserted script references in the generated index.html. E.g. if the generated script statement is <script src="./index.js"></script>, then when you are on a subroute say /contacts and there’s a refresh, the browser will ask for /contacts/index.js. If your server instead sends back index.html, then the browser will fail trying to parse html as JS and will complain about the invalid < character.

To verify this, hard-code the absolute references in the index.html file, like so – <script src="/index.js"></script>, then refresh to check if the issues still exist.

If this indeed turns out to be the case, please read up on how to modify the index.html template to insert absolute paths, as I am afraid I am not familiar with the template syntax you are using.

One fix which should work is to have output.publicPath = "/" configuration in your webpack.config.js file. This should make the script path absolute.

A similar issue is Issue using nested routes in React-Router with webpack.

👤hazardous

0đź‘Ť

Typically the error on “<” is an indicator that it’s not able to parse. Which would mean babel + react config probably isn’t running on the file. When you look at your webpack config babel is only run on jsx. Since you aren’t adding that extension when you lazily old it isn’t run through that loader. You can either change your regular expression to run all js files through babel, excluding node or you can explicitly add the .jsx extension when you import files.

Leave a comment