CODEWITHSUNDEEP
reactjswebpack
bsr
bsr

Reputation: 58732

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.

Upvotes: 5

Views: 1656

Answers (2)

codematix
codematix

Reputation: 1337

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

Upvotes: 4

user1341217
user1341217

Reputation:

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'

Upvotes: 0

Related Questions