bsr bsr - 25 days ago 10
React JSX Question

stateless functional components and `react` import

I face the same issue as described here
https://github.com/babel/babel/issues/2504

So, any file which has only stateless components needs to have

react
imported like
import React from 'react';
, which is bit annoying (eslint gives error as unused variable; which I understand can be suppressed, still..). Is there a way to avoid having this import in a
webpack
based setup.

thanks.

Answer Source

I had the same issue. Then, I found this:

babel-plugin-react-require

This will automatically add the required require or import calls to get 'react' imported to your stateless component modules.

P.S. If you use webpack and babel6, ensure that you are not using the jsx-loader for your JSX files. I was getting errors with this and then I realized the jsx-loader is not required anymore. Just use:

babel-preset-react