babel: Babel does not compile TypeScript when running with @babel/register

$ electron-mocha --renderer -R spec --require @babel/register --require-main "test/setup/main.js" --preload "test/setup/renderer.js" "test/*.spec.js" "test/*.spec.ts" "test/**/*.spec.js"
Unexpected identifier
~/gui/packages/desktop/test/keyframe-animation.spec.ts:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import KeyframeAnimation from '../src/main/keyframe-animation';
                                                                                                                                                                  ^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

Compilation actually works

yarn workspace desktop private:compile
yarn workspace v1.10.1
yarn run v1.10.1
$ babel src/ --copy-files --out-dir build --extensions ".ts,.tsx,.js"
Successfully compiled 79 files with Babel.

babel.config.js

module.exports = function (api) {
  api.cache(true);

  return {
    "presets": [
      ["@babel/preset-env", {
        "targets": { "electron": "3.0" }
      }],
      "@babel/preset-react",
      "@babel/preset-typescript",
      "@babel/preset-flow"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  };
};

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 1
Comments: 15 (1 by maintainers)

Most upvoted comments

Sorry for the late reply. It looks like that the extensions option that you set on the babel commandline is not set for @babel/register.

As this option cannot be set through the config files you can create a new js file load register there with the extensions set.
// ./test/babel-register.js
const register = require('@babel/register').default;

register({ extensions: ".ts,.tsx,.js" });
electron-mocha --renderer -R spec --require ./test/babel-register.js --require-main "test/setup/main.js" --preload "test/setup/renderer.js" "test/*.spec.js" "test/*.spec.ts" "test/**/*.spec.js"
Let us know if that helps.

register({ extensions: ".ts,.tsx,.js" }); is not working in mocha, it works when I changed to array type:

register({ extensions: ['.ts','.tsx', '.js', '.jsx'] });

+13

mrbone on Mar 21, 2019

Sorry for the late reply. It looks like that the extensions option that you set on the babel commandline is not set for @babel/register.

As this option cannot be set through the config files you can create a new js file load register there with the extensions set.

// ./test/babel-register.js
const register = require('@babel/register').default;

register({ extensions: ".ts,.tsx,.js" });

electron-mocha --renderer -R spec --require ./test/babel-register.js --require-main "test/setup/main.js" --preload "test/setup/renderer.js" "test/*.spec.js" "test/*.spec.ts" "test/**/*.spec.js"

Let us know if that helps.

danez on Nov 30, 2018

I don’t think you can require the .ts file directly. What’s worked for me is you need to create another .js file that wraps you’re .ts import. That currently works for me

martintreurnicht on Jul 23, 2020