Babel preset env not targeting correct env - babeljs

I may be confused as to what babel-preset-env actually does. My assumption is that it would transpile my code for my targeted browsers including any necessary polyfills. This doesn't appear to be the case in my code though...
My code:
import "babel-polyfill"
...
var k = Object.values({ x: 's' });
My babel settings:
"presets": [
[ "env", {
"useBuiltIns": true,
"targets": {
"browsers": ["last 2 versions", "IE 10"]
}
}]
]
The transpiled code still contains Object.values and IE 10 dies quietly (it does transpile - I can see the rest of the code changing - just seems to target wrong).
Package.json (some of these imports are not in use):
"core-js": "^2.5.1",
"opentype.js": "^0.7.2",
"svg.draggable.js": "^2.2.1",
"svg.js": "^2.6.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-latest": "^6.24.1",
"babel-register": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.0.1",
"imports-loader": "^0.7.1",
"mocha": "^3.5.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2",
"webpack-merge": "^4.1.0"

babel-preset-env in its default state only handles converting syntax, not polyfilling standard library functionality.
Sounds like you'll want useBuiltins: true in your config. You'll also need to follow the other instructions there by installing core-js and adding an import for babel-polyfill.
Alternatively you can just load babel-polyfill itself and not rely on babel-preset-env at all.

Related

Installing React Native Firebase fails at compiling RingBuffer.swift

I am attempting to implement RNFB to my react-native project. for iOS the pods install just fine. However, when I run npm run iOS I get the following error and crash report:
❌ /Users/[Redacted]/Documents/GitHub/[Redacted]/ios/Pods/FirebaseCoreInternal/FirebaseCore/Internal/Sources/HeartbeatLogging/RingBuffer.swift:19:35: reference to generic type 'Array' requires arguments in <...>
case outOfBoundsPush(pushIndex: Array.Index, endIndex: Array.Index)
I was able to find this article that was very recent and it appears to be what I'm looking for but I have absolutely no idea what it says... google translate helps a little bit but I do not know enough to be able to infer a solution.
honestly I do not really even need anything related to heartbeat from firebase. I just need to use the Firebase Analytics and Google Analytics capabilities. But this package came with it and I don't see a way to tell it not to compile.
Regardless, I attempted to downgrade to a lower version of RNFB, I believe I it was version 15.4.0 -> 15.0.0 to see if maybe the new package was the problem but I still get the same errors.
I tried modifying the RingBuffer.swift file... but the file is read-only.
This issue is happening in other FirebaseCore/Internal files...
The following build commands failed:
CompileSwiftSources normal x86_64 com.apple.xcode.tools.swift.compiler
CompileSwift normal x86_64 /Users/[Redacted]/Documents/GitHub/[Redacted]/ios/Pods/FirebaseCoreInternal/[Redacted]/Internal/Sources/HeartbeatLogging/HeartbeatController.swift
CompileSwift normal x86_64 /Users/[Redacted]/Documents/GitHub/[Redacted]/ios/Pods/FirebaseCoreInternal/FirebaseCore/Internal/Sources/HeartbeatLogging/HeartbeatsBundle.swift
CompileSwift normal x86_64 /Users/[Redacted]/Documents/GitHub/[Redacted]/ios/Pods/FirebaseCoreInternal/FirebaseCore/Internal/Sources/HeartbeatLogging/HeartbeatsPayload.swift
CompileSwift normal x86_64 /Users/[Redacted]/Documents/GitHub/[Redacted]/ios/Pods/FirebaseCoreInternal/FirebaseCore/Internal/Sources/HeartbeatLogging/RingBuffer.swift
here is my package.json file
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest",
"debug-build-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"build-android": "./android/gradlew ./android/assembleRelease"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.13.4",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "^5.9.9",
"#react-native-firebase/app": "^15.0.0",
"#react-navigation/bottom-tabs": "^5.11.2",
"#react-navigation/drawer": "^5.11.4",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"axios": "^0.21.1",
"expo": "~40.0.0",
"expo-app-loading": "1.0.3",
"expo-asset": "~8.2.1",
"expo-blur": "~8.2.2",
"expo-file-system": "~9.3.0",
"expo-gl": "^9.2.0",
"expo-keep-awake": "~8.4.0",
"expo-screen-orientation": "^3.3.0",
"expo-splash-screen": "~0.8.1",
"expo-three": "^5.5.1",
"expo-updates": "~0.4.0",
"expo-web-browser": "~8.6.0",
"immutability-helper": "^3.1.1",
"lodash.throttle": "^4.1.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-background-downloader": "^2.3.4",
"react-native-base64": "^0.2.1",
"react-native-elements": "3.4.1",
"react-native-fast-image": "^8.3.4",
"react-native-gesture-handler": "~1.8.0",
"react-native-maps": "^0.27.1",
"react-native-reanimated": "~1.13.0",
"react-native-render-html": "^5.0.1",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "~2.15.0",
"react-native-toast-message": "1.4.9",
"react-native-unimodules": "~0.12.0",
"react-native-video": "^5.2.0",
"react-native-view-pdf": "^0.13.2",
"react-native-webview": "11.0.0",
"react-native-zip-archive": "^6.0.2",
"react-navigation-header-buttons": "^7.0.1",
"react-redux": "^7.2.2",
"react-three-fiber": "^5.3.21",
"realm": "^10.4.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"three": "0.123.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#testing-library/react-native": "^7.2.0",
"#types/jest": "^26.0.19",
"#types/lodash.throttle": "^4.1.6",
"#types/react": "^17.0.0",
"#types/react-native": "^0.63.40",
"#types/react-native-background-downloader": "^2.3.3",
"#types/react-native-base64": "^0.2.0",
"#types/react-native-video": "^5.0.10",
"#types/react-redux": "^7.1.14",
"#types/react-test-renderer": "^17.0.0",
"#types/redux-mock-store": "^1.0.3",
"#types/three": "^0.125.3",
"babel-jest": "^25.2.6",
"jest": "~25.2.6",
"jest-expo": "^42.1.0",
"react-test-renderer": "~16.13.1",
"redux-mock-store": "^1.5.4",
"ts-node": "^10.2.1",
"typescript": "^4.1.3"
},
"jest": {
"preset": "jest-expo"
},
"private": true,
"version": "1.0.1"
}
here is my pod file
$RNFirebaseAsStaticFramework = true #firebase requires static frameworkds
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target '[Redacted]' do
use_unimodules!
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])
# react native firebase requires frameworks...
use_frameworks!
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
# use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
config.build_settings['SWIFT_VERSION'] = '5.0'
end
end
flipper_post_install(installer)
end
end
Xcode Version : Version 13.4.1 (13F100)
some lines have been removed for anonymity.
I was able to fix this compilation error by overwriting the specified pod dependency .swift file with modifications to the following code block
//dependency errors at this point in the file
case outOfBoundsPush(pushIndex: Array.Index, endIndex: Array.Index)
//adding a type definition for the array fixes compilation error
case outOfBoundsPush(pushIndex: Array<Any>.Index, endIndex: Array<Any>.Index)
now if only I knew where to report the pod file discrepancy. Or if anyone would like to tell me why the pod file is packaged improperly for my compiler to understand?
Firebase's minimum supported Swift Version is 5.3 - so the override in the Podfile's post_install script may be the issue. Try deleting or updating config.build_settings['SWIFT_VERSION'] = '5.0'

VSCode extension dependencies installation when installing extension

I've create an extension for visual studio code.
In my package.json, I've a big list of dependencies :
"dependencies": {
"#types/fs-extra": "^8.0.0",
"#types/puppeteer-core": "^2.0.0",
"#types/yamljs": "^0.2.30",
"anchor-markdown-header": "^0.5.7",
"clone": "^2.1.2",
"dedent": "^0.7.0",
"front-matter": "^3.0.2",
"fs-extra": "^8.1.0",
"get-port": "^5.1.1",
"highlight.js": "^9.18.0",
"localized-resource-manager": "^1.2.0",
"markdown-it": "^10.0.0",
"markdown-it-anchor": "^5.2.5",
"markdown-it-checkbox": "^1.1.0",
"markdown-it-emoji": "^1.4.0",
"markdown-it-table-of-contents": "^0.4.4",
"multi-integer-range": "^4.0.8",
"mustache": "^4.0.0",
"puppeteer-core": "^2.1.1",
"rxjs": "^6.5.4",
"serve-handler": "^6.1.2",
"simple-git": "^1.131.0",
"string-template": "^1.0.0",
"svn-spawn": "^0.1.6",
"temp-filesystem": "^1.1.3",
"transliteration": "^2.1.8",
"twemoji": "^12.1.5",
"utf8": "^3.0.0",
"website-scraper": "^4.2.0",
"yamljs": "^0.3.0"
},
My problem is that I need to embed all these dependencies (and their dependencies) in my package node_modules folder.
So my package consists now of more than 5000 files and more than 300 MB.
Is there a way to not include the node_modules folder in the package but tell to vscode to install them when installing my extension ?
Thanks :)

How to fix Error cannot find module 'core-js/es6'

I have been getting an error regardless of what I do. In fact I am building an app with mongoDB as a server using mongoose and babel-watch, but every time I run babel-watch I get this error:
Error cannot find module 'core-js/es6'
I have installed and reinstalled core.js using npm install core.js, however nothing changes. Please help.
These are the dependencies I have installed on my project:
"dependencies": {
"body-parser": "^1.19.0",
"core-js": "^2.6",
"cuid": "^2.1.6",
"express": "^4.17.1",
"limax": "^1.7.0",
"mongoose": "^5.6.9",
"node-gyp": "^5.0.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-watch": "^7.0.0",
"nodemon": "^1.19.1"
}
}
Code error seen from terminal after running npm start
For core.js v3.9 import in App.tsx the next line: import "core-js/es";
Given that you are using core-js v2.6.9, your path should be core-js/library/es6 as the example shows you in the documentation here.

.babelrc `ignore` option is not ignoring the files that I want to be ignored

So the title pretty much explains my problem. I don't want babel to be transpiling some files that are nested within my folder structure, but I can't get it to work.
my babelrc file:
{
"presets" : ["es2015", "react", "stage-0", "es2017"],
"plugins": [
"transform-regenerator",
"transform-async-to-generator",
"transform-object-rest-spread",
],
"env": {
"development": {
"presets": ["react-hmre"]
}
},
"ignore": [
"node_modules",
"dist",
"public",
"src/client",
]
}
And my babel packages:
{
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^6.4.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-regenerator": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0","babel-register": "^6.18.0",
}
Any help would be greatly, greatly appreciated.
I believe you can do this through the CLI, but I'd much rather do it through the .babelrc file.
Thanks!
You just need to add --no-copy-ignored param to the end of your build script
babel src --out-dir lib --copy-files --no-copy-ignored
If you're using .babelrc or .babelrc.json, add ignore section to the root;
"ignore": [
"**/*.test.js"
]
Note: Tested on Babel 7.x
According to https://github.com/babel/babel/issues/5532#issuecomment-288755557:
There are some issues with ignore/only that we are fixing in 7.0
You could see if Babel 7 works well enough for you! According to their blog, it seems like it's working fine.
Otherwise, you might just be stuck doing it through the CLI for now.
https://github.com/babel/babel/pull/5487 seems to be the PR that fixed this issue for Babel 7.x.

Unable to get arrow function to work

I am trying to upgrade to es6 for an existing project with Babel. My package.json contains the babel plugins:
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.8.0",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"eslint": "^2.9.0",
"material-ui": "^0.15.0",
"node-sass": "^3.5.3",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.12.1"
My .babelrc file the following:
{
"presets": ["es2015", "stage-1", "react"],
"plugins": [
"transform-es2015-arrow-functions",
"transform-class-properties"
]
}
And my webpack file contains the following:
```
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]}
```
And I run my node app with the following command:
cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"
I am using a toggle function with material-ui in order to get Drawer component triggered by a hamburger menu in the Appbar component.
The Toggle functions are as follows (as per documentation)
```
handleToggle = () => this.setState({open: !this.state.open});
handleClose = () => this.setState({open: false});
``
However, whenever I run this I get the following error:
Unexpected token (29:16)
27 |
28 |
> 29 | handleToggle () => this.setState({open: !this.state.open});
| ^
30 |
If I change the function from arrow to a more old-school approach I can get it to work i.e.
handleToggle() {
this.setState({open: !this.state.open});
alert("handleToggle clicked");
}
However, I do not want to have to customise every component in material-ui in order to enable it to be backwards compatible. How do I upgrade my code without getting errors?