Disable Babel cache in babel.config.json file for development purposes? - javascript

I'm using babel-node to transpile on the fly for my development. Babel however does not pickup my changes to JS files loading older versions of the file, to say the least it is quite irritating. I'm guessing caching is the culprit here.
I can't however find a simple property to set in the babel.config.json to disable this, or how is one supposed to setup Babel for dev purposes!
My config:
{
"presets": [["#babel/preset-env", { "targets": { "node": "current" } }]],
"plugins": []
}

Related

Polyfills in Gatsby.js - String.prototype.matchAll

I'm having trouble polyfilling String.prototype.matchAll in Gatsby.js, which is using Webpack to bundle. Based on my understanding of the Gatsby Browser Support documentation, I thought that this should be done by default, since #babel/preset-env is used under the hood. After further investigation, it looks like the version of core-js that #babel/preset-env is using is 2. I tried to update the .babelrc file (shown below) to include separate configuration of the preset where I could update the version, but received errors. When trying to build with the new config, I received an error in every place there was an attempted polyfill (shown below).
{
"presets": [
[
"babel-preset-gatsby",
{
"targets": {
"browsers": [">0.25%", "not dead"]
}
}
],
[
"#babel/preset-env",
{
"targets": {
"browsers": [">0.25%", "not dead"]
},
"corejs": "3.6"
}
]
]
}
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'C:\Users\xxxx\OneDrive\Desktop\directory-frontend-gatsby\src\components'
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
Can't resolve 'core-js/modules/web.dom-collections.for-each' 'C:\Users\xxxx\OneDrive\Desktop\directory-frontend-gatsby\src\components'
etc...
I should mention that I'm using the newest version of core-js, #babel/preset-env, and #babel/core.
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"core-js": "^3.6.4"
Also, I thought that it might have been an issue with running this on Windows, since paths are constructed using \ instead of /, but also attempted the build on Ubuntu and received the same output.
Any help would be appreciated.
Thanks.

SCRIPT1003: Expected ':' on IE ~ Vue.js ~ MDBootstrap

I have a simple Vue.js application which works perfectly on other browsers than IE, which shows a blank page with an error SCRIPT1003: Expected ':'. I have added a vue.config.js file which looks like that:
module.exports = {
transpileDependencies: ["bootstrap-css-only", "mdbvue"]
};
My .babelrc file is a default one taken from the official project starting page, this is:
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
In my main.js file I tried 2 approaches:
import "core-js/stable";
import "regenerator-runtime/runtime";
and
import "#babel/polyfill";
Both didn't change anything and the error and behaviour is the same. The only one thing which still comes to my mind to solve this problem is mentioned here, i.e. in export default I'm using the following syntax for component:
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon,
mdbModalFooter,
mdbView
}
Edit2: But if I'll drop this lines then all my UI elements from MDBootstrap are gone. Is there any other way to use it? I wanted simply to use polyfills.
I tried to create babel.config.js file, but also didn't help. The logic in this file is like that:
module.exports = {
presets: [["#vue/app", { useBuiltIns: "entry" }]]
};
Is there anything I'm missing? What I understood the vue.config.js file doesn't has to be imported anywhere, because vue.config.js is an optional config file that will be automatically loaded by #vue/cli-service. Here are my questions:
Any ideas what can be wrong?
Shall I have babel.config.js and .babelrc or only one of these?
Is babel.config.js file automatically detected like vue.config.js?
[Edit] Maybe something in webpack configuration should be changed?
Vue CLI version:
$ vue --version
3.11.0
I had a similar issue. I recreated the project using vue-cli 4 and left all the defaults alone.I did not reference babel or core-js in my main.js. I looked at the console error in IE to see which library was causing the script error,( lets call it some-imported-lib ). Then I added that library in vue.config.js as follows
transpileDependencies:['some-imported-lib']
The problem is that IE11 doesn't support shorthand property notation, but you're using that in your components list. Your .babelrc isn't set to ensure that the resulting code can run on IE11.
You'll want to review the browserlist documentation to fine-tune your browsers setting, but for instance adding IE 11 to it will ensure that the transpiled code has all the transforms required to run on IE11.
Note that IE11 basically doesn't support anything in ES2015+. (It has const and a broken version of let, but that's basically it.) So doing this will effectively transpile all your code to ES5 levels. You may want to serve different bundles to IE and to other, more modern browsers.

ESLint doesn't run for HTML files in PyCharm

I am working on a Django+JavaScript project using ESLint as an integrated linter in PyCharm. It works well for *.js files but doesn't analyze any JavaScript in *.html files at all. How do I enable ESLint for HTML files, too?
Here is what I have tried
I added the eslint-plugin-html and followed its setup instructions here: https://www.npmjs.com/package/eslint-plugin-html
This includes adding "plugins": [ "html" ] into .eslintrc.js and adding --ext .html,.js into the "Extra ESLint options" input box in "Languages & Frameworks > JavaScript > Code Quality Tools > ESLint" at PyCharm Preferences.
Here is what my .eslintrc.js file looks like (rules are skipped). I commented out the ESLint vue plugin so far as it is said to have incompatibilities with eslint-plugin-html, which didn't help either.
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
//"plugin:vue/essential",
"google"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"plugins": [
"html",
//"vue"
],
"rules": {
...
}
};
Here is the screenshot of my ESLint settings in PyCharm preferences:
ESLint settings in PyCharm preferences
An important matter is that HTML files in my case were used as Django templates (which is the standard approach for the scenario I'm describing i.e. for Django projects). As explained by lena in the comment above, linting Django templates is not currently supported. I've got the same confirmation from an official request to JetBrains (the company that owns PyCharm).
So the answer is - currently there is no way to enable ESLint for Django templates in PyCharm. The workaround is to move the JS code to the other supported types of files to have the code linted (for example, .js or .vue files).
JetBrains has opened a new issue in their tracking system for adding the lacking support, so please vote there if this feature matters to you: ESLint: support linting JavaScript code in Django templates. Also, use this link to get most recent updates on whether this feature gets supported.

Why is Webpack looking for a preset in my home directory?

In the Webpack for a project I'm working on, I have Webpack set to do Babel transpiling so I can use Flow-typed JavaScript. However, when I run Webpack, which has this rule,
{
test: /\.js/,
exclude: ['/node_modules/'],
use: [{
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: ['transform-flow-strip-types']
}
}]
}
I'm getting:
Module build failed: Error: Couldn't find preset "transform-flow-strip-types"
relative to directory "/home/andy"
Last time I was working on this, Webpack worked correctly and was searching for transform-flow-strip-types in my node_modules folder, but now it's looking in my home directory. Why would Webpack all of a sudden by looking in my home directory, or how would I be able to diagnose why that is?
This is an unfortunate footgun in Babel's config file parsing. It has traversed all the way out of your project and found an unrelated .babelrc file that is in your home directory.
There's pretty much never a reason to have a .babelrc there, so your best bet would be to delete /home/andy/.babelrc. Alternatively if that's actually something your wanted (if so, please reconsider :P), you could create a no-op .babelrc in your project with just an empty object in it, which would also fix the issue.
I'm currently working to make Babel stop searching for .babelrc files as soon as it finds any package.json but that has yet to land and would only apply to Babel 7.x, not the current 6.x release. https://github.com/babel/babel/pull/7358

Babel not compiling ES6 to ES5 Javascript [duplicate]

I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?
Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.
Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).
I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.
First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!
As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...
npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react
Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.
fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}
In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}
Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.

Categories