React Native Metro Bundler issue with invalid left side AssingmentExpression - react-native

I'm just simply trying to start metro bundler to serve the app. Here's the error:
TypeError: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "StringLiteral"
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/definitions/utils.js:128:13)
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/validators/validate.js:17:9)
at NodePath._replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:194:9)
at NodePath.replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:178:8)
at PluginPass.MemberExpression (/Users/tyler/Code/.../node_modules/babel-plugin-transform-inline-environment-variables/lib/index.js:19:18)
at newFn (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/context.js:118:16)
which means something like Platform.OS = "ios" is transformed into "ios" = "ios": like so <- That PR also addresses the TypeError being thrown for the process.env which seems to be the case for me. My stack trace references ...babel-plugin-transform-inline-environment-variables/lib/index.js:19:18 which deals exclusively with setting process.env. There are only two places in my code using a var from process.env and neither are used on the left side of an assignment.
PR 45 for the metro bundler was merged way back in 2017 though. And I'm using the latest version btw, this is occurring when trying to start up the bundler with the script "NODE_ENV=development npm start -- --reset-cache". Note that I am using the reset cache flag as mentiond here
A coworker suggested the error may be cause by a react-native plugin, but I haven't uncovered it yet if that is the case. We did just migrate this app to Babel 7, fyi. I'm hitting a wall now on ideas and the google trail is growing stale. What else could be the cause of this error?
Here are the dependencies from my package.json in case it helps:
}
...
"dependencies": {
"#babel/runtime": "^7.0.0",
"lodash.capitalize": "^4.2.1",
"lodash.debounce": "^4.0.8",
"lodash.find": "^4.6.0",
"phoenix": "^1.3.4",
"prettier": "^1.14.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-native": "0.57.0",
"react-native-firebase": "^4.3.8",
"react-native-keep-awake": "^3.1.0",
"react-native-linear-gradient": "^2.4.2",
"react-native-router-flux": "^4.0.1",
"react-native-swiper": "^1.5.13",
"react-native-tts": "^2.0.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"spokestack-react-native": "0.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"imagemin": "^6.0.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.2.1",
"imagemin-svgo": "^7.0.0",
"jest": "^23.6.0",
"metro-react-native-babel-preset": "^0.45.2",
"pre-commit": "^1.2.2",
"precise-commits": "^1.0.2",
"react-test-renderer": "^16.4.2",
"redux-mock-store": "^1.5.3"
},
...
}
...and additionally, the babel.config.js as per babel 7
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-object-rest-spread',
'transform-inline-environment-variables'
]
}
UPDATE: I used grep within the react-* packages to find additional lines where process.env were used as a lefthand assignment. Only found a few, but couldn't resolve the issue.

The error you see in the log is related to babel-plugin-transform-inline-environment-variables. If you exclude it from your configuration file, the build should pass.
I'm facing the same issue and haven't found a good solution so far, so try to workaround a way how you pass your environment variables.

Related

How to update older version of nativescript project to work with version 8

i have a project i worked on some years back on my previous laptop(Samsung, Windows OS). I needed to refer back to that project recently so i move the source code to my current laptop (Mac M1). Upon running the app i got a bunch of errors. About 57 errors like this:
ERROR in ./node_modules/nativescript-screenshot/index.js 1:18-41
Module not found: Error: Can't resolve 'image-source' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/node_modules/nativescript-screenshot'
# ./app/profile/profile.js 10:13-47
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./profile/profile.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
ERROR in ./node_modules/nativescript-toast/toast.android.js 3:18-40
Module not found: Error: Can't resolve 'application' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/node_modules/nativescript-toast'
# ./app/home/home-page.js 10:12-41
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./home/home-page.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
ERROR in ./app/welcome/slides-view.js 2:47-80
Module not found: Error: Can't resolve 'ui/layouts/grid-layout' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/app/welcome'
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./welcome/slides-view.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
I ran tns --version on my previous laptop and its version 6.3. However, my current version is 8.3.2
My package.json looks like
"dependencies": {
"#nativescript/core": "~8.3.0",
"#nstudio/nativescript-cardview": "^2.0.0",
"#nstudio/nativescript-pulltorefresh": "^1.1.1",
"#progress-nativechat/nativescript-nativechat": "3.0.0",
"nativescript-accelerometer": "3.0.0",
"nativescript-background-http": "4.2.1",
"nativescript-blur": "^2.0.0",
"nativescript-camera": "4.5.0",
"nativescript-contacts": "^1.6.2",
"nativescript-exit": "^1.0.1",
"nativescript-fancyalert": "^3.0.9",
"nativescript-floatingactionbutton": "^5.1.0",
"nativescript-geolocation": "5.1.0",
"nativescript-image": "3.0.1",
"nativescript-image-cache-it": "^5.0.0-beta.20",
"nativescript-image-colors": "^1.1.0",
"nativescript-image-filters": "^2.2.2",
"nativescript-imagepicker": "7.1.0",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-permissions": "^1.3.8",
"nativescript-phone": "^1.4.1",
"nativescript-plugin-firebase": "^10.5.2",
"nativescript-plugin-universal-links": "^1.0.1",
"nativescript-pulltorefresh": "^2.3.0",
"nativescript-ripple": "^2.2.1",
"nativescript-root-detection": "^1.0.0",
"nativescript-screenshot": "0.0.2",
"nativescript-social-share": "1.6.0",
"nativescript-sqlite": "^2.6.0",
"nativescript-status-bar": "^1.2.0",
"nativescript-theme-core": "~1.0.6",
"nativescript-toast": "^2.0.0",
"nativescript-ui-autocomplete": "6.0.1",
"nativescript-ui-calendar": "6.1.0",
"nativescript-ui-chart": "7.1.1",
"nativescript-ui-dataform": "6.0.0",
"nativescript-ui-gauge": "6.0.0",
"nativescript-ui-listview": "8.0.1",
"nativescript-ui-sidedrawer": "8.0.0",
"nativescript-urlhandler": "^1.3.0",
"nativescript-web-image-cache": "^5.0.0",
"nativescript-web-image-cache-with-fresco": "^2.0.2",
"nativescript-webrtc-plugin": "^2.0.0-alpha.22"
},
"devDependencies": {
"#nativescript/android": "8.3.0",
"#nativescript/webpack": "~5.0.0"
},
Already tried tns --migrate. That was whqt reduced the errors to 57. there were 215 before.
It's a HUGE jump to go from {N} v6 to v8, with lots of breaking changes. I bit the bullet and spent several months making the upgrade myself earlier this year. (To be fair, I was also making UI changes during the upgrade).
As a start, watch this video, probably at least twice: Migrating Legacy NativeScript 6 Project to 8
Good luck!

Vue - npm run serve command crashes because of webpack version (vue-cli-service, laravel-mix, webpack)

to explain my problem, I will start by saying that I am currently making a system in Vue with backend API Laravel (irrelevant). I am making them as 2 separate projects. My problem is in the frontend Vue part. I created it using Vue CLI.
Here is my package.json file:
"dependencies": {
"#popperjs/core": "^2.9.3",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"dotenv": "^10.0.0",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-plugin-load-script": "^2.0.1",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"laravel-mix": "^6.0.31",
"prettier": "^2.2.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"webpack": "^5.52.1"
}
As you can see I am using laravel-mix (specifically to use the npm run dev command).
So to use laravel-mix I also needed to install webpack.
Now the problem arises at the point when I try to run npm run serve command to start the app. I get this error:
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
And I have found 1 solution which was to use webpack 4 instead of 5, which kind of did not work, because when I use webpack 4 I can run "npm run serve" but when I run "npm run dev", it does not mix my assets. No error, only the command is parsed but nothing else.
I really did not find any solution, other than switch webpack version, however the asset mixing part is really cruical in the project.
Update 1:
Here is my webpack.mix.js
let mix = require("laravel-mix");
mix.sass('src/assets/sass/style.scss', 'src/assets/sass')
.styles([
'src/assets/template/css/datatables.min.css',
'src/assets/template/css/rowGroup.dataTables.min.css',
'src/assets/template/css/fullcalendar.min.css',
'src/assets/template/css/select2.min.css',
'src/assets/template/css/bootstrap-colorpicker.min.css',
'src/assets/template/css/bootstrap-datepicker.min.css',
'src/assets/template/css/bootstrap.min.css',
'src/assets/template/css/icons.min.css',
'src/assets/template/css/app.min.css',
'src/assets/sass/style.css'
], 'public/css/style.css')
.scripts([
'src/assets/template/js/jquery.min.js',
'src/assets/template/js/bootstrap.min.js',
'src/assets/template/js/metismenu.min.js',
'src/assets/template/js/simplebar.min.js',
'src/assets/template/js/node-waves.min.js',
'src/assets/template/js/waypoints.min.js',
'src/assets/template/js/jquery-counterup.min.js',
'src/assets/template/js/datatables.min.js',
'src/assets/template/js/dataTables.rowGroup.min.js',
'src/assets/template/js/moment.min.js',
'src/assets/template/js/jquery-ui-dist.min.js',
'src/assets/template/js/fullcalendar.min.js',
'src/assets/template/js/select2.min.js',
'src/assets/template/js/bootstrap-colorpicker.min.js',
'src/assets/template/js/bootstrap-datepicker.min.js',
'src/assets/template/js/apexcharts.min.js',
'src/assets/template/js/app.min.js',
'src/assets/js/script.js'
], 'public/js/script.js');
Could not resolve this problem, so instead I found a replacement for laravel-mix
I used gulp and created my own scripts for parsing sass and mixing css,js and minification.
https://gulpjs.com/

Aurelia: History must implement activate()

I'm new to Aurelia, trying to implement some 'simple' dynamic routing with an id.
config.map([
{ route: 'questions/:id', . . .}
]);
I receive a runtime error which indicates I'm missing an activate() method.
aurelia-history.js:4 Uncaught (in promise) Error: History must implement activate().
at mi (aurelia-history.js:4)
at History.activate (aurelia-history.js:13)
at AppRouter.activate (aurelia-router.js:1743)
at aurelia-router.js:1722
I get that there is an activate() missing and it's dropping through to the prototype and throwing this error, I just can't figure out where to add the activate(). I have it in my module, but should I somehow have one in my App class or this history object?
Thanks
-John
Ok, for the benefit of other strugglers I tried to retrace my steps and piece together how I solved my problem - the challenge was I changed many variables.
But I believe I was able to re-create my error and I broke my application in the same way as before.
The error may have started appearing when I upgraded my aurelia-router version from 1.2.1 to 1.6.2.
This was my old package.json:
{
"name": "ClientWeb",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/webpack-env": "^1.13.0",
"aspnet-webpack": "^2.0.1",
"aurelia-bootstrapper": "^2.0.1",
"aurelia-fetch-client": "^1.0.1",
"aurelia-framework": "^1.1.0",
"aurelia-loader-webpack": "^2.0.0",
"aurelia-pal": "^1.3.0",
"aurelia-router": "^1.2.1",
"aurelia-webpack-plugin": "^2.0.0-rc.2",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"style-loader": "^0.16.1",
"ts-loader": "^2.0.3",
"typescript": "^2.2.2",
"url-loader": "^0.5.8",
"webpack": "^2.3.3",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"#types/vis": "^4.21.7",
"vis": "^4.21.0"
}
}
At the time I was upgrading several libraries to the latest versions, but I tried reverting back to this original package.json and just updated the aurelia-router version - it generates the original error.
Hope this helps someone.
-John
The reason you have this issue is because you didn't include aurelia-history-browser in your plugins via: aurelia.use.history() or aurelia.use.standardConfiguration().
The aurelia-history-browser module implements the aurelia-history abstract class History, which is a wrapper around native History of browser. The abstract class History basically throw an error with the method name when you call it, like the error you saw.

Super expression must either be null or a function, not number. Upgrading Expo SDK 26

im having issues upgrading a React Native App from Expo sdk 21 to Expo sdk 26.
I have followed this steps:
1) In app.json, change sdkVersion to "26.0.0"
2) In package.json, change these dependencies:
react-native to "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz"
expo to "^26.0.0"
react to ("16.3.0-alpha.1" — this exact version)
react-navigation to "1.5.8"
Previously, i was using:
expo ^21.0.2
react-navigation ^1.0.0-beta.21"
react": "^16.0.0-alpha.12",
react-native": "^0.48.4"
Now im getting this error, i dont know where start to search or debug.. any ideas?
This are the full dependencies:
"dependencies": {
"#expo/vector-icons": "^5.2.0",
"expo": "^21.0.2",
"install": "^0.10.1",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"native-base": "^2.3.2",
"npm": "^5.4.2",
"prop-types": "^15.6.0",
"react": "^16.0.0-alpha.12",
"react-native": "^0.48.4",
"react-native-communications": "^2.2.1",
"react-native-directed-scrollview": "^1.3.0",
"react-native-inputs": "^0.2.1",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-lazyload-components": "^1.0.1",
"react-native-maps": "^0.16.4",
"react-native-material-design-searchbar": "^1.1.7",
"react-native-material-dropdown": "^0.6.0",
"react-native-material-textfield": "^0.10.2",
"react-native-rest-client": "^0.1.1",
"react-native-root-toast": "^2.2.0",
"react-native-snackbar-component": "^1.0.8",
"react-native-textinput-effects": "^0.4.1",
"react-navigation": "^1.0.0-beta.21",
"react-navigation-redux-debouncer": "^0.0.2",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
}
Any ideas of how i can get the line, library or something that is making this conflict?
Kind regards
Well, the error was kind of dificult to debug, but the problem was a circular dependency in my code.
The "Super expression must either be null or a function.." message is a ES6 babel way to tell you that you have errors in your imports/ circular dependencies.
So after fixing that theres a lot of work to do, as #Michael Cheng saids, a lot of libraries did breaking changes between SDK21 and SDK26.

Can't find variable: Store

I'm working on an react-native app since 3 months, and we're currently using v0.21.
In an attempt to upgrade the app in order to fix a bug, I:
ran brew update && brew upgrade
Made some change to package.json
ran npm install
ran npm update -g react-native-cli to get the v0.1.10 locally
At this point I tried to run the app, but either in iOS or Android, I've got the same error:
So Logically I got back to origin/master, remove my node_modules folder, and reinstalled the react-native-cli v0.1.7 ... But I've got the same error !!
My package.json looks like that:
{
"name": "XXXXXX",
"version": "0.0.1",
"private": true,
"dependencies": {
"awesome-phonenumber": "^1.0.10",
"buffer": "^3.6.0",
"immutable": "^3.7.6",
"react-native": "^0.21.0",
"react-native-animatable": "^0.5.0",
"react-native-blur": "^0.7.10",
"react-native-button": "^1.3.1",
"react-native-code-push": "^1.5.3-beta",
"react-native-date": "^1.0.3",
"react-native-device-info": "^0.6.0",
"react-native-drawer-layout": "^0.4.0",
"react-native-facebook-ios": "file:lib/react-native-facebook-ios",
"react-native-facebook-login": "^1.0.2",
"react-native-floating-label-text-input": "0.0.8",
"react-native-google-places-autocomplete": "^1.1.6",
"react-native-material-kit": "^0.2.4",
"react-native-modalbox": "^1.3.1",
"react-native-onesignal": "file:lib/react-native-onesignal",
"react-native-parallax": "^0.2.2",
"react-native-parallax-scroll-view": "^0.16.17",
"react-native-router-flux": "^2.2.6",
"react-native-scrollable-tab-view": "^0.3.5",
"react-native-sync-now-android": "file:lib/react-native-sync-now-android",
"react-native-sync-now-ios": "file:lib/react-native-sync-now-ios",
"react-native-timer-ios": "file:lib/react-native-timer-ios",
"react-native-twitter-ios": "file:lib/react-native-twitter-ios",
"react-native-twitter-login": "0.0.2",
"react-native-utils": "^1.0.1",
"react-native-vector-icons": "^1.0.3",
"react-native-webrtc": "^0.1.5",
"react-redux": "^3.1.0",
"redux": "^3.0.2",
"redux-logger": "^2.0.1",
"redux-thunk": "^1.0.0",
"rnpm": "^1.4.1"
},
"scripts": {
"start": "react-native start",
"postinstall": "sh scripts/postinstall.sh"
},
"devDependencies": {
"react-native-cli": "^0.1.7"
}
}
I'm sure the problem is in the version of my tools because everything happened after I updated them and the code is the same
Here's the versions:
Watchman 4.4.0
Flow 0.22.1
react-native-cli 0.1.7
Can someone help me with this ?
Fixed it !
Because I must have upgraded packagers, it did not like the:
export default variable = {};
It prefers:
const variable = {};
export default variable;
Lost 24 hours on this...