title: Is it possible to use both "require" and "import" together with Webpack?
body: <p>We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix <code>import</code> and <code>require</code> within the same project.</p>
  
  <p>We have a <em>very</em> large project (300+ files) with some files using <code>var Pkg = require('./fileName');</code> and <code>module.exports = MyComponent</code> while others use <code>import Pkg from './fileName'</code> and <code>export default MyComponent</code> and would prefer to not have to go through each one using require/module.exports and update them.</p>
  
  <p><strong>webpack warning:</strong></p>
  
  <pre><code>WARNING in ./index.js 15:17-20
  "export 'default' (imported as 'App') was not found in './App.jsx'
  </code></pre>
  
  <p><strong>browser error:</strong></p>
  
  <pre><code>App.jsx:20 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'
      at Module.eval (App.jsx:20)
      at eval (App.jsx:21)
      at Module../App.jsx (bootstrap:83)
      at __webpack_require__ (bootstrap:19)
      at eval (index.js:2)
      at Module../index.js (bootstrap:83)
      at __webpack_require__ (bootstrap:19)
      at bootstrap:83
      at bootstrap:83
  </code></pre>
  
  <p><strong>package.json dependency versions:</strong></p>
  
  <pre><code>"@babel/cli": "^7.2.3",
  "@babel/core": "^7.4.4",
  "@babel/preset-env": "^7.4.4",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.5",
  "webpack": "^4.31.0",
  "webpack-cli": "^3.3.2",
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }
  </code></pre>
  
  <p><strong>.browserlistrc</strong></p>
  
  <pre><code>{
    "browserslist": [
        "&gt;0.25%",
        "ie 11",
        "not op_mini all"
    ]
  }
  </code></pre>
  
  <p><strong>webpack configs:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>rules: [
      {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [{
              loader: 'babel-loader',
              options: {
                  babelrc: true
              }
          }],
      },
      // some other rules...   
  ]
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import App from './App'
  
  // Expose App to the window so we can utilize 
  // it from within &lt;script&gt; tags
  window.App = App
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import ReactDOM from 'react-dom'
  
  var App = (function () {
      return {
          route: function (route, properties) {
              return ReactDOM.render(
                  &lt;div&gt;component markup&lt;/div&gt;, document.getElementById('workspace')
              )
          }
      }
  })()
  
  // This works
  // export default App
  
  // This breaks
  module.exports = App
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      App.route('login', {some: 'props'});
  &lt;/script&gt;
  </code></pre>