react-universal-component: Unable to find x in Webpack chunks. Please check usage of Babel plugin.

in the RUC readme, you can also just turn off the / to - rename

ignoreBabelRename is by default set to false which allows the plugin to attempt and name the dynamically imported chunk (replacing / with -). In more advanced scenarios where more granular control is required over the webpack chunk name, you should set this to true in addition to providing a function to chunkName to control chunk naming.

Fixed it for some guys at Microsoft

ignoreBabelRename solved the issues for me as well. Everything works perfectly as before. Thank you!

@ScriptedAlchemy ignoreBabelRename did the trick, finally! 🎉

I am having exactly the same issue. My CSS are also not correctly loaded initially, they get loaded later by client code.

Ill investigate this further

Hope this is helpful, I’ve been running into the same issue today and have been digging into it the past few hours:

Also, to note, I’m hitting this issue on 2.9.0 and 3.0.0.

Looking at the compiled code, it looks like yields the following transformation:

const Login = universal(import('./Login'));

// into

const Login = (0, _reactUniversalComponent.default)((0, _universalImport2.default)({
  id: "./Login",
  file: "/Users/user/Projects/app/.tmp/ts/app/src/index.js",
  path: () => _path2.default.join(__dirname, './Login'),
  resolve: () => require.resolveWeak('./Login'),
  chunkName: () => "Login"
}));

webpack-flush-chunks throws that error here in flushChunks.js.

  const result = !!(assets[entry] || assets[`${entry}-`])
  if (!result && checkChunkNames) {
    console.warn(
      `[FLUSH CHUNKS]: Unable to find ${entry} in Webpack chunks. Please check usage of Babel plugin.`
    )
  }

This method is invoked shortly after here.

  chunkNames
    .reduce((names, name) => {
      if (!hasChunk(name, stats.assetsByChunkName, checkChunkNames)) {
        return names
      }

However, looking at the output of my stats.json, assetsByChunkName only contains the entry bundle.

  "assetsByChunkName": {
    "main": "bundle.js"
  },

And then other chunks are listed under assets:

 "assets": [
    {
      "name": "bundle.js",
      "size": 2309495,
      "chunks": [
        "main"
      ],
      "chunkNames": [
        "main"
      ],
      "emitted": true
    },
    {
      "name": "0.bundle.js",
      "size": 861184,
      "chunks": [
        0
      ],
      "chunkNames": [],
      "emitted": true
    },
    {
      "name": "1.bundle.js",
      "size": 8086,
      "chunks": [
        1
      ],
      "chunkNames": [],
      "emitted": true
    }
  ],

Interestingly, the chunk name that is being looked up doesn’t even match the listed names in my assets object. Maybe something changed in how webpack outputs stats.toJson()? (I’m on 4.16.0).