title: How to make create-react-app support .mjs files with webpack?
body: <p>I'm trying to work with this twitch npm package (<a href="https://www.npmjs.com/package/twitch" rel="noreferrer">https://www.npmjs.com/package/twitch</a>) and am running into some issues when deploying via creat-react-app / react-scripts.</p>
  <p>From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.</p>
  <pre><code>./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
  app_1    | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)
  </code></pre>
  <p>If I manually deleted the &quot;es&quot; folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.</p>
  <p>Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!</p>
  <p>If it helps, here is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;ui&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;license&quot;: &quot;UNLICENCED&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.9.0&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.2.0&quot;,
      &quot;@babel/register&quot;: &quot;^7.0.0&quot;,
      &quot;axios&quot;: &quot;^0.19.2&quot;,
      &quot;babel-plugin-dynamic-import-node&quot;: &quot;^2.2.0&quot;,
      &quot;btoa&quot;: &quot;^1.2.1&quot;,
      &quot;clipboard-copy&quot;: &quot;^3.0.0&quot;,
      &quot;connected-react-router&quot;: &quot;^6.8.0&quot;,
      &quot;dateformat&quot;: &quot;^3.0.3&quot;,
      &quot;dotenv&quot;: &quot;^8.0.0&quot;,
      &quot;draft-js&quot;: &quot;^0.11.0&quot;,
      &quot;draft-js-export-html&quot;: &quot;^1.4.1&quot;,
      &quot;express&quot;: &quot;^4.16.4&quot;,
      &quot;file-loader&quot;: &quot;^3.0.1&quot;,
      &quot;firebase&quot;: &quot;^5.2.0&quot;,
      &quot;history&quot;: &quot;^4.7.2&quot;,
      &quot;human-date&quot;: &quot;^1.4.0&quot;,
      &quot;ignore-styles&quot;: &quot;^5.0.1&quot;,
      &quot;immutability-helper&quot;: &quot;^3.0.0&quot;,
      &quot;jwt-decode&quot;: &quot;^2.2.0&quot;,
      &quot;lodash&quot;: &quot;^4.17.11&quot;,
      &quot;normalizr&quot;: &quot;^3.2.4&quot;,
      &quot;prop-types&quot;: &quot;^15.6.1&quot;,
      &quot;qs&quot;: &quot;^6.5.2&quot;,
      &quot;react&quot;: &quot;^16.8.0&quot;,
      &quot;react-animations&quot;: &quot;^1.0.0&quot;,
      &quot;react-dnd&quot;: &quot;^7.4.5&quot;,
      &quot;react-dnd-html5-backend&quot;: &quot;^7.4.4&quot;,
      &quot;react-dom&quot;: &quot;^16.8.0&quot;,
      &quot;react-ga&quot;: &quot;^2.5.3&quot;,
      &quot;react-gtm-module&quot;: &quot;^2.0.10&quot;,
      &quot;react-helmet&quot;: &quot;^5.2.0&quot;,
      &quot;react-image-crop&quot;: &quot;^8.3.0&quot;,
      &quot;react-is&quot;: &quot;^16.8.0&quot;,
      &quot;react-loadable&quot;: &quot;^5.5.0&quot;,
      &quot;react-loading-skeleton&quot;: &quot;^2.0.1&quot;,
      &quot;react-on-screen&quot;: &quot;^2.1.1&quot;,
      &quot;react-pdf&quot;: &quot;^4.0.5&quot;,
      &quot;react-pose&quot;: &quot;^4.0.6&quot;,
      &quot;react-redux&quot;: &quot;^6.0.1&quot;,
      &quot;react-router&quot;: &quot;^5.1.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.1.2&quot;,
      &quot;react-scripts&quot;: &quot;3.4.0&quot;,
      &quot;react-stripe-elements&quot;: &quot;^2.0.0&quot;,
      &quot;redux&quot;: &quot;^4.0.0&quot;,
      &quot;redux-devtools-extension&quot;: &quot;^2.13.2&quot;,
      &quot;redux-thunk&quot;: &quot;^2.2.0&quot;,
      &quot;reselect&quot;: &quot;^3.0.1&quot;,
      &quot;semantic-ui-calendar-react&quot;: &quot;^0.15.3&quot;,
      &quot;semantic-ui-css&quot;: &quot;^2.4.1&quot;,
      &quot;semantic-ui-react&quot;: &quot;^0.87.1&quot;,
      &quot;styled-components&quot;: &quot;^4.2.0&quot;,
      &quot;twitch&quot;: &quot;^4.2.4&quot;,
      &quot;url-loader&quot;: &quot;^1.1.2&quot;,
      &quot;validator&quot;: &quot;^11.1.0&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;,
      &quot;lint&quot;: &quot;eslint src&quot;,
      &quot;server&quot;: &quot;NODE_ENV=production node server/bootstrap.js&quot;
    },
    &quot;engines&quot;: {
      &quot;node&quot;: &quot;^10.0.0&quot;,
      &quot;yarn&quot;: &quot;^1.12.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.4.4&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.4.4&quot;,
      &quot;eslint&quot;: &quot;^6.8.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^18.1.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.10.1&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.11.0&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.1.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.8.1&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^3.0.0&quot;,
      &quot;prettier&quot;: &quot;^2.0.2&quot;
    },
    &quot;proxy&quot;: &quot;http://api:8080&quot;,
    &quot;browserslist&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not ie &lt;= 11&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;jest&quot;: {
      &quot;moduleNameMapper&quot;: {
        &quot;\\.worker.js&quot;: &quot;&lt;rootDir&gt;/__mocks__/workerMock.js&quot;
      }
    }
  }
  
  </code></pre>