2

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:

Console error

Another console error

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

Liightninggod
  • 65
  • 2
  • 7

1 Answers1

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.

Liightninggod
  • 65
  • 2
  • 7