Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Babel creates output directory but doesn't transpile any files

I am trying to transpile a project that uses ES6 syntax and TypeScript. I have a directory structure like this:

├── .babelrc
├── src
    ├── index.ts
    └── pitching
        ├── pitching.test.ts
        └── pitching.ts

I would like to compile everything in src and output into dist/. I have tried many variations of the following command (specified in the "build" script in package.json):

babel ./src -d ./dist

But I always get the following output:

$ babel ./src -d ./dist
Successfully compiled 0 files with Babel (13ms).
Done in 0.32s

The result is an empty dist/ directory in my project root. I tried compiling to a single file instead of a directory, which did create a compiled file, but all the module paths referenced in the code were messed up because they were relative to the src directory. I only mention this because to me it indicates that my babel setup is correct, though maybe I am wrong about that too.

My question is, why are my files not being transpiled, or how can I troubleshoot? The command doesn't give me any helpful output, even when I add the {"debug": true} to the presets in my .babelrc.

For reference, here are the babel packages and versions I am using:

"devDependencies": {
    "@babel/cli": "^7.10.3",
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-typescript": "^7.10.1",
    "@types/jest": "^26.0.3",
    "jest": "^26.1.0"
}

and here is my .babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
like image 287
elethan Avatar asked Jun 27 '20 21:06

elethan


People also ask

How do you Transpile using Babel?

You can use babel-standalone to transpile ES6 to ES5 in a browser environment. You just need to load the “babel-standalone” in your script as highlighted below and write the script you want to transpile, in script tag with type “text/babel” or “text/jsx”. Babel will automatically compile and execute the script.


2 Answers

Try adding the proper file extensions. The reason for this is babel/preset-typescript needs an extra argument to transpile as expected. See documentation here.

React applications compile both ts and tsx files.

babel --extensions .ts,.tsx ./src -d ./dist

Plain typescript applications just use ts files.

babel --extensions .ts ./src -d ./dist
like image 149
Joseph Cho Avatar answered Oct 26 '22 23:10

Joseph Cho


In my case I was already using the --extensions '.ts' flag, but still getting "Successfully compiled 0 files". I'm not sure what else is different between our setups, but for me what solved it was the solution outlined here. Once I removed the wrapping quotes around the .ts it started working.

like image 21
Developer Dave Avatar answered Oct 27 '22 01:10

Developer Dave