Dynamically imported modules without relative paths

Question

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?

Try changing the path property to path.resolve(__dirname, 'web/react/js') and the filename property to [name].js. You shouldn't be including a path in the filename property. — Adam
– Adam, Commented Feb 13, 2019 at 17:45
When the assets are built for production they are placed in ${output.path}/${output.filename}. In my case web/react/js/ is the directory that these assets need to be placed on the filesystem so they can be served. What this led me to was webpack always trying to load the resources directly from /{resource}.js. By add an additional property publicPath: '/react/js' I was able to get webpack to spit out the files to the web/react/js/ directory and serve them from /react/js/ without prefixing directory paths. — David Baucum
– David Baucum, Commented May 8, 2019 at 22:48

David Baucum · Accepted Answer · 2019-05-08 22:53:28Z

1

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.

answered May 8, 2019 at 22:53

David Baucum

2,2801 gold badge25 silver badges25 bronze badges

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

Comments

Vu Luu · Accepted Answer · 2019-02-13 07:39:36Z

0

I avoid these issues by using webpack resolve instead

answered Feb 13, 2019 at 7:39

Vu Luu

8005 silver badges16 bronze badges

1 Comment

David Baucum Over a year ago

I don't think there are options in webpack.resolve to address where the assets are compiled.

Collectives™ on Stack Overflow

Dynamically imported modules without relative paths

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related