title: Create React App: Transpile JSX of external package in node_modules
body: <p>I'm trying to use the <a href="https://www.npmjs.com/package/react-scratchblocks" rel="noreferrer">react-scratchblocks</a> package on my react project.</p>
  
  <p>I've created my project using the create-app-react command.</p>
  
  <p>After importing the package I got the following error:</p>
  
  <p>Failed to compile.</p>
  
  <pre><code>./node_modules/react-scratchblocks/src/Scratchblocks.js
  SyntaxError: /Users/jorge/Documents/React/elimu-analyzer-frontend/node_modules/react-scratchblocks/src/Scratchblocks.js: Unexpected token (45:6)
  
    43 |     const scripts = this.parseScripts(this.props.code);
    44 |     return (
  &gt; 45 |       &lt;div className={this.classNames()}&gt;
       |       ^
    46 |         {scripts.map((script,i) =&gt; (
    47 |           &lt;Scratchblock key={i} className="script" script={script}/&gt;
    48 |         ))}
  </code></pre>
  
  <p>I know that the jsx it's not been recognized, but what should I do to make this package work? Remember: i've used the create-rect-app to create my React project.</p>
  
  <p>Thanks.</p>
  
  <p>UPDATE 1:</p>
  
  <pre><code>module.exports = function () {
  
  return {
      overrides: [{
          test: ["./node_modules/react-scratchblocks"],
          presets: ["@babel/preset-react"]
      }],
  };
  }
  </code></pre>
  
  <p>UPDATE 2:
  Component that where I import the react-scratchblocks.</p>
  
  <pre><code>import React, { useState } from 'react';
  import { withRouter } from 'react-router-dom';
  import './styles.css';
  import Fire from '../../config/Fire';
  import Realtime from '../Realtime';
  import Scratchblocks from 'react-scratchblocks'
  
  function Content(props) {
  
  const [menuOption, setMenuOption] = useState(1);
  
  async function logout() {
      await Fire.logout();
      props.history.push('/');
      console.log('oi');
  }
  
  if (menuOption === 0) {
      return (
          &lt;div class='content'&gt;
              &lt;Realtime /&gt;
          &lt;/div&gt;
      );
  }
  else if (menuOption === 1) {
      return (
          &lt;div class="content"&gt;
              &lt;button onClick={logout}&gt; OUTRA OPÇÃO &lt;/button&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default withRouter(Content);
  </code></pre>