--sourcemap-output + async import() = Multiple assets emit different content to the same filename
hedgepigdaniel opened this issue · 4 comments
Environment
Haul 0.17.0
Description
Conflict: Multiple assets emit different content to the same filename ../../../../sourcemaps/react/OpenLearningClient/release/index.android.bundle.map
In webpack 4, this is a warning, but in webpack 5 it will be an error.
Reproducible Demo
yarn run haul bundle --platform android --sourcemap-output index.android.bundle
// index.android.js
import('./helper.js'); // Creates another chunk!Happens because the import() statement creates another chunk by default, but the chunk has the same name index.android.bundle. So if the sourcemap name contains [file] as it does by default, everything is fine, but if --sourcemap-output is used to set it to something else, this error happens.
Workaround/fix
Using the following webpack plugin prevents multiple chunks from existing in the first place. Perhaps this should be added to the default configuration? Not sure how it interacts with RAM bundles or other code splitting methods for react-native though.
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),With RAM bundles, all async chunks will be concatenated into a single bundle, so I don't think adding LimitChunkCountPlugin will cause any problems.
But doesn't that defeat the purpose of RAM bundles? I thought the idea was to have separate bundles (chunks) that only need to be parsed/executed when a module in them is required?
@hedgepigdaniel No. React Native in it current state doesn't allow to use multiple bundles. We are working on adding support for it here: https://github.com/react-native-community/react-native-multibundle and RFC: react-native-community/discussions-and-proposals#152
RAM bundles keeps all of the modules including modules form async chunks in a single custom format, which has a table of all modules and their offset so React Native can look up code for each module in constant time. This defers the parsing of a code in a module for later, right before being executed. So if a large chunks of your app end up in a async chunk, you will still have benefits in startup time, because the code in that chunks was not parsed yet.
Right, makes sense. I think I was overestimating the abilities of ram bundles. Hope your efforts for multiple bundles work out well 😄
PR open to add LimitChunkCountPlugin