damassi/babel-7-typescript-example

Example TypeScript project built on top of new Babel 7 features. Includes Jest and Enzyme.

babel-7-typescript-example's Issues

Transpiling with tsc instead babel in case of Jest

First of all that's for creating this example and the blog post. It really helped me to solve the issues with TypeScript + Babel 7 + Jest in my new project https://github.com/mucsi96/nightwatch-api/tree/typescript

I am wondering why are you using typescript-babel-jest instead of babel-jest? As I can see the main idea of you setup is to use babel 7 to transpile TypeScript instead of tsc.

I have checked the source of typescript-babel-jest. It looks like it is using tsc internally https://github.com/lozinsky/typescript-babel-jest/blob/master/source/index.js#L13

This goes a little bit against of setup main goal.

For me replacing typescript-babel-jest with babel-jest worked fine as well.
Also not sure why you need babel-plugin-module-resolver. Also works fine without it.

Error when starting project

I did the typical clone and yarn install and then I get an error on yarn start.

C:\Users\Karl\tst\babel-7-typescript-example>yarn start
yarn run v1.10.1
$ babel-node --extensions '.ts,.tsx' index.ts
C:\Users\Karl\tst\babel-7-typescript-example\index.ts:1
(function (exports, require, module, __filename, __dirname) { import './src/index'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at Object.<anonymous> (C:\Users\Karl\tst\babel-7-typescript-example\node_modules\@babel\node\lib\_babel-node.js:224:
23)
    at Module._compile (module.js:653:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

regeneratorRuntime is not defined

Hi there!

First of all thanks for your post. It helped me a lot when we decided to migrate to TypeScript.

Did you face the regeneratorRuntime is not defined error?

I have created a class just like this one below

export default class Teste {
  async metodo () {
    return 'ok'
  }
}

Then I included it along index.tsx as follows

import Teste from './Teste'

const t = new Teste()

It does nothing and I just added there because I started to face this issue on my code and my first idea was that I failed following the steps you detailed gave on your post but, the result is the same as the ones I got on my code

node dist/index.js
/Users/adilson/dev/babel-7-typescript-example/dist/Teste.js:30
      regeneratorRuntime.mark(function _callee() {
      ^

ReferenceError: regeneratorRuntime is not defined
    at /Users/adilson/dev/babel-7-typescript-example/dist/Teste.js:30:7
    at /Users/adilson/dev/babel-7-typescript-example/dist/Teste.js:48:6
    at Object.<anonymous> (/Users/adilson/dev/babel-7-typescript-example/dist/Teste.js:52:2)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

All the post I saw so far mention those two options:

• @babel/plugin-transform-regenerator which I could not manage to get it working

• to add @babel/polyfill that actually works but it is a terrible option when coding a new lib as there is no central import point, making the require to happen on each file

Do you have any tips on that?

Thanks!

Error

I got an error

D:\React\examples\babel-7-typescript-example\index.ts:1
(function (exports, require, module, __filename, __dirname) { import './src/index'
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Function.Module.runMain (module.js:605:10)
    at Object.<anonymous> (D:\React\examples\babel-7-typescript-example\node_modules\@babel\node\lib\_babel-node.js:140:22)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
error Command failed with exit code 1.```

Cannot find module

Hey thanks for sharing this awesome example. I used it as the basis of a new TS/Babel 7/React/Apollo Client project.

Any clue why the dependencies I've added on top of the ones you already setup (react and react-dom) result in tsc errors? I'm super confused by it.

src/components/Repl.tsx:2:21 - error TS2307: Cannot find module 'react-apollo'.

import {Query} from 'react-apollo';
                      ~~~~~~~~~~~~~~


src/components/Repl.tsx:3:17 - error TS2307: Cannot find module 'graphql-tag'.

import gql from 'graphql-tag';
                  ~~~~~~~~~~~~~


src/components/Repl.tsx:5:21 - error TS2307: Cannot find module 'bloomer'.

import {Title} from 'bloomer';

These libraries are even written in TypeScript and are present in my package.json dependencies. 🤔

Couldn't find preset "@babel/env" relative to directory ".../babel-7-types cript-example"

Hi there, I just cloned the repo and did an npm i then npm test. I get this:

$ npm test

> [email protected] test .../babel-7-typescript-example
> jest

 FAIL  src/__tests__/index.test.js
  ● Test suite failed to run

    Couldn't find preset "@babel/env" relative to directory ".../babel-7-typescript-example"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Why use babel with typescript?

Hey guys,

Thanks for the thorough blog post. What I'm trying to understand is: why use babel at all with typescript? the tsc is quite good and will only get better, and Babel 6/7 do not support the full TS language.