vslinko / babel-plugin-react-require Goto Github PK

If your only use of JSX is fragments it won't add the react import.

Example:

function Thing() {
  return <>Hi</>;
}

Won't have react import

so that this plugin can show up here: https://www.npmjs.com/browse/keyword/babel-plugin

hi this plugin is very handy! Would you be interested in adding automatic requires for Component, PureComponent and PropTypes?

Detection is very trivial, I can put a PR together if you want.

Is there one? :)

It would be nice for this plugin to allow setting the pragma option like in the transform-react-jsx plugin to allow for React alternatives.

Hi,
I was wondering if I need any special configuration to get this package working together with babel-jest.

This is my .babelrc with the test env presets set up:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true,
        "ie": "11"
      },
      "useBuiltIns": true
    }],
    "react"
  ],

  "plugins": [
    "react-require",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ],

  "env": {
    "test": {
      "presets": [
        ["env", "react"]
      ],
      "plugins": [
        "react-require",
        ["transform-class-properties", { "spec": true }]
      ]
    }
  }
}

And when running a component test like this:

groups.test.js

import Groups from '../../components/groups'
import { shallow } from 'enzyme'

describe('Groups component', () => {

  it('should render one groups', () => {
    const mockGroups = [{id: "9d4cd354b558aa59a842bc2e74cfd18a0f0ade1ba5277bfdfcacaa50916a8072", name: "CCADMIN_CLOUD_ADMINS"}]
    const mockGroupMembers = {"9d4cd354b558aa59a842bc2e74cfd18a0f0ade1ba5277bfdfcacaa50916a8072": {data: {name: "C5275535", id: "518a33a81eb191d7935065337e22e72ec69d0ed61c55753a08a5264f0ea91303", fullname: "Fabian Peter"}}}
    const wrapper = shallow(<Groups groups={mockGroups} groupMembers={mockGroupMembers}/>)
    // console.log(wrapper.debug())
    expect(wrapper.find("ul.tree").exists()).toBe(true)
    expect(wrapper.find('li').length).toBe(1)
    expect(wrapper.find('li').text().includes("CCADMIN_CLOUD_ADMINS")).toBe(true)
  })

})

for the the component groups.js (simplified version)

class Groups extends React.Component {

  render() {
    const {groups,groupMembers} = this.props
    return(
      <ul className="tree tree-expandable">
        {Object.keys(groups).map(key =>
          <li key={key} className='has-children'>
            <i className='node-icon'></i>
            <span>
              {groups[key]['name']}
              <small className="text-muted"> ( {groups[key]['id']} )</small>
            </span>
          </li>
        )}
      </ul>
    )
  }
}

export default Groups;

I'm getting 'SyntaxError: Unexpected token import':

    /.../app/javascript/reverse_app/test/components/groups.test.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

The only way to get rid of this error is explicitly to import React on each Component.

If plugin is added last to the list of plugins, then babel doesn't transform it and leaves import React from 'react'; code in there which than fails. Might be worth mentioning in docs that this plugin should be among the first ones or even before es2015 preset if used.

This will allow people to use:

.babelrc

{
  "plugins": ["react-require"]
}

Instead of the verbose babel-react-require.

The description is [TODO] Babel plugin that adds React import declaration if file contains JSX tags and I'm confused about why it starts with [TODO]. Should that be removed?

The output generated by Babel in the lib directory contains ES2015 syntax like let, const and shorthand properties, which Node v0.12 doesn't understand.

Please consider adding transform-es2015-shorthand-properties and transform-es2015-block-scoping to .babelrc.

I looked at your example and saw 1 strange thing: where is Component import? Extending React.Component is pretty common case, no?

import React from 'react'

export default class Component {
  render() {
    /* this part will be transpiled by babel itself as usual */
    return React.createElement('div')
  }
}

TLDR;
If we output var React = require('React') instead of import React from 'react' we don't have to worry about plugin order. Happy to make a PR if you think its a good idea.

I recently ran into an issue with react-require being applied after transform-es2015-modules-commonjs. The following babelrc runs fine when there is no matching env. However when I'm running with NODE_ENV=test react-require seems to be applied last by babel

my babelrc

{
  "presets": [
    ["es2015", { "loose": true, "modules": false }],
    "stage-2",
    "react"
  ],
  "plugins": [
    "transform-runtime",
    "react-require"
  ],
  "env": {
    "test": {
      "presets": [
        "es2015",
        "stage-2",
        "react"
      ]
    }
  }
}

any objections to switching to require('react')?

Seems to be broken with Babel6, getting an error:

  return new babel.Transformer('react-require', plugin)
         ^

TypeError: babel.Transformer is not a function

Using this with kesne/babel-plugin-inline-react-svg results in this error:

Module build failed: TypeError: unknown: Duplicate declaration "React"
   5 | import _inherits from 'babel-runtime/helpers/inherits';
   6 | import React from 'react';
>  7 | import React from 'react';
     |        ^

it seems like this plugin should add a check to prevent multiple React imports being added as mentioned here: airbnb/babel-plugin-inline-react-svg#31 (comment)

I found out that in some scenarios using this plugin with babel-plugin-jsx-svg-inject results in an error, because babel's internal blockHoist plugin is moving newly added React.createElement code above the React import:

var _svgContents = React.createElement("path", {
  d: "M30 5H12v36h26V14z",
  opacity: ".3"
}),
    _svgContents2 = React.createElement("path", {
  fillOpacity: ".3",
  d: "M8 17v19h32V17z"
});

import React from "react";

One way to fix this would be to add this line:

reactImportDeclaration._blockHoist = 3;

Could this change be considered? I could prepare the PR if the idea is ok.