New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pronebird opened this Issue Nov 2, 2018 · 5 comments

Comments

Projects
None yet
4 participants
@pronebird

pronebird commented Nov 2, 2018

$ 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"
    ]
  };
};
@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Nov 2, 2018

Hey @pronebird! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@milesj

This comment has been minimized.

milesj commented Nov 2, 2018

Any reason why you're using both flow AND typescript presets? Should be using one or the other.

@pronebird

This comment has been minimized.

pronebird commented Nov 3, 2018

@milesj yes I have a mixed codebase at the moment.

It works very well for isolated parts such as electron’s main and renderer processes since there is no direct interop. I am able to convert my source code to es5 this way.

But something doesn’t quite work with @babel/register Which for some reason does not translate import statements to require calls in typescript.

@rej156

This comment has been minimized.

@pronebird

This comment has been minimized.

pronebird commented Nov 12, 2018

@rej156 Thanks, but it didn't change a thing.

Updated babel.config.js as per suggestion. Also put the global import first to make sure that it's not resolution issue.

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

  return {
    presets: [
      '@babel/preset-flow',
      [
        '@babel/preset-env',
        {
          targets: { electron: '3.0' },
        },
      ],
      '@babel/preset-react',
    ],
    plugins: ['@babel/plugin-proposal-class-properties'],
    overrides: [
      {
        test: ['./src/**/*.ts', './src/**/*.tsx', './test/**/*.ts'],
        presets: [
          '@babel/preset-typescript',
          [
            '@babel/preset-env',
            {
              targets: { electron: '3.0' },
            },
          ],
          '@babel/preset-react',
        ],
      },
    ],
  };
};

Output:

$ 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 token {
~/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 { nativeImage } from 'electron';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment