Transpile imports if module has module.exports (#5780)

Fixes #5778
Fixes #3650

packages/next/build/webpack/loaders/next-babel-loader.js

@@ -21,7 +21,7 @@ module.exports = babelLoader.custom(babel => {
 
       return { loader, custom }
     },
-    config (cfg, {customOptions: {isServer, dev}}) {
+    config (cfg, {source, customOptions: {isServer, dev}}) {
       const options = Object.assign({}, cfg.options)
       if (cfg.hasFilesystemConfig()) {
         for (const file of [cfg.babelrc, cfg.config]) {
@@ -37,6 +37,11 @@ module.exports = babelLoader.custom(babel => {
         options.presets = [...options.presets, presetItem]
       }
 
+      if (source.match(/module\.exports/)) {
+        options.plugins = options.plugins || []
+        options.plugins.push(commonJsItem)
+      }
+
       options.overrides = [
         ...(options.overrides || []),
         {

test/integration/basic/lib/async-function.js

@@ -0,0 +1,3 @@
+module.exports = async function () {
+  return 'test'
+}

test/integration/basic/pages/read-only-object-error.js

@@ -0,0 +1,12 @@
+import test from '../lib/async-function'
+
+function ReadOnlyObjectError () {
+  return 'this is just a placeholder component'
+}
+
+ReadOnlyObjectError.getInitialProps = async () => {
+  const result = await test()
+  return {result}
+}
+
+export default ReadOnlyObjectError

test/integration/basic/test/client-navigation.js

@@ -732,5 +732,17 @@ export default (context) => {
         }
       })
     })
+
+    it('should not error on module.exports + polyfills', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/read-only-object-error')
+        expect(await browser.elementByCss('body').text()).toBe('this is just a placeholder component')
+      } finally {
+        if (browser) {
+          browser.close()
+        }
+      }
+    })
   })
 }