Getting error "Support for the experimental syntax 'classProperties' isn't currently enabled " when removing #babel/plugin-proposal-class-properties - babeljs

I would like to remove the #babel/plugin-proposal-class-properties plugin as we are now targeting chrome 79 which supports class properties. I would imagine that removing this plugin shouldn't be a problem because we no longer need babel to transpile that code.
When I remove the plugin from the plugins section of the babelrc file, I am getting an error -
Module build failed (from ./node_modules/babel-loader/lib/index.js), ...
"Support for the experimental syntax 'classProperties' isn't currently enabled "
Relevant Package.json entries:
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"webpack": "4.40.0",
Here is my .babelrc file
{
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"chrome": 79
}
}
],
"#babel/preset-typescript"
],
"plugins": [
"babel-plugin-styled-components"
]
}
Here is my webpack config, relevant loader configuration:
{
test: /\.(js(x)?|ts(x)?)$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
Any help or insight would be appreciated.

Related

I have plugin built in craft cms3, I want to use same plugin in craft cms4

I have simply copy and paste plugin( plugin name is websitetoolbox) folder to craft cms4's vendor folder. And modify root composer.json like below.
{
"require": {
"craftcms/cms": "^4.2.0.2",
"swishdigital/template-selector": "^1.0",
"vlucas/phpdotenv": "^5.4.0",
"websitetoolbox/websitetoolboxforum": "1.4.0"
},
"require-dev": {
"yiisoft/yii2-shell": "^2.0.3"
},
"autoload": {
"psr-4": {
"modules\\": "modules/"
}
},
"config": {
"allow-plugins": {
"craftcms/plugin-installer": true,
"yiisoft/yii2-composer": true
},
"sort-packages": true,
"optimize-autoloader": true,
"platform": {
"php": "8.0.2"
}
},
"scripts": {
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
]
},
"minimum-stability": "dev",
"prefer-stable": true
}
When I run command composer update it gives below error
Problem 1
- Root composer.json requires websitetoolbox/websitetoolboxforum 1.4.0, found websitetoolbox/websitetoolboxforum[dev-master, 1.0.0, 1.3.0] but it does not match the constraint.
The line:
"websitetoolbox/websitetoolboxforum": "1.4.0"
Should probably be:
"websitetoolbox/websitetoolboxforum": "1.3.0"
I'm no expert on semantic versioning, but it seems a bit odd that you have a higher version number? Could it be a typo on your end? Cause if another dependency requires this version you might be in trouble.

How to display ESLint issues when using #babel/cli

We're using #babel/cli to build a library. I've been trying to show eslint issues when using babel --watch ... but no issues are reported.
babel.config.json
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"parser": "#babel/eslint-parser",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
}
Is it possible to show eslint issues in #babel/cli's output?

Can't get flowtype to work with babel. Unexpected token

ERROR in ./$Store.js
Module build failed: SyntaxError: ./$Store.js: Unexpected token, expected "{"
(24:39)
import Notification from '../$Notification'
export class ERStore extends StoreBase implements _Store {
^
Same with "type" and another flow annotations. I've tried to:
1) add #babel/preset-flow
2) add plugin-transform-flow-strip-types
3) add "#babel/plugin-syntax-flow"
4) updated all deps to latest versions available
5) different order of presets
.babelrc
{
"presets": [
["#babel/preset-env", {
"useBuiltIns": "entry",
"modules": "auto"
}],
"#babel/preset-react",
"#babel/preset-flow"
],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"lodash"
]
}
deps:
"webpack": "3.12.0",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/plugin-syntax-flow": "^7.2.0",
"#babel/plugin-transform-flow-strip-types": "^7.2.3",
"#babel/preset-env": "^7.3.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-3": "^7.0.0",
"babel-loader": "^8.0.5",
UPDATE:
Interesting, but jest is working fine with babel-jest.
Loader usage:
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: true
}
},
},
I had to set babel config in webpack.conf file explicitly.
.babelrc was working only partly.

Using Airbnb's JavaScript styling guide in Eclipse without Babel

How can I use the Airbnb JavaScript styling guide without using any additional tools? I already installed Tern (Tern IDE) for my Eclipse oxygen. I downloaded the latest release of the eslint-config-airbnb-base-v12.0.1 and selected under
Project -> Properties -> Tern ->Validation -> ESLint the .eslintrc file from the release. My Tern configuration is stored in a .tern-project file:
{
"ecmaVersion": 6,
"plugins": {
"guess-types": {
},
"outline": {
},
"eslint": {
"configFile": "C:\\dev\\workspace\\pyqt_web\\eslint-config-airbnb-base\\.eslintrc"
},
"browser-extension": {
},
"bootstrap": {
}
},
"libs": [
"browser",
"jquery"
]
}
The .eslintrc looks like:
{
"extends": "./index.js",
"rules": {
// disable requiring trailing commas because it might be nice to revert to
// being JSON at some point, and I don't want to make big changes now.
"comma-dangle": 0
},
}
and index.js:
module.exports = {
extends: [
'./rules/best-practices',
'./rules/errors',
'./rules/node',
'./rules/style',
'./rules/variables',
'./rules/es6',
'./rules/imports',
].map(require.resolve),
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
rules: {
strict: 'error',
},
};
From here i dont know how to go further. I would expect, that i get new warning which match these of airbnb style guide. Would this work for js code in html files?

karma-browserify throws error when trying to load modules shimmed with browserify-shim

I know there were similar questions but none of them solved my problem.
When I run karma test it throws the following error, every time it tries to load a module, that was shimmed with browserify-shim:
TypeError: 'undefined' is not an object (evaluating 'module.exports = ex')
at /tmp/8ff1e03f7ba1f9c70ee4192510d267a2.browserify:3855:0 <- lib/underscore/underscore.js:1421:0
My karma.conf.js is the following:
module.exports = function(karma) {
karma.set({
frameworks: [ 'jasmine', 'browserify' ],
files: [
'test/spec/**/*Spec.js'
],
reporters: [ 'dots' ],
preprocessors: {
'test/spec/**/*Spec.js': [ 'browserify' ]
},
browsers: [ 'PhantomJS' ],
logLevel: 'LOG_DEBUG',
singleRun: true,
autoWatch: false,
// browserify configuration
browserify: {
debug: true,
transform: [ 'reactify', 'browserify-shim' ]
}
});
};
And here is the relevant part of my package.json file:
...
"browser": {
"underscore": "./lib/underscore/underscore.js",
"jquery": "./lib/jquery/dist/jquery.js",
"typeahead": "./lib/bootstrap3-typeahead/bootstrap3-typeahead.js",
"bootstrap": "./lib/bootstrap/dist/js/bootstrap.js",
"q": "./lib/q/q.js"
},
"browserify-shim": {
"underscore": "_",
"jquery": "jQuery",
"typeahead": {
"depends": [
"jquery"
]
}
},
"browserify": {
"transform": [
"browserify-shim"
]
},
....
Any idea what can caus the problem?
I had the same problem and have resolved it by removing the browserify-shim transform from karma configuration file, since it is already declared as a transform on package.json file.
Hope that helps.