Better dynamic pathing

We have a large app with many components, and would like to create a directory for each one.

Something like /components/hero/index.js or /components/hero/hero.js (preferred)

Unfortunately when we run something like the following:

const UniversalComponent = universal((props) => {
  return import(`src/components/${props.type}/${props.type}`)
});

webpack names the chunk src/components/hero-hero, so ssr breaks. I saw a related issue about this, and it seems to be an issue on webpack’s side - (https://github.com/webpack/webpack/issues/5575)

Currently, because our folder structure will be consistent, we are thinking of changing the line you referenced in the webpack issue (https://github.com/faceyspacey/webpack-flush-chunks/blob/master/src/flushChunks.js#L206):

const chunk = assets[chunkName] || assets[chunkName + '-']

to something like:

// replace last instance of `/` with a `-`
// (not actual implementation. just base example)
chunkName = chunkName.replace(/\/([^/]*)$/,'-'+'$1');
const chunk = assets[chunkName] || assets[chunkName + '-']

while this works, we realize how janky it is and don’t want to rely on it.

Is there any way we can accomplish a more organized app architecture with each dynamic component being housed in its own directory?

[faceyspacey]

bingo. i know, i hate those extra files too, but it’s basically the only way to avoid creating unnecessary chunks.

now that said, i havent done it, but u may be able to use the context-replacement plugin to tell webpack to skip some files:

https://webpack.js.org/plugins/context-replacement-plugin/

just a thought if u too are annoyed by the extra files.

[shomanishikawa]

Thanks so much for the response!

I’ve tried to follow your advice - I’ve kept my folder structure the same, so I have src/components/hero/hero.js, src/components/threeup/threeup.js, etc.

From there, i’ve created an src/components/async/ directory with files like src/components/async/hero.js, etc.

My async/hero.js file simply imports the actual component files, and exports it like so:

// this is the entire file
export {default} from 'src/components/hero/hero';

That way, my universal import will be something like the following:

const UniversalComponent = universal((props) => {
  return import(`src/components/async/${props.type}`)
});

This is working functionally, and just want to make sure it is in line with what you were suggesting.