Disable .babelrc inheritance - babeljs

How do I force babel NOT to look at the parent directory for .babelrc?
I have two .babelrc files: ./a/.babelrc and ./a/example/.babelrc.
I am running babel in ./a/example path.
./a/.babelrc defines a plugin “lodash".
I do not want to use this plugin when executing babel in ./a/example
I have tried setting ./a/example/.babelrc to:
{
"stage": 0,
"plugins": []
}
However, running babel in ./a/example path still uses "lodash" plugin.
$ pwd
/a/example
$ cat ./.babelrc
{
"stage": 0,
"plugins": []
}
$ cat ./../.babelrc
{
"stage": 0,
"plugins": [
"lodash"
]
}
$ babel ./src/
Error: ENOENT: no such file or directory, scandir '/a/node_modules/babel-plugin-lodash/node_modules/lodash'
[..]
$ babel --babelrc ./.babelrc ./src/
Error: ENOENT: no such file or directory, scandir '/a/node_modules/babel-plugin-lodash/node_modules/lodash'
[..]

There is an undocumented property called breakConfig. Set breakConfig to true to disable config inheritance.
This behaviour is going to change in 6.x. In 6.x Babel will break on the first .babelrc it finds. extends property is going to be used to explicitly name other .babelrc files to inherit from.

Related

Make Babel transpile a group of files independently without "Couldn't find intersection" error

I have a set of Javascript files in src directory. These files are completely independent from one another, i.e. nothing requires anything, they are not modules and intended to be used old-fashinally in different html files in <script> tags. I have set up babel using package.json (name, version, description etc omitted):
{
"scripts": {
"build": "babel src --out-dir ./ --source-maps"
},
"babel": {
"presets": [
"#babel/preset-env",
"babel-preset-minify"
],
"comments": false
},
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"babel-preset-minify": "^0.5.2"
}
}
When two certain js files are put in src directory, Babel fails to build, producing an error:
Error: D:\temp\babel\src\some_script.js: Couldn't find intersection
at NodePath.getDeepestCommonAncestorFrom (D:\temp\babel\node_modules\#babel\traverse\lib\path\ancestry.js:113:11)
at getSegmentedSubPaths (D:\temp\babel\node_modules\babel-plugin-minify-builtins\lib\index.js:244:14)
at BuiltInReplacer.replace (D:\temp\babel\node_modules\babel-plugin-minify-builtins\lib\index.js:92:31)
at PluginPass.exit (D:\temp\babel\node_modules\babel-plugin-minify-builtins\lib\index.js:205:27)
at newFn (D:\temp\babel\node_modules\#babel\traverse\lib\visitors.js:143:21)
at NodePath._call (D:\temp\babel\node_modules\#babel\traverse\lib\path\context.js:45:20)
at NodePath.call (D:\temp\babel\node_modules\#babel\traverse\lib\path\context.js:35:17)
at NodePath.visit (D:\temp\babel\node_modules\#babel\traverse\lib\path\context.js:88:8)
at TraversalContext.visitQueue (D:\temp\babel\node_modules\#babel\traverse\lib\context.js:86:16)
at TraversalContext.visitSingle (D:\temp\babel\node_modules\#babel\traverse\lib\context.js:65:19) {
code: 'BABEL_TRANSFORM_ERROR'
}
This error does not occur if I delete any one of those files and npm run build again, it also doesn't occur every time when there's more than one file inside the src directory, it only occurs for this particular pair of files. From which it can be assumed that the files are not transpiled independently and Babel somehow analyzes the content of the files, looking for "intersections" or whatever — a behavior that I never asked for. How to ask Babel to stop doing that, if possible?

Running nx target only if file doesn't exist

I have a project which has a build step, however, I need to make sure that the file firebase.config.json exists before running the build command.
With that, I have two NPM scripts:
// package.json
{
...,
"nx": {
"targets": {
"prepare": {
"outputs": ["firebase.config.json"]
},
"build": {
"outputs": ["dist"],
"dependsOn": [
{
"target": "prepare",
"projects": "self"
}
]
}
}
},
"scripts": {
"prepare": "firebase apps:sdkconfig web $FIREBASE_APP_ID_SHOP --json | jq .result.sdkConfig > firebase.config.json",
"build": "VITE_FIREBASE_CONFIG=$(cat ./firebase.config.json) vite build",
},
...
}
So with the above, every time I run nx build app it will first run prepare and build the firebase.config.json file.
However, every time I make a change to any of the source files inside my project, prepare re-runs even though the firebase.config.json is already present.
Is it possible for nx to only run a target if the file declared under outputs is not present?
If you are in a bash environment you can modify your prepare script to be the following (note the original command has been shortened with ellipses for readability).
// package.json
{
"scripts":{
"prepare": "CONFIG=firebase.config.json; [ -f \"$CONFIG\" ] || firebase apps:sdkconfig ... | jq ... > \"$CONFIG\""
}
}
The above prepare script will still run, but it should not spend any time reproducing the configuration file if it already exists.
CONFIG=firebase.config.json is just putting our file in a bash environment variable so we can use it in multiple places (helps prevent typos). [ -f "$CONFIG" ] will return true if $CONFIG holds a filename which corresponds to an existing file. If it returns true, it will short-circuit the || (OR) command.
If you want further verification of this technique, you can test this concept at the terminal with the command [ -f somefile.txt ] || echo "File does not exist". If somefile.txt does not exist, then the echo will run. If the file does exist, then the echo will not run.
A slightly-related side-note: while you clearly can do this all in the package.json configuration, if your nx workspace is going to grow to include other libraries or applications, I highly recommend splitting up all your workspace configuration into the default nx configuration files: nx.json, workspace.json, and the per-project project.json files for the sake of readability/maintainability.
Best of luck!

babel-node is compiling test and failing

I can build and the code works and correctly excludes the tests using and can run the code with node:
babel src -s -d dist --extensions ".js,.ts,.tsx" --ignore '**/*.test.js' --ignore '**/test/*'
But trying to use babel-node seems to include the tests regardless:
babel-node --extensions '.js,.ts,.tsx' --ignore='src/**/*.test.js' src/index.js
Depending on the ignore pattern I can get different errors but errors inside a test file. eg. src/entity/authentication/authentication.test.js which babel should be ignoring.
I've tried a number of patters:
**/*.test.js
src/**/*.js
/src/**/*.js
I'm sure it something simple that I'm missing.
My babel config if its helpful:
{
"presets": [
"#babel/preset-env",
["#babel/preset-typescript", {
"isTSX": true,
"allExtensions": true
}]
],
"plugins": [
"babel-plugin-transform-typescript-metadata",
["#babel/plugin-proposal-decorators", {"legacy": true}],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
]
}
🤦‍♂️Turns out it was not a babel issue at all it was a typeorm issue. https://github.com/typeorm/typeorm/issues/1654
"entities": [
"src/entity/**/!(*.test)*.js"
]
Note to self: Always leave a project in working condition prior to taking a long break from it. :( Much time was wasted. 😞

Why does Babel throw Unknown option: ... Children?

Trying to run build on CircleCi and it's failing on test. Same stuff is working perfect on my local.
My .babelrc config:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-class-properties",
"react-hot-loader/babel",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
Error I'm getting from circleCI:
yarn test v0.27.5
$ jest
FAIL src/utils/service-helper.test.js
● Test suite failed to run
ReferenceError: [BABEL] /home/circleci/repo/src/utils/service-helper.test.js: Unknown option: /home/circleci/repo/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
Any idea what is going on as the same configuration is working on another project
The error is unhelpful, but the issue is that your config has react in the preset list, but it can't find the babel-preset-react module in your node_modules, so instead it is loading the react module itself as if it were a preset. But since the "react" module isn't a preset, Babel throws.
Most likely, you've forgotten to list babel-preset-react in your package.json.

Gulp + Browserify: CoffeeScript not loading when loading files from node_modules

After setting up the folder structure for my Gulp project, I was wondering how to do paths in browserify, and found this page: https://github.com/substack/browserify-handbook#organizing-modules. It recommends putting common application parts in a subfolder of node_modules. This appears to be working, it's getting the files, but it's not applying my coffeeify transform, so it's throwing errors because it's trying to interpret them as JS. Any ideas how to fix this? This is my browserify config:
browserify: {
// Enable source maps
debug: true,
// Additional file extentions to make optional
extensions: ['.coffee', '.hbs'],
// A separate bundle will be generated for each
// bundle config in the list below
bundleConfigs: [{
entries: src + '/javascript/app.coffee',
dest: dest,
outputName: 'app.js'
}, {
entries: src + '/javascript/head.coffee',
dest: dest,
outputName: 'head.js'
}]
}
and these are the relevant bits form my package.json.
"browserify": {
"transform": [
"coffeeify",
"hbsfy"
]
}
Transfroms aren't applied to files in node_modules unless they are marked as being global: https://github.com/substack/node-browserify#btransformtr-opts. If you choose to make it global, be warned, the documentation suggests against it:
Use global transforms cautiously and sparingly, since most of the time
an ordinary transform will suffice.
You won't be able to specify the tranform in package.json:
You can also not configure global transforms in a package.json like
you can with ordinary transforms.
The two options are programmatically, by passing {global: true} as options or at the command line with the -g option:
browserify -g coffeeify main.coffee > bundle.js