Create-react-app: How to use Modernizr with CRA?

[sonarforte]

I've seen in many threads, when people ask to extend the webpack config, they are told to request the specific extension they need.

I'm looking to use Modernizr (as I'm willing to be other's are as well).

This package will bundle modernizr for use with webpack, but since I can't modify the webpack config in CRA, I have no idea how to include it.

Is there a way to do this?

[Timer]

Does this comment and following comments help you?

[klequis]

I came across the same problem today. I'm trying to figure out how to use Modernizr with CRA. As far as I can see the way to do it is to use modernizr-webpack-plugin. All the instructions on that page require modifying webpack.config.js and I believe the only way to do that is to eject CRA. I have been using CRA for about 4 months now (very satisfied) without ejecting and would hope to continue that way.

@Timer the issue you references did not seem to address that.

[Timer]

I'd like to understand this more, @klequis.

Modernizr aside, what exactly are you trying to accomplish?
Could you please shed some light on that?

We're very against allowing webpack configuration modifications; so if someone needs to make a new package or we can provide an alternative solution, I'd like to figure that out.

[Timer]

Looking at these Modernizr webpack plugins, they seem completely redundant.
It looks like you just need to pre-build the file in a separate step and require that instead.

[klequis]

@Timer I'm using Flexbox. It is working well in Firefox and Chrome but not in Safari. I can change the css from 'display: flex' to 'display: -webkit-box' and that fixes Safari well enough but makes a mess out of Firefox and Chrome. I want to use Modernizr to code in some conditional logic for the css.

[Timer]

Thank you for the explanation!

---

It looks like you just need to pre-build the file in a separate step and require that instead.

Can you do this instead?

[klequis]

Thank you for pointing that out. I imported it and now see changes the the html element caused by Modernizer so initially looks good. I didn't do any more than import and load the page. I'll try actually using Modernizer tomorrow and let you know if it works - Thank you!

[sonarforte]

@klequis how did you import it? Can you post some code example of using it inside a js file?

[klequis]

@sonarforte , the import seems to have worked but my feature checks are not working out. I posted a question on it Modernizr.flexbox in React app returns 'undefined'

My sample project is here: https://github.com/klequis/modernizr-try

The import is in src/App.js
Modernizr dependencies are modernizr-config.js and modernizr.js
If you have a tip for getting the feature checks working please let me know.

[fcaldera]

@klequis you shouldn't import the modernizr build like that since it is an IIFE. It means everytime you import the file it will excuse all the tests. In a context of a SPA you can end-up with lot of classes in the HTML tag as a result of multiple tests execution. In addition to that, the function doesn't return any value but attaches the result to the window object. That why you got nothing when accessing the props.

I've created a fork of your repository and transformed the modernizr build into a module so you can import it into your app. Although this works, it is not ideal since you would have to do the same in case you recreate the build to add more tests for example, but it is a start. A better approach could be writing a client that modify the default modernizr build a generate a module as output.

Hope this help!

[klequis]

@fcaldera - More help than I expected - thank you!
I see that is working. It would have taken me a long time to figure that out.
If you want the points on stack overflow for having the answer please post there and I'll mark it. If not I'll self-answer and reference this issue.
Cheers

[nahody]

Isn't it a bit complicated to use modernizr to handle just css prefixing? Isn't this a task for Autoprefixer?
So if you just go to the autoprefixing, this should be the better solution.

[Timer]

I believe we got this resolved (in above comments). 😄