babel / babel-upgrade Goto Github PK
View Code? Open in Web Editor NEW⬆️ A tool for upgrading Babel versions (to v7): `npx babel-upgrade`
⬆️ A tool for upgrading Babel versions (to v7): `npx babel-upgrade`
Shouldn't running npx babel-upgrade
print the most recent versions of packages instead of stopping at ^7.0.0
?
e.g. https://github.com/babel/babel/tree/master/packages#other - only @babel/register
has a version below 7.2.0
.
Hello everyone!
I'm writing down a lot of the todos just in the readme since this feels so early in the progress of this idea/tool. If we get closer we can start with individual issues, since I feel like we would just make 100 issues atm.
npx babel-upgrade
.npx babel-upgrade babelrc=path packagejson=path
?This is a codemod and also something you would ideally only run once on a codebase (at least for each upgrade).
if (package.dependencies) { package.dependencies = ... }
Can this be included in the upgrade process?
"babel-eslint": "^8.2.6",
"babel-eslint": "^9.0.0"
Thanks!
babel-upgrade -h
or babel-upgrade --help
should show help text
8.0.0-beta.0
or 7.1.2
+ "babel-core": "7.0.0-bridge.0"
?4.0.0-beta.0
#30
A plugin that is unknown to babel-upgrade
(e.g. lodash/babel-plugin-lodash) will be renamed to babel-plugin-lodash
when it it's a plugin with options (an array)
but will not be changed when it is a simple plugin.
{
"presets": [
- "react",
+ "@babel/preset-react",
[
- "env",
+ "@babel/preset-env",
{
"targets": {
"browsers": [
@@ -21,15 +21,15 @@
],
"plugins": [
"dynamic-import-node",
- "transform-class-properties",
- "transform-object-rest-spread",
- "syntax-dynamic-import"
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-syntax-dynamic-import"
],
"env": {
"production": {
"plugins": [
[
- "lodash",
+ "babel-plugin-lodash",
{
"workaround": "https://github.com/facebook/jest/issues/3959",
"reason": "https://github.com/istanbuljs/babel-plugin-istanbul/issues/116"
@@ -38,7 +38,9 @@
]
},
"development": {
- "plugins": ["lodash"]
+ "plugins": [
+ "lodash"
+ ]
}
}
}
I think it is because the name of the plugin is changed here
plugin[0] = `babel-plugin-${plugin[0]}`;
https://github.com/babel/babel-upgrade/blob/master/src/upgradeConfig.js#L53-L56
I am getting this error on build:
**Generating minified bundle for production via Webpack. This will take a moment... (node:117912) DeprecationWarning: Tapable.plugin is deprecated. Use new API on
.hooks` instead
(node:117912) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
Webpack stats: Hash: 2563da8cbef0bd4e0876
Version: webpack 4.20.2
Time: 5557ms
Built at: 2018-10-04 14:32:18
Asset Size Chunks Chunk Names
main.1104bafcd2688cdd4861.js 88.1 KiB 0 main
Entrypoint main = main.1104bafcd2688cdd4861.js
[90] (webpack)/buildin/global.js 509 bytes {0} [built]
[109] ./node_modules/core-js/modules/es6.regexp.flags.js 201 bytes {0} [built]
[112] ./node_modules/core-js/modules/es6.map.js 642 bytes {0} [built]
[114] ./node_modules/core-js/modules/es6.set.js 481 bytes {0} [built]
[115] ./node_modules/core-js/modules/es6.weak-map.js 1.92 KiB {0} [built]
[125] multi babel-polyfill ./src/client/index 40 bytes {0} [built]
[126] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
[127] ./node_modules/core-js/shim.js 7.99 KiB {0} [built]
[164] ./node_modules/core-js/modules/es6.number.parse-int.js 221 bytes {0} [built]
[216] ./node_modules/core-js/modules/es6.array.sort.js 643 bytes {0} [built]
[320] ./node_modules/core-js/modules/es7.observable.js 5.39 KiB {0} [built]
[321] ./node_modules/core-js/modules/web.timers.js 754 bytes {0} [built]
[322] ./node_modules/core-js/modules/web.immediate.js 162 bytes {0} [built]
[324] ./node_modules/regenerator-runtime/runtime.js 23.9 KiB {0} [built]
[325] ./node_modules/core-js/fn/regexp/escape.js 108 bytes {0} [built]
+ 313 hidden modules
WARNING in main.1104bafcd2688cdd4861.js contains invalid source map
ERROR in multi babel-polyfill ./src/client/index
Module not found: Error: Can't resolve 'babel' in 'C:\Users\rdodle\New folder'
@ multi babel-polyfill ./src/client/index main[1]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 534 KiB 0
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.ejs 2.1 KiB {0} [built]
[1] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 519 bytes {0} [built]
Your app is compiled in production mode in /dist. It's ready to roll!`**
My Webpack.config.prod.js
// For info about this file refer to webpack and webpack-hot-middleware documentation
// For info on how we're generating bundles with hashed filenames for cache busting: https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.w99i89nsz
import webpack from 'webpack';
import path from 'path';
// import ExtractTextPlugin from 'extract-text-webpack-plugin';
import WebpackMd5Hash from 'webpack-md5-hash';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import jsonImporter from 'node-sass-json-importer';
if (!global._babelPolyfill) {
require('babel-polyfill');
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('production'),
DEV: false
};
export default {
mode:"production",
// debug: true,
devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
// noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'babel-polyfill',
'./src/client/index'
],
output:{
path: path.resolve(__dirname, "dist"), // string
// the target directory for all output files
// must be an absolute path (use the Node.js path module)
filename: '[name].[chunkhash].js', // string // the filename template for entry chunks
publicPath: "/" // string // the url to the output directory resolved relative to the HTML page
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
// output: {
// path: ${__dirname}/dist
,
// publicPath: '/',
// filename: '[name].[chunkhash].js'
// },
resolve: {
alias: {
'webworkify': 'webworkify-webpack'
}
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
// Hash the files using MD5 so that their names change when the content changes.
new WebpackMd5Hash(),
// Optimize the order that inspiration are bundled. This assures the hash is deterministic.
new webpack.optimize.OccurrenceOrderPlugin(),
// Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
// --optimize-dedupe resp. new webpack.optimize.DedupePlugin(GLOBALS),
// Generate an external css file with a hash in the filename
new ExtractTextPlugin('[name].[contenthash].css'),
// Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
new HtmlWebpackPlugin({
template: 'src/client/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
inject: true
// Note that you can add custom options here if you need to handle other custom logic in index.html
}),
// Eliminate duplicate packages when generating bundle
// new webpack.optimize.DedupePlugin(),
// Minify JS
new UglifyJsPlugin()
],
module: {
// configuration regarding modules
rules: [
{
test: /.scss$/,
use: [
// apply multiple loaders and options
"sassLoader",
{
loader: "sassLoader",
options: {
importer: jsonImporter
}
}
]
},
{
test: /.js$/,
include: path.join(__dirname, 'src'),
use: "babel"
},
{
test: /webworkify.+.js$/,
include: path.resolve(__dirname, 'node_modules/webworkify/index.js'),
use: 'worker'
},
{
test: /.eot(?v=\d+.\d+.\d+)?$/,
use: 'file'
},
{
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /.[ot]tf(?v=\d+.\d+.\d+)?$/,
use: 'url?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'
},
{
test: /.svg(?v=\d+.\d+.\d+)?$/,
use: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{
test: /.(jpe?g|png|gif)$/i,
use: ['file']},
{
test: /.ico$/,
use: 'file-loader?name=[name].[ext]'},
{
test: /(.css|.scss)$/,
use: ExtractTextPlugin.extract('css?sourceMap!postcss!resolve-url-loader!sass?sourceMap')
},
{
test: /.json$/,
use: 'json'
},
{
enforce:'post',
include: /node_modules/mapbox-gl/,
loader: 'transform',
query: 'brfs'
}
]
}
};
The supported values for the useBuiltIns
option of babel-preset-env
config changed from Babel v6 to Babel v7. It used to be just a boolean in v6. However, in v7, the supported values are false
, "usage"
or "entry"
. (https://babeljs.io/docs/en/babel-preset-env#usebuiltins)
I suggest that babel-upgrade supports automatically converting an option of useBuildIns = true
to one of "usage"
or "entry"
. This helps remove a manual operation that the developer will have to do, possibly forget about (since this option change is not mentioned in the Babel v7 Upgrade Guide).
I hope this suggestion is helpful.
A tiny editor for upgrading Babel versions (to v7)
aside: This issue reminds me that we should also make a website for this where you can copy paste or even drag/drop your config/package.json and it does the same thing as this tool. Maybe that could be useful too
It would be great to export from https://babeljs.io/repl content to put in .babelrc and list of dependencies to add into package.json in order to replicate the same configuration used in repl.
after i used the babel-upgrade after compiling writed error "cannot find module babel-plugin-transform-object-rest-spread".
but babel-plugin-transform-object-rest-spread have not in any configs
Before update we have this .babelrc
{
"plugins": ["transform-decorators-legacy"]
}
After then we should have:
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
}
I tried to use babel-upgrade
to upgrade my project from Babel 6 to Babel 7.
I've used the command:
babel-upgrade --write --install
This is how it affected my package.json
dependencies:
- "babel-cli": "~6.26.0",
- "babel-core": "~6.26.0",
- "babel-eslint": "~8.0.3",
- "babel-loader": "^7.1.4",
- "babel-plugin-transform-object-rest-spread": "6.26.0",
- "babel-polyfill": "~6.26.0",
- "babel-preset-es2015": "^6.24.1",
- "babel-register": "^6.26.0",
+ "@babel/cli": "^7.0.0",
+ "@babel/core": "^7.0.0",
+ "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+ "@babel/polyfill": "^7.0.0",
+ "@babel/preset-env": "^7.0.0",
+ "@babel/register": "^7.0.0",
+ "babel-eslint": "^9.0.0",
+ "babel-loader": "^8.0.0",
However my build is now broken and I get the following errors:
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "@babel/plugin-proposal-object-rest-spread" specified in "/path/to/myapp/.babelrc" at 0, attempted to resolve relative to "/path/to/myapp"
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015' from '/path/to/myapp'
I was trying to upgrade from "babel-core": "^6.26.32".
npx babel-upgrade --write
added "@babel/core": "^7.0.0" into both devDependencies
and dependencies
.
Is that intended? Shouldn't that add only under devDependencies
?
Hello,
I have a space in my user folder name :
C:\Development\test\onsenui-vue-cordova-test > npx babel-upgrade
Error: EPERM: operation not permitted, mkdir 'C:\Users\xarkam'
The real folder is C:\Users\xarkam xarkam\
Thanks for fix it.
Ref babel/babel#7770
Not sure how automatic this should be. People should decide what plugins to opt-in to anyway? Either way if we remove them we'll have a message on what to upgrade? I guess it's weird on the tooling side because the output would change over time (maybe needs to have a date, or to say it's current as of x).
Current behavior
After upgrading from babel 6 to 7, Error occurred in PR deploy phrase. It was working normally in local build.
This is what I see on pm2 log on K8s
Cannot find module '@babel/runtime-corejs2/core-js/reflect/construct'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Module.Hook._require.Module.require (/home/y/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:61:29)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/y/share/node/manhattan_app/transpile/lib/errorHelper.js:3:26)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
This is the excerpt from package.json
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-computed-properties": "^7.0.0",
"@babel/plugin-transform-modules-commonjs": "^7.13.8",
"@babel/plugin-transform-react-constant-elements": "^7.0.0",
"@babel/plugin-transform-react-inline-elements": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/runtime-corejs2": "7.12.5",
"autoprefixer": "^8.6.5",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.0",
"babel-plugin-css-modules-transform": "^1.6.2",
"babel-plugin-import": "^1.12.2",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-rewire-exports": "^0.5.0",
"clean-css-cli": "^4.1.6",
"component_ec_nodejs_test_util": "^1.0.6",
"css-loader": "^3.6.0",
"deep-freeze": "0.0.1",
"ectest-accounts": "^0.1.1656",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^6.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-codeceptjs": "^1.0.0",
"eslint-plugin-json": "^1.4.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "^6.0.0",
"jest": "^26.6.3",
"jest-junit": "^3.0.0",
"mini-css-extract-plugin": "^0.10.0",
"nodemon": "1.17.3",
"postcss": "^7.0.32",
"postcss-easy-import": "^3.0.0",
"postcss-functions": "^2.1.1",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-scss": "^1.0.2",
"postcss-simple-vars": "^4.0.0",
"pre-commit": "^1.2.2",
"precss": "^2.0.0",
"prettier": "^1.19.1",
"react-test-renderer": "^16.6.3",
"redux-mock-store": "^1.5.3",
"request-promise": "^4.2.2",
"requestretry": "^3.1.0",
"rimraf": "2.4.3",
"saucelabs": "^1.5.0",
"sd-s3-assets-deploy": "^0.4.1",
"style-loader": "^1.2.1",
"url-loader": "^0.6.2",
"wait-for-expect": "^1.1.1",
"wait-on": "^2.0.2",
"wdio-screenshot": "^0.6.0",
"webdriverio": "^4.13.1",
"webpack": "^4.27.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^2.0.4"
},
Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)
babelrc
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"node": "current",
"browsers": [
"ie >= 11"
]
}
}
]
],
"plugins": [
[
"css-modules-transform",
{
"generateScopedName": "[local]__[hash:base64:5]",
"extensions": [
".css"
],
"processorOpts": "./babel/processor.options.js"
}
],
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"regenerator": true
}
],
"@babel/plugin-transform-computed-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-react-inline-elements",
"@babel/plugin-transform-react-constant-elements",
"lodash",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
],
"sourceType": "unambiguous"
}
Environment
I've been banging my head for days to try to fix this. Please suggest how to fix this problem. Thank you.
Ref #31
https://github.com/sindresorhus/globby#gitignore
I think maybe we can just pass this instead of the explicit node_modules check?
Writing down if tools are converted/what we need to do. Tracking date added to the list too.
babel-core@^7.0.0-0
)1.0.0-beta.1
Apps
This is probably in the early stages, so I apologize if this issue is premature. From the documentation, it looks like the intent is to support node 4 <=, but currently isn't transpiled down to support Node 4.
const { isAcceptedNodeVersion, writePackageJSON, writeBabelRC } = require("../src");
^
SyntaxError: Unexpected token {
async function writePackageJSON() {
^^^^^^^^
SyntaxError: Unexpected token function
);
^
SyntaxError: Unexpected token )
Otherwise, everything has worked great in node 8 & 9 .
Hi,
I had babel-loader version higher than babel-uprade suggested me, here is what happened:
- "babel-loader": "^8.0.0-beta.3",
+ "babel-loader": "^8.0.0-beta.0",
Really useful tool! I think there should be a dry run option just to see what changes the tool will generate before applying them.
I would like to contribute on this, if you do consider such an option
Thanks,
Faizaan.
I ran the script using npx
.
Previously babel-preset-flow
was in devDependencies
only. After the script ran, @babel/preset-flow
was added both in dependencies
and devDependencies
.
Webpack: 1.13.2
Node: 8.9.1
npm: 5.6.0
package.json
{
"devDependencies": {
+ "@babel/core": "7.0.0-beta.39",
+ "@babel/polyfill": "7.0.0-beta.39",
+ "@babel/preset-env": "7.0.0-beta.39",
+ "@babel/preset-react": "7.0.0-beta.39",
+ "@babel/preset-stage-2": "7.0.0-beta.39",
+ "babel-loader": "v8.0.0-beta.0",
- "babel-core": "6.26.0",
- "babel-loader": "6.2.5",
- "babel-polyfill": "6.26.0",
- "babel-preset-env": "1.6.1",
- "babel-preset-react": "6.24.1",
- "babel-preset-stage-2": "6.24.1",
},
}
.babelrc
{
"presets": [
- ["env", {
- "targets": {
- "browsers": ["last 2 versions"]
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "browsers": [
+ "last 2 versions"
+ ]
+ }
}
- }],
- "react",
- "stage-2"
+ ],
+ "@babel/preset-react",
+ "@babel/preset-stage-2"
]
}
Error in console:
ERROR in multi app
Module not found: Error: Cannot resolve module 'babel-polyfill' in /home/andrew/w/projects/m-daiquiri-ui
@ multi app
ERROR in ./core/src/index.jsx
Module build failed: TypeError: fileSystem.statSync is not a function
at module.exports (/home/andrew/w/projects/m-daiquiri-ui/node_modules/babel-loader/lib/utils/exists.js:5:25)
at find (/home/andrew/w/projects/m-daiquiri-ui/node_modules/babel-loader/lib/resolve-rc.js:12:9)
at Object.module.exports (/home/andrew/w/projects/m-daiquiri-ui/node_modules/babel-loader/lib/index.js:121:132)
@ multi app
here is a repo with failing test https://github.com/entria/graphql-dataloader-boilerplate/blob/master/.babelrc#L13
plugins: [
"transform-export-extensions"
]
will fail in babel-upgrade
it will generate:
plugins: [
[
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-export-namespace-from",
]
]
instead of:
plugins: [
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-export-namespace-from",
]
When I run babel-upgrade, I get the following error. Can you help me understand how to solve this?
<--- Last few GCs --->
[14537:0x104800000] 166128 ms: Mark-sweep 1170.0 (1449.9) -> 1169.9 (1450.9) MB, 533.7 / 0.0 ms allocation failure GC in old space requested
[14537:0x104800000] 166712 ms: Mark-sweep 1169.9 (1450.9) -> 1169.9 (1408.4) MB, 584.6 / 0.0 ms last resort GC in old space requested
[14537:0x104800000] 167252 ms: Mark-sweep 1169.9 (1408.4) -> 1169.9 (1399.4) MB, 539.7 / 0.0 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x3a41d425529 <JSObject>
1: set(this=0x3a4c0417d69 <Map map = 0x3a4d43048d9>,0x3a424538509 <String[132]: Library/Containers/com.apple.iPhoto/Data/Pictures/iPhoto Library.migratedphotolibrary/Database/Places/29MgKImSQ9W2119InNuK%Q.applace>,0x3a40fd822d1 <undefined>)
2: createIndexRecord [/usr/local/lib/node_modules/babel-upgrade/node_modules/fast-glob/out/providers/filters/entry.js:~45] [pc=0x319e5e4a2ca](this=0x3...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/local/bin/node]
2: node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: v8::Utils::ReportOOMFailure(char const*, bool) [/usr/local/bin/node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
5: v8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
6: v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Allocate(v8::internal::Isolate*, int, v8::internal::PretenureFlag) [/usr/local/bin/node]
7: v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Rehash(v8::internal::Handle<v8::internal::OrderedHashMap>, int) [/usr/local/bin/node]
8: v8::internal::Runtime_MapGrow(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
9: 0x319e5d042fd
10: 0x319e5db251e
Abort trap: 6
packages that are used outside of the monorepo
Examples:
babel-loader
version "test": "mocha --compilers js:babel-register",
-> "test": "mocha --compilers js:@babel/register",
Basically people are going to complain because the output from babel after updating may be larger than before because the defaults are spec behavior.
Example:
-template-literals
- default was previously "spec" -> 'a' + b
-> "a".concat(b)
If we detect sub package.json files which I think we already do? From babel/babel#7358
Should be a straightforward change.
In a lerna monorepo the root's node_modules
will be ignored but not node_modules
from the packages. Is this intended behavior?
I am using my babel6 test repo https://github.com/Raigen/babel6-tmp
globby(['**/.babelrc', '!./node_modules/**'])
[ 'packages/pck1/.babelrc',
'packages/pck1/node_modules/pck2/.babelrc',
'packages/pck2/.babelrc' ]
With this pattern it works as I would expect it.
globby(['**/.babelrc', '!**/node_modules/**'])
[ 'packages/pck1/.babelrc', 'packages/pck2/.babelrc' ]
Especially for the package.json
this becomes a long list when dependencies are already installed via lerna bootstrap
when I run npx babel-upgrade
in the repo.
This does also caused me problems in our main project. I had a dist
directory with copied node_modules
still lying around and that was why babel-upgrade
did not updated the .babelrc
, because it found a lot of package.json
and it does not update .babelrc
when more than one package.json
is found.
Jest 24 has been released and no longer supports babel 6. https://jestjs.io/docs/en/getting-started#babel-6
Trying to run babel-upgrade against a package.json with Jest 24 tries to downgrade it and add babel-core back to the package.json.
$ npx babel-upgrade
npx: installed 192 in 7.723s
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating closest package.json dependencies
Index: /Users/rpierce/source/component-library/package.json
===================================================================
--- /Users/rpierce/source/component-library/package.json Before Upgrade
+++ /Users/rpierce/source/component-library/package.json After Upgrade
@@ -59,10 +59,11 @@
"@storybook/react": "^4.1.13",
"@types/node": "^8.10.40",
"apollo-cache-inmemory": "^1.4.3",
"apollo-client": "^2.4.13",
+ "babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
- "babel-jest": "^24.1.0",
+ "babel-jest": "^23.4.2",
"babel-loader": "^8.0.5",
"babel-plugin-inline-react-svg": "^1.0.1",
"browserslist": "^4.4.1",
"caniuse-db": "^1.0.30000939",
This seems to be the offending code.
babel-upgrade/src/upgradeDeps.js
Lines 74 to 87 in 73d855c
From what I can gather from the README, this tool should upgrade my .babelrc
file too, right?
I was running babel 6.x, it updated my package.json with dozens of "@babel/...": "7.0.0-beta.39"
lines but didn't touch my .babelrc
file.
Did it fail because I'm using json5 syntax perhaps? Here's my .babelrc file:
{
// babel uses json5 to parse this file; comments *are* allowed (https://github.com/kadirahq/react-storybook/issues/95#issuecomment-230488360)
"presets": ['@babel/preset-react'],
"plugins": [
// 'add-module-exports',
'syntax-flow',
'syntax-trailing-function-commas',
'check-es2015-constants',
'transform-flow-strip-types',
'transform-es3-member-expression-literals', // http://stackoverflow.com/a/33513000/65387
'transform-es3-property-literals',
'transform-es5-property-mutators',
// ['transform-es2015-modules-commonjs', {loose: true}], // https://babeljs.slack.com/archives/discussion/p1455667909000424 // Webpack 2 should have modules disabled
'transform-class-constructor-call',
'transform-class-properties',
'transform-decorators',
'transform-export-extensions',
'transform-object-rest-spread',
'transform-exponentiation-operator',
'transform-es2015-arrow-functions',
'transform-es2015-block-scoped-functions',
'transform-es2015-block-scoping',
['transform-es2015-classes', {loose: true}], // https://gist.github.com/zertosh/4f818163e4d68d58c0fa, https://github.com/babel/babelify/issues/133
// 'transform-proto-to-assign',
'transform-es2015-computed-properties',
'transform-es2015-destructuring',
'transform-es2015-for-of',
'transform-es2015-function-name',
'transform-es2015-literals',
'transform-es2015-object-super',
'transform-es2015-parameters',
'transform-es2015-shorthand-properties',
'transform-es2015-spread',
'transform-es2015-sticky-regex',
'transform-es2015-template-literals',
'transform-es2015-typeof-symbol',
'transform-es2015-unicode-regex',
['transform-runtime', {"polyfill": true, "regenerator": false}],
// http://stackoverflow.com/a/28709165/65387
// 'syntax-async-functions',
// ['fast-async',{
// compiler: {
// promises: true,
// generators: false
// }
// }],
// 'transform-async-to-generator',
// 'transform-regenerator',
// ['transform-async-to-module-method', {
// module: 'bluebird',
// method: 'coroutine'
// }],
//
// // 'transform-async-to-generator',
// ['transform-regenerator', { // http://babeljs.io/docs/plugins/transform-regenerator/
// asyncGenerators: false, // true by default
// generators: true, // true by default
// async: false // true by default
// }],
],
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
"transform-react-inline-elements",
"transform-react-constant-elements"
]
}
},
"compact": false
}
NOTE: Compatibility with
@babel/plugin-proposal-class-properties
If you are including your plugins manually and using@babel/plugin-proposal-class-properties
, make sure that@babel/plugin-proposal-decorators
comes before@babel/plugin-proposal-class-properties
.
$ npx babel-upgrade
npx: installed 192 in 54.298s
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating .babelrc config at .babelrc
Index: .babelrc
===================================================================
--- .babelrc Before Upgrade
+++ .babelrc After Upgrade
@@ -15,10 +15,9 @@
"useBuiltIns": "entry",
"modules": false
}
],
- "@babel/preset-react",
- "@babel/preset-stage-0"
+ "@babel/preset-react"
],
"env": {
"development": {
"plugins": [
@@ -48,7 +47,33 @@
{
"libraryName": "antd",
"libraryDirectory": "lib"
}
- ]
+ ],
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-syntax-import-meta",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-json-strings",
+ [
+ "@babel/plugin-proposal-decorators",
+ {
+ "legacy": true
+ }
+ ],
+ "@babel/plugin-proposal-function-sent",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-proposal-numeric-separator",
+ "@babel/plugin-proposal-throw-expressions",
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-logical-assignment-operators",
+ "@babel/plugin-proposal-optional-chaining",
+ [
+ "@babel/plugin-proposal-pipeline-operator",
+ {
+ "proposal": "minimal"
+ }
+ ],
+ "@babel/plugin-proposal-nullish-coalescing-operator",
+ "@babel/plugin-proposal-do-expressions",
+ "@babel/plugin-proposal-function-bind"
]
}
\ No newline at end of file
babel-upgrade explodes all of the stage presets that we had into the individual plugins, which is great - but it doesn't add these plugins to our package.json for installation so we had to do this manually. Is this expected, or should it have inserted the plugins into package.json itself?
babel-upgrade output,
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating .babelrc config at .babelrc
Index: .babelrc
===================================================================
--- .babelrc Before Upgrade
+++ .babelrc After Upgrade
@@ -1,28 +1,69 @@
{
"presets": [
[
- "es2015",
+ "@babel/preset-env",
{
"modules": false
}
],
- "es2016",
- "es2017",
- "react",
- "stage-2"
+ "@babel/preset-env",
+ "@babel/preset-env",
+ "@babel/preset-react",
+ "@babel/preset-flow"
],
"plugins": [
"emotion",
- "transform-async-to-generator",
- "react-hot-loader/babel"
+ "@babel/plugin-transform-async-to-generator",
+ "react-hot-loader/babel",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-syntax-import-meta",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-json-strings",
+ [
+ "@babel/plugin-proposal-decorators",
+ {
+ "legacy": true
+ }
+ ],
+ "@babel/plugin-proposal-function-sent",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-proposal-numeric-separator",
+ "@babel/plugin-proposal-throw-expressions"
],
"env": {
"test": {
"presets": [
- "es2015",
- "react",
- "stage-0"
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ],
+ "plugins": [
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-syntax-import-meta",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-json-strings",
+ [
+ "@babel/plugin-proposal-decorators",
+ {
+ "legacy": true
+ }
+ ],
+ "@babel/plugin-proposal-function-sent",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-proposal-numeric-separator",
+ "@babel/plugin-proposal-throw-expressions",
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-logical-assignment-operators",
+ "@babel/plugin-proposal-optional-chaining",
+ [
+ "@babel/plugin-proposal-pipeline-operator",
+ {
+ "proposal": "minimal"
+ }
+ ],
+ "@babel/plugin-proposal-nullish-coalescing-operator",
+ "@babel/plugin-proposal-do-expressions",
+ "@babel/plugin-proposal-function-bind"
]
}
}
}
\ No newline at end of file
Updating closest package.json dependencies
Index: /Users/camron/src/lodgetools/inntender/package.json
===================================================================
--- /Users/camron/src/lodgetools/inntender/package.json Before Upgrade
+++ /Users/camron/src/lodgetools/inntender/package.json After Upgrade
@@ -27,15 +27,15 @@
}
},
"proxy": "https://inntender.dev",
"dependencies": {
+ "@babel/core": "^7.0.0",
+ "@babel/plugin-transform-async-to-generator": "^7.0.0",
+ "@babel/polyfill": "^7.0.0",
+ "@babel/preset-react": "^7.0.0",
"autoprefixer": "^8.4.1",
"axios": "^0.18.0",
- "babel-core": "^6.26.3",
"babel-plugin-emotion": "^9.1.2",
- "babel-plugin-transform-async-to-generator": "^6.24.1",
- "babel-polyfill": "^6.26.0",
- "babel-preset-react": "^6.24.1",
"bootstrap": "3.3.7",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"csso": "^3.1.1",
@@ -61,24 +61,24 @@
"redux": "^4.0.0",
"style-loader": "^0.21.0"
},
"devDependencies": {
+ "@babel/cli": "^7.0.0",
+ "@babel/core": "^7.0.0",
+ "@babel/preset-env": "^7.0.0",
+ "@babel/preset-flow": "^7.0.0",
"@kadira/storybook-addons": "^1.6.1",
"@storybook/addon-info": "^3.4.3",
"@storybook/addon-knobs": "^3.4.3",
"@storybook/addon-options": "^3.4.3",
"@storybook/react": "^3.4.3",
"axios-mock-adapter": "^1.15.0",
- "babel-cli": "^6.26.0",
- "babel-eslint": "^8.2.3",
- "babel-jest": "^22.4.3",
- "babel-loader": "^7.1.4",
+ "babel-core": "^7.0.0-bridge.0",
+ "babel-eslint": "^9.0.0",
+ "babel-jest": "^23.4.2",
+ "babel-loader": "^8.0.0",
"babel-minify": "^0.4.3",
"babel-plugin-add-module-exports": "^0.2.1",
- "babel-preset-es2015": "^6.24.1",
- "babel-preset-es2016": "^6.24.1",
- "babel-preset-es2017": "^6.24.1",
- "babel-preset-flow": "^6.23.0",
"compression-webpack-plugin": "^1.1.11",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.4.0",
"eslint-plugin-flowtype": "^2.46.3",
Looking for projects with .babelrc
on github. Then run the command and check tests!
@babel/core
babel-register
in npm scriptsmocha.opts
.babelrc
#14"babel-core": "^7.0.0-bridge-0"
#15@babel/node
package if using babel-node
webpack.config.js
or js file configscc @eventualbuddha planning on using babel-codemod for the js changes
Tracked in the readme already but made an issue since not many people read the readme
We should use jscodeshift/babel-codemod for this.
.babelrc.js
, babel.config.js
, a preset written in JS, or a babel config written via @babel/core
options or babel-loader
.babel-types
to @babel/types
When upgrading from beta <=55 to beta >=56 we should handle babel/babel#8266
https://twitter.com/kentcdodds/status/976808822307094528
Should be easy to do. Detect if lodash is used as a direct dependency and then add a new plugin? Not sure about the version or if we need to use the "latest version" package on npm to do that.
Things in babel/notes#30. Related to #39
Example:
- file.delete('espowerAssertionVisitor');
+ file.set('espowerAssertionVisitor', null);
We need to have at least one test for src/bin
(run on real files).
Idea: git checkout a repo/commit, run the command, snapshot the git diff
on the files changed?
Before release I try to run on a real folder anyway but this would be nice.
I just ran the babel-upgrade command. However, the output resulted in one plugin being set twice, which when running build threw an error about their being a duplicate plugin.
Ideally, this babel-upgrade plugin would check for duplicate entries and remove.
here was my previous .babelrc, and .after
{
"plugins": [
"syntax-dynamic-import",
"inline-react-svg",
["babel-plugin-styled-components", { "ssr": true, "displayName": false }]
],
"presets": [
[
"env",
{
"targets": {
"browsers": ["firefox >= 52"]
},
"modules": false
}
],
"stage-2",
"flow",
"react"
],
"env": {
"development": {
"plugins": ["babel-plugin-idx"]
},
"production": {
"plugins": ["babel-plugin-idx"]
},
"test": {
"presets": [["env"], "react", "stage-2", "flow"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
{
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"inline-react-svg",
["babel-plugin-styled-components", { "ssr": true, "displayName": false }],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
],
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["firefox >= 52"]
},
"modules": false
}
],
"@babel/preset-flow",
"@babel/preset-react"
],
"env": {
"development": {
"plugins": ["babel-plugin-idx"]
},
"production": {
"plugins": ["babel-plugin-idx"]
},
"test": {
"presets": [
["@babel/preset-env"],
"@babel/preset-react",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
]
}
}
}
npx: installed 192 in 4.186s
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating .babelrc config at .babelrc
Index: .babelrc
===================================================================
--- .babelrc Before Upgrade
+++ .babelrc After Upgrade
@@ -1,19 +1,33 @@
{
"plugins": [
- "syntax-dynamic-import",
+ "@babel/plugin-syntax-dynamic-import",
"inline-react-svg",
[
"babel-plugin-styled-components",
{
"ssr": true,
"displayName": false
}
- ]
+ ],
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-syntax-import-meta",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-json-strings",
+ [
+ "@babel/plugin-proposal-decorators",
+ {
+ "legacy": true
+ }
+ ],
+ "@babel/plugin-proposal-function-sent",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-proposal-numeric-separator",
+ "@babel/plugin-proposal-throw-expressions"
Is this package "somewhat ready" yet -- ready enough to move into the monorepo?
I install babel-upgrade
globally, and then run babel-upgrade --help
, it outputs as the same of "without parameter": check package.json
& show the diff result.
I think it should show the Command-line usage, or "Unknown --help parameter" at least...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.