无状态功能组件和`react`导入

Question

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 1

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.

PS 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

Answer 2

You can use Webpack's ProvidePlugin ( https://github.com/webpack/docs/wiki/shimming-modules#plugin-provideplugin ):

new webpack.ProvidePlugin({
    React: "react"
})

Now you'll have React available in every module without having to explicitly write import React from 'react'