Issue
I'm using babel 6 for react JSX transforms. However I'm not using the react preset, I am ONLY using the 'transform-react-jsx' plugin (and trying strict-mode disable option), here is my .babelrc
{
"plugins": [
["transform-react-jsx"]
],
"sourceMaps": true,
"strictMode": false
}
However I have required a thirdparty javascript that uses 'with' (out of my control) which emits following error:
[SyntaxError: foo.js: 'with' in strict mode .. ]
So I need to disable strict mode, This is same problem as this issue however I am NOT using es6/es2015 stuff, only jsx transforms.
With babel 6 there is no blacklist and I've only specified ONE plugin, so I'm suspect there is no way to disable.
According to this line, the strictMode option is indeed parsed.
I don't understand the syntax you used for your .babelrc, though. Why an array?
Try this:
{
"plugins": [
["transform-react-jsx"]
],
"sourceMaps": true,
"strictMode": false
}
transform-strict-mode is used only to include the strict mode not to disable it. So setting it to false ["transform-strict-mode", {"strict": false}] will change nothing, in your case better remove this plug-in then including it.
But if somewhere else you are using a plugin or preset that includes the strict mode, try maybe to use es2015-loose :
install
npm install --save-dev babel-preset-es2015-loose babel-preset-es2015
config
{"presets": ["es2015-loose"]}
Related
As the title says, would it be possible for eslint to show warnings instead of errors on ALL of the rules? I'm using Standard JS, if that information is relevant.
Thanks!
I think there's no out-of-the-box option right now, but maybe you could use a plugin to achieve that:
Eslint plugin only warn
Or set all the rules as warning instead of errors.
Following es-lint-plugin-prettier readme, edit your .eslintrc.json and put a specific rule for prettier:
"rules": {
// maybe your other rules...
"prettier/prettier": "warn"
}
Then, prettier rules will be issued as warnings instead of errors.
Not sure of all the side effects, but it seems to work ok for my project, where I also use #typescript-eslint/eslint-plugin, #typescript-eslint/parser, eslint-config-prettier and eslint-plugin-prettier.
If it helps, my extends config in .eslintrc.json:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
You can create an .eslintrc file with all the rules set to "warn"
If you already have an eslintrc file you can use that, or extend from a rules file such as the one here. In this one, all the rules are set to 0 (disabled). You can modify specific ones or all of them and set them to 1 (or "warn")
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.
I'm having unexpected trouble transpiling ES2015's startsWith using Rollup and Babel. I'm using babel-preset-env and have the following in my .babelrc:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "not ie >= 10"]
},
"debug": true
}]
]
}
My rollup.config.js is set up to respect my .babelrc, and I'm seeing that it's correctly outputting in my debugging information that it's respecting my browser targets. Still, in my bundled JS, I'm seeing startsWith untouched, with no sight of a polyfill anywhere.
What might I be doing wrong?
Babel only transpiles syntax (like let/const, arrow functions, classes, etc.) and not API methods (like .startsWith() or .includes()).
For that, you'll need a polyfill, like babel-polyfill. However, if you only need the .startsWith function, a simpler polyfill will suffice. That, or you could simply make your own startsWith() function and use that.
How do I tell an Atom linter, specifically js-standard, to ignore a rule? I want it ignored project-wide, and I thought that I could achieve this with a package.json or a .eslintrc but I can't get either to work. The rule I want to disable is camelcase
I should be able to do this in a package.json file, because the js-standard linter has an option called honorStyleSettings:
Honors style settings defined in package.json.
Current style settings supported:
ignore
parser
What's the syntax of these settings?
For the record, here's how to use js-standard in Atom while selectively disabling a certain rule.
Disable the linter-js-standard Atom package
Install linter-eslint
Add an .eslintrc file:
{
"extends": ["standard"],
"rules": {
"camelcase": 0
}
}
You may also need to install standard and eslint via npm, if you don't have them already.
Using the default install, there is no way to do this in linter-js-standard. (I believe this was a conscious decision on the part of the module authors who believe that standard is a hard target rather than an ideal.)
If you wish to use eslint-style comments to disable linting for certain lines or code sections, install babel-eslint via npm i --save-dev babel-eslint and add
{
...
"standard": {
"parser": "babel-eslint"
}
...
}
to your package.json file which will allow you to annotate your source as needed.
Example
Assuming foo is defined but not used elsewhere in your file, linter will warn: 'foo is assigned a value but never used. (no-unused-vars)'
const foo = 1
After installing babel-eslint, configuring standard in your package.json file, and adding this comment, linter will ignore the line.
const foo = 1 // eslint-disable-line
See Configuring ESLint for other configuration annotations.
I've managed to disable the "camelcase" rule by going to "linter-js-standard" package folder and adding to node_modules/standard/eslintrc.json file the following line:
"rules": { "camelcase": [0] }
So the entire "eslintrc.json" looks like:
{
"extends": ["standard", "standard-jsx"],
"rules": { "camelcase": [0] }
}
Just save or edit your .js file in Atom for the changes to take effect.
On my Linux desktop the full path to eslintrc.json is:
~/.atom/packages/linter-js-standard/node_modules/standard/eslintrc.json
Of course, when you update the "linter-js-standard" package in Atom, you'll have to do the above steps again.
To turn the "camelcase" rule on you may change the "camelcase" value to [2] instead of deleting the entire "rules" line:
"rules": { "camelcase": [2] }
If it is ESlint that your plugin uses then create a .eslintrc file in the root of your project & write your rules within there.
Heres an example of a .eslintrc file github example. I find i need to close and reopen Atom to refresh the lint errors
EDIT:
showEslintRules (default: false). You will need to change this option to true.
I love syntastic for javascript but I am using the new ES6 module tranpiler and syntastic is not happy about these type of statements:
import Typeahead from './lib/components/ember-typeahead';
Is there anyway that I can keep syntastic quiet about this type of statement?
Syntastic will use JSHint to check JavaScript syntax if it's available (which I recommend over jslint).
JSHint supports es6 syntax with the esnext flag, which includes support for the export and import module syntax.
I suggest adding a .jshintrc file to your project to control JSHint's behavior (and thus Syntastic's) for your entire project:
{
"esnext": true
}
Note: be careful, since using the esnext flag will add support for all of es6's new language sytax that JSHint currently supports, not just the module syntax.
Note: esnext has now been deprecated in favour of the esversion syntax.
{
"esversion": 6
}
To work around this, I'd suggest the following steps as recommended here: Configure Vim for React:
Install eslint and babel-eslint:
npm install -g eslint babel-eslint
Create a local .eslintrc config in your project or a global ~/.eslintrc configuration:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true
},
"settings": {
"ecmascript": 6
},
"rules": {
"strict": 0 // you can add more rules if you want
}
}
Finally, configure syntastic to use eslint:
let g:syntastic_javascript_checkers = ['eslint']