CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-dev-server
David Baucum
David Baucum

Reputation: 2250

Dynamically imported modules without relative paths

I have a Symfony application that uses React to build the front-end. As of our last release the build size of the react app has become too large and actually runs out of memory on the server trying to compile. I have been attempting to implement code splitting and have the initial page load to be much more efficient. I am running into a problem with the routes.

My router is defined similar to this.

import React from 'react';
import Loadable from 'react-loadable';
import DelayedLoading from 'components/DelayedLoading';
export default [
  component: Loadable({loader: () => import('containers/Page'), loading: DelayedLoading}),
  routes: [
    {
      path: '/',
      component: Loadable({loader: () => import('containers/MainPage'), loading: DelayedLoading}),
    },
    {
      path: '/foo/bar',
      component: Loadable({loader: () => import('containers/FooBarPage'), loading: DelayedLoading}),
    },
  ]
];

In my webpack config I have defined

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web'),
    filename: 'react/js/[name].js',
  },
}

Any time a path is two or more deep then the chunks try to load from the wrong directory. For example, the foo/bar route above will try to load chunks at foo/react/js/___.js, but chunks loaded from the / route, or any route that is just one deep will correctly load from react/js/___.js.

How can I get all of the chunks to load from react/js?

Upvotes: 3

Views: 3695

Answers (2)

David Baucum
David Baucum

Reputation: 2250

The solution was arrived at in the discussion of the question, but I'm putting the final answer here in case someone comes across this question and is looking for the accepted answer, not reading the comments. Big thanks to @Adam for pushing me in the right direction.

I had to update output configuration as follows:

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web/react/js'),
    publicPath: '/react/js',
    filename: '[name].js',
  }
}

With this configuration compiling the code will output to the web/react/js/ directory, but code from the web will be served from /react/js/. Webpack will not automatically prefix the path to server the JS code from based on the route of the page trying to access it.

Upvotes: 1

Vu Luu
Vu Luu

Reputation: 790

I avoid these issues by using webpack resolve instead

Upvotes: 0

Related Questions