set chunk path a with webpack and react lazy code splitting

Question

I'm using react lazy for route based code splitting as described here: https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

My routes file looks like this:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const APage = lazy(() => import(/* webpackChunkName: "APage" */ '../pages/APage'));
const BPage = lazy(() => import(/* webpackChunkName: "BPage" */ '../pages/BPage'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/products/a" component={APage}/>
        <Route exact path="/products/b" component={BPage}/>
      </Switch>
    </Suspense>
  </Router>
);

When I compile the app it correctly generates 4 JS chunks:

app.js
APage.js
BPage.js
APage~BPage.js

however when I navigate to this path: /products/a, I get these load errors because my component files are located in the root, not in a 'products' folder:

http://localhost.com:3000/products/APage~BPage.js net::ERR_ABORTED 404 (Not Found)
http://localhost.com:3000/products/APage.js net::ERR_ABORTED 404 (Not Found)

How can I configure webpack/react to load components from the root of my site and/or from an external CDN?

Gaurav Singh · Accepted Answer · 2019-04-03 22:01:46Z

6

in webpack 's module add output values like this :

    output: {
      publicPath: '/',
      path: path.join(__dirname, 'root'),
    }

answered Apr 3, 2019 at 22:01

Gaurav Singh

1761 silver badge4 bronze badges

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

2 Comments

Cbas Over a year ago

cool looks like it works for local paths and to change the domain for a CDN

Gaurav Singh Over a year ago

I too had got stuck at this issue. Glad it was of help. 👍

Collectives™ on Stack Overflow

set chunk path a with webpack and react lazy code splitting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related