Unable to find x in Webpack chunks. Please check usage of Babel plugin.

[luangjokaj]

After upgrading from 2.9.0 to 3.0.0 I get this error:

[FLUSH CHUNKS]: Unable to find Views-Home in Webpack chunks. Please check usage of Babel plugin.

Everything works correctly on the 2.9.0. You can check the code here: https://github.com/luangjokaj/react-ssr-boilerplate

All the dependencies are up to date except react-universal-component.

[cdebotton]

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).

[GuillaumeCisco]

I experiment the same issue. I'm using webpack 4.16.1 but tested with webpack 4.15.1 and the same behavior happens.

[ScriptedAlchemy]

Ill investigate this further

[luangjokaj]

@ScriptedAlchemy any solution?

[giankotarola]

I have the same error but with dynamic imports 😞

[ScriptedAlchemy]

Usually related to a Babel mismatch.

Make sure you are on the latest of all faceyspacey dependencies.

Make sure you are including RUC in the webpack build if using externals.

Check the RUC and Babel plugin readme as new options to help people stuck with this issue are there

[ScriptedAlchemy]

Going from 2 to 3, this issue is very old. Best I can suggest is double check our readmes, the universal demo.

If ur really stuck, I’ll send you one of my own systems - it’s not completed but it’ll run and you can either do it like that, or use it and clean it up a little

[ScriptedAlchemy]

Make sure you are providing enough stats to flush chunks. If you are only outputting some, it’ll not resolve anything.

Make ur stats as verbose as possible

[giankotarola]

@ScriptedAlchemy Thanks! It fixed using https://github.com/faceyspacey/babel-plugin-universal-import

[luangjokaj]

@ScriptedAlchemy I have all these checked and still getting the same thing 😞 If I downgrade to v.2.9.0 it works!

[luangjokaj]

Im using Babel 7

[ScriptedAlchemy]

Can you matey wiping out any lock files and node modules. Sometimes it gets stuck. Try manually running yarn add on the dependencies to ensure they are up to date. If you send me a repo, I’ll look at the issue personally

[luangjokaj]

@ScriptedAlchemy I tried to delete the lock files and the node modules but no luck. This is the repository: https://github.com/luangjokaj/react-ssr-boilerplate

I appreciate it 🙌

[MartinCerny-awin]

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

[ScriptedAlchemy]

Are you on Babel 7?

[ScriptedAlchemy]

I’ll try and look at this today. I know this issue is because slashs are coming out in the output, well usually anyways. It might be Babel 7

[MartinCerny-awin]

Yes, I have all Babel up to date.

[luangjokaj]

@ScriptedAlchemy I found out today that: even in the version 2.0.9 - If I try to do an import from a sub-directory it will return the same error message.

[FLUSH CHUNKS]: Unable to find XXX in Webpack chunks. Please check usage of Babel plugin.

<UniversalComponent page="Sentinel"> ✅ <UniversalComponent page="Products/Virgo"> ❌

[ScriptedAlchemy]

Don’t use strings. Use an import function there. I’ll send the code later. Or.... look at my demo and see how I use RUC. You can’t resolve slash names. So if you use a slash. I designed it to fail

[GuillaumeCisco]

I get the error when I build my application in production mode. Curiously, it works well in development mode.

I will try to provide an example project, I'm waiting for others to have the same issue. Otherwise, though there is a warning, the application works very well :)

[ScriptedAlchemy]

make your own universal component

import PropTypes from 'prop-types'
import universal from 'react-universal-component'
import Loading from './components/Loading'
import Err from './components/Error'

// needs error handling
const determineHowToLoad = props => typeof props.component !== 'string'
  ? props.component()
  : import(`./${props.component}`)

/**
 *
 * @type {universal.UniversalComponent<any>}
 * @param props - the props from the JSX component, these will be passed into the component as well
 * props on the JSX component can include any of the universal components props as well, like onLoad, onError, error, timeout...
 */
const UniversalComponent = universal(determineHowToLoad, {
  minDelay: 500,
  loading: Loading,
  error: Err,
})

// PropTypes so people know what they can use & so nobody passes shit that will break universal
// Ive already forked the open source project so create something that i can extend / PR new features back to the community. Depending on the requirements. I might maintain both a repo at fiverr and on my personal repo where i can make more drastic changes which might not be beneficial to fiverr
UniversalComponent.propTypes = {
  loading: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.element,
    PropTypes.bool,
  ]),
  error: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.element,
    PropTypes.bool,
  ]),
  key: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  timeout: PropTypes.number,
  onError: PropTypes.func,
  onLoad: PropTypes.func,
  minDelay: PropTypes.number,
  alwaysDelay: PropTypes.bool,
  loadingTransition: PropTypes.bool,
}

const loadComponent = file => universal(determineHowToLoad({ component: file }), {
  // eslint-disable-line no-unused-vars
  minDelay: 500,
  loading: Loading,
  error: Err,
})
export default UniversalComponent
export { loadComponent, universal }

[luangjokaj]

Any work around for the issue I'm having on the latest version 3.0.3 (with Babel 7)? Im still on 2.9.0 😞

[ScriptedAlchemy]

Check the demo. Makes sure the configuration match. Worst case. Paste your project in.

Sent from my iPhone

On Oct 21, 2018, at 2:03 AM, Luan Gjokaj notifications@github.com wrote:

Any work around for the issue I'm having on the latest version 3.0.3 (with Babel 7)? Im still on 2.9.0 😞

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[luangjokaj]

@ScriptedAlchemy I'm using Babel 7, the rest of the configuration is same as in the demo.

Code: https://github.com/luangjokaj/react-ssr-boilerplate

[MartinCerny-awin]

I am using imports with slash and it fails.

Is this not supposed to work? page prop is always string without slashes.

const UniversalComponent = universal(props => import(`async/${props.page}`), {
  onError,
});

I think that my setup is really similar to react-ssr-boilerplate as that boilerplate and my code is mostly based on the demo.

I do not really remember the purpose why I had to create async folder as it is more than one year ago. I think that it was probably for webpack to generate these chunks.

[ScriptedAlchemy]

I would suggest uninstalling all faceyspacey products. Then reinstalling them.

Re-read documentation around the Babel plugin and flush chunks and RUC.

There’s ways to enable it disable things regarding the chunks naming. I’d also suggest yarn linking the code, especially the flush chunks problem and see if your webpack output is providing enough data for the resolution to take place

Worst case you can manually use the universal HOC and create your own chunk names. I am working on a new demo, built on Babel 7 with all dependencies up to date.

Sent from my iPhone

On Oct 21, 2018, at 10:04 AM, Martin Cerny notifications@github.com wrote:

I am using imports with slash and it fails.

Is this not supposed to work? page prop is always string without slashes.

const UniversalComponent = universal(props => import(async/${props.page}), { onError, }); I think that my setup is really similar to react-ssr-boilerplate as that boilerplate and my code is mostly based on the demo.

I do not really remember the purpose why I had to create async folder as it is more than one year ago. I think that it was probably for webpack to generate these chunks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ScriptedAlchemy]

Okay, so i see that you are running the server directly, @luangjokaj

most likely, thats the problem.

The root cause is the chunknames conversion. If anyone wants to PR a better way to resolve chunks with slashes in it, be my guest - I tried and it was a mess.

you can try another babel plugin, https://www.npmjs.com/package/babel-plugin-smart-webpack-import

or honestly, just dont use the babel plugins at all

Otherwise, React 17 is out this month :)

[ScriptedAlchemy]

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

[luangjokaj]

@ScriptedAlchemy ignoreBabelRename did the trick, finally! 🎉

[ScriptedAlchemy]

:) make sure all the chunks are there, usually those stupid some~chunk~name.js that webpack makes wont work because it cant be resolved.

Flush chunks needs a little fine tuning, so if its giving you issues, ill prioritize your PRs.

[GuillaumeCisco]

Exact issue as https://github.com/faceyspacey/react-universal-component/issues/148 By the way the issue still exists for me in production, the chunks are not generated but are listed by flush chunks. I will open a new issue with detailed information.

[ScriptedAlchemy]

It might be best to just open up flush chunks and create a PR that solves your problem :P open an issue with a repo and I can try to look

[MartinCerny-awin]

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