How Critical Css with exact path="/" of the Reactjs

[crazychicken]

I have a case use two component with

import Navbar from './shares/Navbar'
<NavBar /> // It is work

// It is not work

import Home from './views/HomeView'
<Route exact path="/" component={HomeView} />

Default config:

new HtmlCriticalWebpackPlugin({
  base: path.resolve(__dirname, 'dist'),
  src: 'index.html',
  dest: 'index.html',
  inline: true,
  minify: true,

  extract: true,
  width: 1330,
  height: 680,
  include: ['.class_home'], // it is work
  penthouse: {
    blockJSRequests: false,
  }
})

i tried use include:['.class_name', 'some_class'] of critical. But, i have many class and id. You can tell me edit that.

[thescientist13]

This might just be an issue with critical itself. This plugin just makes critical callable as part of a webpack build process, and not much to do with critical itself.

That said, I'm not familiar with include API, so maybe if you could explain a little more about what the expected outcome is that you're looking for, there might be something we could help with.

[crazychicken]

This is my issue: i have two component use critical-css, <Navbar />, <Slider />,

It is work with (.slider, .slider-item) 💯 👍

But, when i want use component only the home-page, I use: <Route exact path="/" component={Slider} />

it is not work. :(

Can you suggest to me, how to fix it. Thank you.

[thescientist13]

Hmm, I see.

This could be an issue with how critical process code specific to Single Page Applications, where chunks are generated async? I think it's something I've run into I think, and haven't had time to look into it further on the critical side. (maybe related to an other open issue #30 )

Maybe there are some issues in the critical issue tracker about how to best use critical with async / SPA frameworks like React?

[thescientist13]

Just to follow up, a user with a similar report found that running critical manually also produced the same results, so maybe critical itself isn't well suited to SPAs?

Can you please confirm as well? Might not be a plugin issue. https://github.com/anthonygore/html-critical-webpack-plugin/issues/39#issuecomment-499293813