ReactJS Code Splitting causes an error when loading Bootstrap through WebPack into Wordpress

Question

I am currently using a WebPack configuration that allows for the direct injection of ReactJS into a site. This compiles all of the React code into a single index.js, and I am trying to code split it because the file is getting very large. Without the code split, bootstrap is not loaded, because I have it as part of my WordPress theme. When I use React.lazy() though, I get 404 errors for 0.js which my developer tools say is caused by bootstrap. Here is my index.js:

const Register = lazy(() => import('./components/register/register')); // Import function

and for the rendering:

<Suspense fallback={<div><Loader/></div>}><div id="container"><Register /></div></Suspense>

With the module imported normally like import Register from './components/register/register'; it works perfectly fine, but as soon as I use lazy, the console begins throwing errors. WebPack compiles correctly either way. Here is a screenshot of the console error:

Any help would be appreciated because I usually use Create-React-App and don't know much about customizing WebPack. Thanks!

Liightninggod · Accepted Answer · 2020-09-11 19:24:51Z

2

I worked very hard to figure out what the root of the issue was, and it turned out that the browser was looking for the 0.js chunk on the https://example.com/register/0.js when the file was in fact sitting at https://example.com/wp-content/themes/theme/build/0.js. A few google searches and some trial and error later I figured out a WebPack config that would allow for this to compile correctly. It is as follows:

output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/wp-content/themes/theme/build/'
    },

Just documenting this in case someone else has the same issue.

answered Sep 11, 2020 at 19:24

Liightninggod

654 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS Code Splitting causes an error when loading Bootstrap through WebPack into Wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related