I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
Error Stack Trace:
App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
...(options?.jsxRuntime !== 'classic' && {
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadCjsDefault (/Users/user/path/to/project/node_modules/#babel/core/lib/config/files/module-types.js:85:18)
at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/#babel/core/lib/config/files/module-types.js:57:16)
Here is my babel.config.js:
return {
presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
plugins: [
['inline-dotenv'],
['.....']
]
}
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.16.5",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/datetimepicker": "4.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "7.1.3",
"#react-native-community/push-notification-ios": "^1.2.2",
"#react-native-community/slider": "4.1.12",
"#react-navigation/native": "^5.1.4",
"aws-amplify": "^3.3.1",
"aws-amplify-react-native": "^4.2.6",
"axios": "^0.19.2",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-barcode-scanner": "~11.2.0",
"expo-camera": "~12.1.0",
"expo-constants": "~13.0.0",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-mail-composer": "~11.1.0",
"expo-notifications": "~0.14.0",
"expo-permissions": "~13.1.0",
"expo-secure-store": "~11.1.0",
"expo-sqlite": "~10.1.0",
"expo-updates": "~0.11.2",
"expo-web-browser": "~10.1.0",
"file-saver": "^2.0.2",
"jsbarcode": "^3.11.3",
"link": "^0.1.5",
"metro-config": "^0.64.0",
"npm": "^8.3.0",
"qs": "^6.9.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-barcode-expo": "^1.1.1",
"react-native-elements": "^3.2.0",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~2.1.0",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^8.6.0",
"react-native-paper": "^3.10.1",
"react-native-push-notification": "^3.5.2",
"react-native-reanimated": "~2.3.1",
"react-native-router-flux": "^4.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"react-navigation-animated-switch": "^0.6.4",
"react-navigation-drawer": "^2.4.11",
"react-navigation-header-buttons": "^3.0.5",
"react-router-dom": "^6.0.0-alpha.3",
"yarn": "^1.22.17"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^0.0.7",
"babel-jest": "^25.1.0",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-preset-expo": "9.0.1",
"eslint": "^6.8.0",
"expo-cli": "^5.0.2",
"jest": "^26.6.3",
"jest-expo": "^44.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^16.13.1"
},
"private": true
}
Any help will be greatly appreciated.
can you give your
package.json
node version
I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining
Just to let you know, it's a bug in babel-preset-expo when you are using Node 12.
Optional chainning is not supported in node12 and can be easily replaced with extra checks
https://github.com/expo/expo/pull/15545
From what I can see, Expo SDK 44 is still in beta.
The Error Stack Trace reads that newer syntax (in this case the optional chaining operator ?.) isn't being transpiled by Babel which causes the failure.
Simply downgrading to the stable SDK 43 should solve all issues.
P.S: This error has been reported to Expo already by the beta testers.
If you use expo v44 you have to update babel-preset-expo dev dependency to v9.0.2:
"babel-preset-expo": "9.0.2",
Downgrading to SDK 43.0.0 worked fine for me:
expo update 43.0.0
Related
I have created a docusaurus project. It was working fine. I added material ui search bar in the landing page. I am using github actions to deploy the project(CI/CD). Now when i push the code, iam getting this error.
[ERROR] TypeError: dep.getModuleEvaluationSideEffectsState is not a function
at NormalModule.getSideEffectsConnectionState (/github/workspace/website/node_modules/webpack/lib/NormalModule.js:1126:23)
at /github/workspace/website/node_modules/webpack/lib/optimize/SideEffectsFlagPlugin.js:244:19
at Hook.eval [as call] (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:16)
at Hook.CALL_DELEGATE [as _call] (/github/workspace/website/node_modules/tapable/lib/Hook.js:14:14)
at Compilation.seal (/github/workspace/website/node_modules/webpack/lib/Compilation.js:2804:42)
at /github/workspace/website/node_modules/webpack/lib/Compiler.js:1187:20
at /github/workspace/website/node_modules/webpack/lib/Compilation.js:2757:4
at _next2 (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
at eval (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:71:1)
at /github/workspace/website/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
I am not sure how to solve this. I have also attached package.json file.
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
"engines": {
"node": ">=16.14.0"
},
"dependencies": {
"#azure/msal-browser": "^2.28.0",
"#azure/msal-react": "^1.4.4",
"#docusaurus/core": "^2.0.0-rc.1",
"#docusaurus/plugin-client-redirects": "^2.1.0",
"#docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"#docusaurus/preset-classic": "^2.0.0-rc.1",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/react-fontawesome": "^0.1.18",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.10.8",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"clsx": "^1.1.1",
"docker": "^1.0.0",
"docusaurus": "^1.14.7",
"docusaurus-lunr-search": "^2.1.15",
"docusaurus-pdf": "^1.2.0",
"docusaurus2-dotenv": "^1.4.0",
"env-cmd": "^10.1.0",
"jquery": "^3.6.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-markdown-editor-lite": "^1.3.2",
"react-paginate": "^8.1.3",
"react-player": "^2.10.1",
"react-scripts": "^5.0.1"
}
}
Can someone help me with this?
Are you using the plugin docusaurus2-dotenv?
We found the same problem here, and the root cause is this plugin. We remove this plugin from the package.json and from the docusaurus.config.js. We replaced it inside the docusaurus.config.js with the plugin docusaurus-plugin-dotenv, like this:
// Before
plugins:
[
// Other plugins
['docusaurus2-dotenv', { systemvars: true }],
]
// After
plugins:
[
// Other plugins
[
'docusaurus-plugin-dotenv',
{
path: "./.env",
systemvars: true,
}
]
]
This error occurs because the plugin 'docusaurus2-dotenv' is depreciated, although the docusaurus documentation itself recommends using it.
After removing it from our project, we noticed that even some vulnerabilities have gone away.
Here's the link of the new plugin: docusaurus-plugin-dotenv
Pls anyone help me how to fix this error "ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'."
i have tried many things like deleting node modules npm install deprecated-react-native-prop-types but nothing works for me how can i fix now
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/compat": "^5.3.20",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"deprecated-react-native-prop-types": "^2.3.0",
"expo": "^46.0.0",
"expo-av": "~12.0.4",
"expo-linear-gradient": "~11.4.0",
"expo-status-bar": "~1.4.0",
"haversine": "^1.1.1",
"invariant": "^2.2.4",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-animatable": "^1.3.3",
"react-native-flexi-radio-button": "^0.2.2",
"react-native-fontawesome": "^7.0.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-modal": "^13.0.0",
"react-native-modalize": "^2.0.8",
"react-native-progress-circle": "^2.1.0",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"rn-sliding-up-panel": "^2.4.5"
},
"devDependencies": {
"#babel/core": "^7.18.6"
},
"private": true
}
babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };
You will need to check all of the downloaded dependencies in the node_modules folder which contains the following import statement.
import { ViewPropTypes } from 'react-native';
Change it imports from deprecated-react-native-prop-types manually.
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
In addition to kiuQ's answer, react-native-progress-circle is most likely the problem here. It has been deprecated, and the ViewPropTypes is a known issue in that package.
Remove it from your project, or simply replace it with https://www.npmjs.com/package/progress-circle-react-native
I am failing to install iOS dependencies using pod install annd after pressing enter button to run pod install.
Node Version: v16.16.0
NPM Version: 8.11.0
Working Process which I followed:
First way to install pod: Firstly install npm then install pod
Second way to install pod: after deleting node_modules then run pod install
Failed to install to follow the both of rules as mentioned before and to check the error, please check the attached file.
The dependencies are install in our projects as given below as package.json file.
{
"name": "shohan",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.16.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cli-platform-ios": "^8.0.6",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "^6.1.2",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.2",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.26.1",
"moment": "^2.29.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-hook-form": "^7.28.1",
"react-native": "0.67.3",
"react-native-animatable": "^1.3.3",
"react-native-audio-record": "^0.2.2",
"react-native-bar-chart": "^0.1.0",
"react-native-countdown-component": "^2.7.1",
"react-native-date-picker": "^4.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elevation": "^1.0.0",
"react-native-emoji-selector": "^0.2.0",
"react-native-fs": "^2.20.0",
"react-native-image-picker": "^4.8.4",
"react-native-infinite-scrolling": "^2.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-pager-view": "^5.4.15",
"react-native-paper": "^4.12.1",
"react-native-picker-select": "^8.0.4",
"react-native-pure-chart": "^0.0.24",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "^0.11.2",
"react-native-step-indicator": "^1.0.3",
"react-native-super-grid": "^4.4.0",
"react-native-svg": "^12.4.0",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-tab-view": "^3.1.1",
"react-native-text-gradient": "^0.1.7",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/runtime": "^7.17.2",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.11.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Here is the Podfile's code is given below,
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'shohan' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'shohanTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
The occurred error is given in the attached file please check it and help me.
I´ve got this error when try to run npm run dev after installed the dependencies and i cant find why. Help me please.
I tried some things that found around the internet but none of that worked
plusholidays-app#1.0.0 dev
> nuxt
"F\plusholidays-app\node_modules\.bin\" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'C:\Users\anyel\Documents\src\nuxt\bin\nuxt.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Here is the package.json
{
"name": "plusholidays-app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/moment": "^1.6.1",
"#nuxtjs/proxy": "^2.1.0",
"apexcharts": "^3.26.0",
"core-js": "^3.9.0",
"js-cookie": "^2.2.1",
"leaflet": "^1.7.1",
"lodash.clonedeep": "^4.5.0",
"nuxt": "^2.15.2",
"nuxt-i18n": "^6.21.1",
"vue-advanced-cropper": "^1.3.2",
"vue-apexcharts": "^1.6.0",
"vue-the-mask": "^0.11.1",
"vue2-leaflet": "^2.6.0"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-config-prettier": "^8.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.6.0",
"prettier": "^2.2.1"
}
}
I really want to understand what is going on here, but I'm at a bit of a loss as to where to look next. Any suggestions?
Try and install nuxt-start package.
This is what I used to solve a very similar challenge (On Production)
where you node_modules? C:\Users\anyel\Documents\src\nuxt\bin\nuxt.js
try path: script: './node_modules/nuxt/bin/nuxt.js',
I want to create an apk . i am using expo bare project and i am using this command to create the apk for android
cd android && ./gradlew assembleRelease
and i am getting this error every time when i run the command .
here is the error
I have also tried to create the apk for a boilerplate app and that's working fine
but i am getting the error from this one i was using this command before
expo build:android
but by using this command by has a large size so i want to decrease its size that's why i am using
cd android && ./gradlew assembleRelease
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':expo-permissions:compileReleaseKotlin'.
> Compilation error. See log for more details
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.3/userguide/command_line_interface.html#sec:command_line_warnings
Package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#expo-google-fonts/montserrat": "^0.1.0",
"#expo-google-fonts/oswald": "^0.1.0",
"#expo-google-fonts/playfair-display": "^0.1.0",
"#react-native-community/cli-platform-ios": "^4.13.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.2",
"#react-native-community/slider": "^3.0.0",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/material-top-tabs": "^5.3.10",
"#react-navigation/native": "^5.6.1",
"#react-navigation/stack": "^5.6.2",
"#unimodules/core": "~6.0.0",
"base64-arraybuffer": "^0.2.0",
"expo": "~40.0.0",
"expo-av": "~8.7.0",
"expo-camera": "~9.1.0",
"expo-constants": "~9.3.3",
"expo-file-system": "~9.3.0",
"expo-image-picker": "~9.2.0",
"expo-linear-gradient": "^8.4.0",
"expo-localization": "~9.1.0",
"expo-location": "~10.0.0",
"expo-media-library": "~10.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-updates": "~0.4.0",
"i18n-js": "^3.8.0",
"import": "^0.0.6",
"localstorage-polyfill": "^1.0.1",
"moment": "^2.29.1",
"native-base": "^2.13.14",
"query-string": "^6.13.7",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-deck-swiper": "^2.0.5",
"react-native-dropdown-picker": "^3.7.6",
"react-native-easy-grid": "^0.2.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-material-menu": "^1.2.0",
"react-native-paper": "^4.1.0",
"react-native-reanimated": "~1.13.0",
"react-native-responsive-fontsize": "^0.5.0",
"react-native-responsive-screen": "^1.4.1",
"react-native-safe-area-context": "~3.1.9",
"react-native-screens": "~2.15.0",
"react-native-size-matters": "^0.3.1",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.15.2",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12",
"react-native-webview": "^11.0.0",
"react-navigation": "^4.4.0",
"socket.io-client": "^2.3.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
For bare workflow, you have to exclude expo-permissions module:
android/app/build.gradle:
Replace:
addUnimodulesDependencies()
with
addUnimodulesDependencies([exclude: ['expo-permissions']])
for iOS in Podfile:
Replace:
use_unimodules!
with
use_unimodules!(exclude: ['expo-permissions'])
The solution was posted here : https://github.com/expo/expo/issues/10283