babel-node fails when babel cli works correctly

Question

EDIT: The solution was to remove type=module from package.json

I'm trying to use babel-node and it's failing to pickup presets from .babelrc. The odd thing is the babel cli is working just fine.

This works:

$ npx babel src/build-html.js

This fails:

$ npx babel-node src/build-html.js
SyntaxError: Unexpected token '<'

This also works:

$ npx babel src/build-html.js | node

.babelrc.yml

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json

{
  "type": "module",
  "scripts": {
    "build:html": "babel-node src/build-html.js",
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.3",
    "@babel/core": "^7.10.3",
    "@babel/node": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1"
  }
}

src/build-html.js

import React from 'react'
import ReactDOMServer from 'react-dom/server'

const HelloWorld = () => <div>Hello World</div>

const output = ReactDOMServer.renderToStaticMarkup(<HelloWorld />)

console.log(output)

I put a repo up to help debug at https://github.com/joelnet/mojo-gallery

checkout the stack-overflow tag for this issue

Answer 1

Try renaming .babelrc.yml => mv .babelrc.yml babel.config.json and then run npx babel-node src/build-html.js again