optimizer/terser: "Export statement may only appear at the top level

[jbaiter]

I'm currently trying to build a React app, and am getting this error, due to those two exports that are wrapped in a conditional in react/index.js:

❯ ./node_modules/.bin/parcel build ./src/index.js ./src/css/index.css
🚨 Build failed.
@parcel/optimizer-terser: "Export" statement may only appear at the top level
/home/jbaiter/src_new/mdz-homepage-webapp/client/node_modules/react/index.js:5:7
  4 |   module.exports = require('./cjs/react.production.min.js');
> 5 | } else {
>   |       ^ "Export" statement may only appear at the top level
  6 |   module.exports = require('./cjs/react.development.js');
  7 | }

The code that causes the error (in the react dependency):

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

My parcel config:

{
  "targets": {
    "browser": {
      "engines": {
        "browsers": "supports es6-module"
      },
      "outputFormat": "esmodule",
      "distDir": "./dist/browser"
    },
    "browserOld": {
      "engines": {
        "browsers": "> 0.5%"
      },
      "distDir": "./dist/browserOld"
    }
  }
}

Can somebody point me in the right direction on how to fix this?

[FRSgit]

All I can tell is that parcel start working if I add --no-scope-hoist flag to the build :<

@jbaiter Have you figured any other way of fixing this?

[FRSgit]

Yea, trying to get with minimal repro right now

[FRSgit]

Okay, I have it have a look here: https://github.com/FRSource/parcel/tree/bug-build-fail-when-referencing-common-js-like-module/packages/examples/html

Clone the repo, go into packages/examples/html, run yarn & yarn demo. It seems that terser is failing when sees CommonJS-like module definition ("module.exports" ).

Long story:
For me the domready package was breaking, when you look into the bundle they're providing to the public you'll see that it's using UMD module definition. And the terser is failing directly on the line with module.exports

[FRSgit]

One more thing: this does happen only when doing an async import. With standard/sync import everything's fine. I would say this might be caused not passing async imports through babel (but I would be pretty sure you do it already) or by some babel misconfiguration (?) .

[davewthompson]

Very sorry to jump into this conversation, but I'm also interested in the correct way to export, say, a React component when you're using an async wrapper to deal with dynamic imports, as I can't get it to work yet.

I do apologise if this is unrelated - please let me know and then I'll open another discussion.

[mischnic]

Please follow #5230