Babel/Node: how to mix import/export syntax with top-level await

419 Views Asked by At

I am starting a Node.js project that uses react-pdf. This means that I need Babel to transpile the TSX syntax into JS code. I am having big trouble to make it work properly. If I want to use import/export syntax, my package.json must say that "type": "commonjs". But, as far as I'm aware, if I want to use top-level await type property must be set to "module". I don't really know what is the difference between both.

So, I set "type": "commonjs", I receive the following error:

const token = await getAuthToken();
              ^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules

And now, when "type": "module":

var _react = _interopRequireDefault(require("react"));
         ^

ReferenceError: require is not defined in ES module scope, you can use import instead

I can see that the transpiled files use require() syntax, which is not allowed when type is set to "module". So, isn't there any way to make Babel transpile to import/export syntax, so I can both use this syntax AND top-level await feature?

[EDIT]: As asked, there goes my .babelrc configuration file:

{
  "presets": [
    [
      "@babel/env",
      { "targets": { "node": 18 } }
    ],
    [
      "@babel/preset-react",
      { "targets": { "node": 18 } }
    ],
    [
      "@babel/preset-typescript",
      { "targets": { "node": 18 } }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

If it's important, my package.json script line is:

"run": "babel --extensions .ts,.tsx src -d output && node output/document.js"
0

There are 0 best solutions below