ScriptedAlchemy / webpack-external-import

Dynamically import modules from other webpack bundles. Painless code sharing between separate apps
BSD 3-Clause "New" or "Revised" License
415 stars 42 forks source link

Unhandled Rejection (ChunkLoadError): #176

Open ghost opened 4 years ago

ghost commented 4 years ago

I'm getting this error when I try to use it with CRA

Unhandled Rejection (ChunkLoadError): Loading chunk mod failed. (missing: http://localhost:3000/static/js/mod.chunk.js)

rickihastings commented 4 years ago

I get this error too. Has anyone managed to resolve it?

rickihastings commented 4 years ago

After much digging, if anyone else encounters this issue, the fix is very easy, and is down to this line here: https://github.com/facebook/create-react-app/blob/fa648daca1dedd97aec4fa3bae8752c4dcf37e6f/packages/react-scripts/config/webpack.config.js#L216

config.output.jsonpFunction = 'webpackJsonp';
mihaisavezi commented 4 years ago

I'm not using CRA, and still have OP's error, changing it to the default config.output.jsonpFunction = 'webpackJsonp'; does not solve it

mihaisavezi commented 4 years ago

My situation is as follows. 2 apps, one provider, one consumer. I am exposing 'xxx-web-v2' from provider to consumer.


// consumer/webpack.config.js
 runtimeChunk: 'single',
 ... 
 new URLImportPlugin({
      manifestName: "xxx-app-child",
      fileName: "importManifest.js",
      publicPath: `http://localhost:8000/`,
      useExternals: {
        'xxx-web-v2': '"xxx-web-v2"',
 },

// provider/webpack.config.js

 new URLImportPlugin({
          manifestName: "xxx-app-parent",
          fileName: "importManifest.js",
          provideExternals: {
            appConfig: '__APP_ENVIRONMENT',
            "xxx-web-v2": 'umd xxx-web-v2', // YES
          },
          // otherwise ended up in infinite loop
          hashDigest: 'hex',
          hashDigestLength: 5,
          hashFunction: 'sha512'
        })
rickihastings commented 4 years ago

I struggled to properly get this working in the end. There seemed to be constant problems and the whole solution didn't feel very nice.

I went with ModuleFederation in webpack 5, but I believe that's still in beta right now.

mihaisavezi commented 4 years ago

Yeah, made it work, but I need a lot of external dependencies, and provideExternals/UseExternals doesn't support the array format. externals = [{...}, () => {...},'string']