I'm using babel-preset-react-app via following .babelrc:
{
"presets": ["react-app"],
"plugins": [
"transform-es2015-modules-commonjs",
"transform-async-generator-functions"
]
}
I need to overwrite babel-plugin-transform-runtime options. I tried installing plugin and adding it to .babelrc in a following way:
{
"presets": ["react-app"],
"plugins": [
["babel-plugin-transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": false
}],
"transform-es2015-modules-commonjs",
"transform-async-generator-functions"
]
}
but it doesn't work for me.
Is there any way I can do it without copy and pasting entire preset to my .babelrc?
It seems that Babel doesn't currently support these sorts of overrides (see https://github.com/babel/babel/issues/8799). Fortunately I found a workaround for babel-preset-react-app. There is an undocumented option, useESModules:
['react-app', { useESModules: false }]
Here's a config using babel-plugin-react-app that works for node.js:
presets: [
['react-app', { useESModules: false }],
[
'#babel/preset-env',
{
modules: 'commonjs',
targets: {
node: 'current',
},
},
],
],
Of course, using babel-preset-react-app makes the most sense if you're using create-react-app for your client-side bundle. If you're not using create-react-app, then you could consider just using #babel/preset-react directly, in which case you wouldn't need to worry about overriding the useESModules setting.
Related
I am new to Babel+Webpack and have some confusion regarding .babelrc configuration.
FIRST CONFIGURATION
{
"presets": [
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 0.25%, not dead",
"corejs": {
"version": 3,
"proposals": true
}
}
]
],
"plugins": [
"#babel/transform-runtime"
]
}
SECOND CONFIGURATION:
{
"presets": [
[
"#babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
Facts that are true for second configuration's are:
Increased bundle size
Core-js-pure will include ponyfills that will not pollute global environment.
My question is we are going to export a "umd" library for public use with a Library Name "XYZ" and i am confused which of the above settings are suitable as one thing really confuse me is that if the bundle i.e created at the end is minified and built completely on esm pattern(use-strict mode) and for public use they can access like "XYZ.method()", then how the second configuration is suitable and it stop polluting global namespace.
Can anyone explain me with an example and help me clearing this concept?
For libraries Rollup is a much better option than WebPack.
This a good starting point.
https://github.com/rollup/rollup-starter-lib
If you must use webpack, avoid using regenerater, as it adds a lot of bloat to the output of Babel, if you code needs it, then the consuming app should include it, so you don’t end up having it twice in the end app
Ran into this myself, in the past. Honestly, Webpack is terrible with anything that exports more than a single default, which is why you see most libraries use Rollup or Parcel for bundling.
The following error is emitted in my Node JS/React JS application after upgrading Node JS to v.12. I'm currently using #babel/core 7.10.1. How should this error be resolved?
Here is my babel.config.js:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'#babel/preset-react',
'#babel/preset-typescript',
],
plugins: [
'#babel/plugin-proposal-class-properties',
['#babel/plugin-proposal-decorators', { legacy: true }],
'#babel/plugin-proposal-export-default-from',
'#babel/plugin-proposal-export-namespace-from',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-react-constant-elements',
'#babel/plugin-transform-react-inline-elements',
],
ignore: ['node_modules', 'build'],
};
Try to remove "type": "module" from package.json.
I've spend many hours with no luck and finally found this commend in discussion:
https://github.com/manuelbieh/geolib/issues/208#issuecomment-556994420
You have ignore: ['node_modules', 'build'], maybe, that's the reason?
I had nested package.json files within my application. These package.json files defined dependencies. I believe that parts of the app were being transpiled with different versions of Babel. I flattened my application and removed the nested package.json files. This action solved my problem.
I am importing libraries in my vue.js project. For Library1 alone there are no errors. When i run my vue node js project build for library 2 i am importing , it always fails at below line and gets stuck with message 'building for production'.
Could not find implementations for the following rules specified in the configuration:
no-explicit-any
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Is there a way to make this ignore by npm build ?
Below is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'#vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
legacyDecorators: true,
},
},
rules: {
'#typescript-eslint/no-var-requires': 0,
'#typescript-eslint/ban-ts-ignore': 'off',
"#typescript-eslint/no-explicit-any": "off",
}
}
Do i need to update my tsconfig or tslint to stop checking for this when building production. This happens to only my vue library projecting i am using.
I use npm link and npm link to link and install libraries.
Well the easiest way to fix it is by removing tslint. As you Already have eslint. You just have have to install some extra eslint packages
npm i -D #typescript-eslint/eslint-plugin;
npm i -D #typescript-eslint/parser;
npm i -D eslint;
The following is the recommended
module.exports = {
env: {
commonjs: true,
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
ecmaVersion: 2019,
},
plugins: ["#typescript-eslint"],
rules: {
.....
}
}
NOTE:
on your tsconfig.json
Add the include section. This as the name says includes the paths of your source files. And exclude does the opposite
{
"compilerOptions": {
....
},
"exclude": [
"/node_modules/",
"./config/"
],
"include": [
"./src/*.ts",
"./src/**/*.ts",
"./src/**/**/*.ts",
"./src/**/**/**/*.ts"
]
}
I was trying to convert my react project into an electron-app. As
the project is bundled via webpack, I began using electron-webpack for
the build. When running electron-webpack dev, neither the /main nor the /renderer compiles correctly.
Console logs throw Decorator plugin error
The decorators plugin requires a 'decoratorsBeforeExport' option,
whose value must be a boolean. If you want to use the
legacy decorators semantics, you can set the 'legacy: true' option
Sooo, why not following that wise suggestion?. Then, I updated all my dependencies and update my .babelrc file, for adding the decoratorsBeforeExport and the legacy option (false and true respectively)
"plugins": [
["#babel/plugin-proposal-decorators", {
"decoratorsBeforeExport": false,
"legacy": true,
}],
As the Error still showing after that, I open the plugin-proposal-decoratorsfolder from _/node_modules_ and added a log for the options. Apparently, it does not identify my options set. I tried
directly from the webpack loader config, but the problem still showing.
My env
Node: v11.2.0
Webpack: v4.29.0
#babel/core: v7.0.0
This .babelrc worked for me:
{
"presets": [
"#babel/preset-react",
[ "#babel/preset-env", {
"targets": {
"browsers": [ "last 1 version" ]
}
} ]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
Mind how decorators plugin comes before class-properties.
Somehow, it didn't work for me in non-legacy mode. loose option is required if decorators runs in legacy mode, according to official docs: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html
It also states:
In Babel 7, transform-decorators-legacy will be the default plugin in Stage-0.
(Source: https://babeljs.io/docs/en/babel-plugin-transform-decorators.html)
More info:
Babel 7 - Decorators transform doesn't work with babel-loader
Simple ES7 decorator with babel
I'm using the latest ES8 features in my react code, for example, async and await. Because of misconfiguration problem in my webpack config, I cannot use source maps, and this slows down debugging.
A quick solution could be to locally compile source code into ES7 or ES8, and test in the latest Chrome. How can I set this in .babelrc? Here's my current .babelrc:
{
"presets": [
"react-app"
]
}
Answered here,
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
]
}
As of Jul 2018, the above setting would not support spread operator in objects. To enable it,
npm install --save-dev babel-plugin-transform-object-rest-spread
Use the following configuration in .babelrc:
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
],
"plugins": ["transform-object-rest-spread"]
}