React + webpack protip #4827

If you’re using react, chances are that you are using the whole babel + jsx + webpack stack (and you’re goddamn’ right).

Your components files, the 1627219 of them, look like:

import React from 'react'

export function YourComponent() {
 return <span>Hello, I do nothing</span>
}

Now here is the protip that will save a lot of time, in your webpack.config.js:

plugins: [
  new webpack.ProvidePlugin({
    React: 'react',
  }),
],

This lets you omit the import React from ‘react’ line in all of your component files and this will work just as well:

export function YourComponent() {
 return <span>Hello, I do nothing</span>
}

Bonus: As you don’t import React directly anymore, this prevents eslint from bugging you with `’React’ is defined but never used no-unused-vars`.