Got a strange issue that i've not been able to easily replicate whilst building an app on vue.js 2 and vuex.
I've got a table where i can add and remove rows. The rows coming from the Vuex state and i've been commiting and mutating the state in the usual way and it's working great.
However, sometimes the window scrollbar just breaks and stops working so can't scroll up/down (or has the app hung?!). If I refresh the page, everything works again.
I get no errors and Vue dev tools doesn't report anything weird.
I also get the same issue in other browsers, thinking it might have something to do with Vue Tools (just to rule it out).
Be great to get any ideas on what the problem could be - if its a conflict with another library/package, memory leaking causing it to freeze/hang etc. Thanks in advance.
These are my package.json dev/dependancies:
devDependencies:
"babel-preset-stage-2": "^6.22.0",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"font-awesome": "^4.7.0",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-mix": "^0.9.2",
"nightwatch": "^0.9.13",
"nightwatch-tools": "^0.1.0",
"selenium-download": "^2.0.9",
"selenium-webdriver": "2.44.*"
Dependencies:
"animate-sass": "^0.6.6",
"axios": "^0.15.3",
"blueimp-md5": "^2.7.0",
"bootstrap-select": "^1.12.2",
"fecha": "^2.3.0",
"jasny-bootstrap": "^3.1.3",
"jquery": "^3.1.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"sweetalert2": "^6.4.2",
"validator": "^7.0.0",
"vee-validate": "^2.0.0-beta.25",
"vue": "^2.2.3",
"vue-default-value": "^1.0.2",
"vue-loader": "^11.1.4",
"vue-localstorage": "^0.1.3",
"vue-multiselect": "^2.0.0-beta.15",
"vue-scrollto": "^2.4.2",
"vue-strap": "github:wffranco/vue-strap",
"vue-template-compiler": "^2.2.3",
"vue2-dragula": "^2.4.4",
"vue2-filters": "^0.1.6",
"vuex": "^2.1.2"
I managed to figure out the issue. Was an issue with using vue-strap spinner within a modal window and a rogue 'overflow-y:hidden' wasn't being removed on completion of that task causing the 'disabled' scroll.
Related
I'm trying to run the app using the expo start command. It worked fine so far but today it's showing like this.
Any help would be greatly appreciated! :)
These are my dependencies
{
"dependencies": {
"#expo-google-fonts/manrope": "^0.2.0",
"#expo-google-fonts/roboto": "^0.2.2",
"#expo/react-native-action-sheet": "^3.12.0",
"#flyerhq/react-native-link-preview": "^1.6.0",
"#gorhom/bottom-sheet": "4",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/hooks": "^2.8.1",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/netinfo": "7.1.3",
"#react-native-firebase/app": "^14.5.0",
"#react-native-firebase/messaging": "^14.5.0",
"#react-native-picker/picker": "2.2.1",
"#react-navigation/core": "^6.1.1",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.1.1",
"#stomp/stompjs": "^6.1.2",
"#stripe/stripe-react-native": "0.2.3",
"expo-linking": "~3.0.0",
"expo-media-library": "~14.0.0",
"expo-notifications": "~0.14.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.6",
"expo-web-browser": "~10.1.0",
"firebase": "^9.6.7",
"firebase-admin": "^10.0.0",,
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-actionsheet": "^2.4.2",
"react-native-bottomsheet-reanimated": "^0.1.1",
"react-native-gesture-handler": "~2.1.0",
"react-native-hold-menu": "^0.1.1",
"react-native-image-crop-picker": "^0.37.2",
"react-native-image-picker": "^4.7.0",
"react-native-image-resizer": "^1.4.5",
"react-native-image-viewing": "^0.2.1",
"react-native-ionicons": "^4.x",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-link-preview": "^1.4.2",
"react-native-pager-view": "5.4.9",
"react-native-parsed-text": "^0.0.22",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "2.4.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.10.1",
"react-native-sticky-parallax-header": "^0.4.1",
"react-native-svg": "12.1.1",
"react-native-svg-charts": "^5.4.0",
"react-native-tab-view": "^3.1.1",
"react-native-unimodules": "0.12.0",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0",
"react-navigation": "^4.4.4",
"rn-fetch-blob": "^0.12.0",
"socket.io-client": "^4.4.1",
"sockjs-client": "1.4.0",
"stompjs": "2.3.3",
"text-encoding": "^0.7.0",
"url": "^0.11.0",
"watchman": "^1.0.0"
}}
I've tried changing the versions of the react-native-reanimated package but still couldn't figure out the problem.
I had this problem recently myself. I'm not entirely sure why this is happening but you can try to find the root cause by trial and error. For me, I did a global find of all references to global.performance.now in the build folder and commented out all of them in the code (they were all js files from node_modules packages in the build folder). Once I tried to reload the app, I would get a more detailed message about a missing reference or undefined variable (since I commented the lines calling on global.performance.now). In my case, it ended up being located in the react-native package, specifically in the createPerformanceLogger.js file. What was interesting was that I was able to find another file in the package that actually sets up this object here.
So, as a temporary workaround, I added a require('../Core/setUpPerformance'); statement in the createPerformanceLogger.js import statements. This fixed the issue for me. Obviously, this isn't pretty since it requires altering build files. What I did was add a post-build step to do this programmatically after every build in order to avoid doing this manually (my setup uses Kotlinjs as well, so I added it as a post assemble step in my gradle.build.kts file). In any case, YMMV but determining the root cause this way will help unblock you in the meantime until finding a more long term solution.
It's worth noting that I eventually started playing with react + react-native versions in my package.json and now the react-native package is not even bundled in my build output (which I thought was strange), but it means that I no longer need the workaround. By the way, in case you're curious, here are my react and react-native versions used.
I am getting the alert " would like to find and connect to devices on your local network" on the prod version of my React Native app (the one downloaded from the app store or from testflight).
From what I've found online, this could be due to one of the libraries we're using that requests this permission.
How would I know which library is asking for it or how could I disable this popup completely from showing up on prod?
Those are my current dependencies:
"#ovalmoney/react-native-fitness": "^0.5.3",
"#react-native-async-storage/async-storage": "^1.15.7",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/slider": "^4.1.3",
"#react-native-firebase/app": "^12.7.3",
"#react-native-firebase/dynamic-links": "^12.7.3",
"#react-native-firebase/messaging": "^12.7.3",
"#react-navigation/native": "^5.9.8",
"#react-navigation/stack": "^5.14.9",
"#sentry/react-native": "2.4.3",
"apollo-boost": "^0.4.9",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"js-interpreter": "^2.3.1",
"lodash": "^4.17.21",
"mixpanel-react-native": "^1.3.2",
"mobx": "^5.14.0",
"mobx-react": "^5.0.0",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.66.0",
"react-native-animatable": "^1.3.3",
"react-native-dash": "^0.0.11",
"react-native-device-info": "^8.3.1",
"react-native-gesture-handler": "1.9.0",
"react-native-hyperlink": "^0.0.19",
"react-native-intercom": "^22.0.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^1.13.3",
"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.6.0",
"react-native-sensors": "^7.3.3",
"react-native-svg": "^12.1.1",
"react-native-svg-charts": "^5.4.0",
"react-native-url-polyfill": "^1.3.0",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^5.1.1",
"rn-prompt": "^1.0.4"
According of Official FAQ about Local Network Privacy - FAQ-15: My app presents the local network privacy alert unexpectedly. Is there a way to track down the cause?, you should:
... start removing any third-party libraries from your app until you figure out which one is triggering it, and then raise this issue with the library’s vendor.
In my case I'm not able to consistently reproduce the alert, so this method doesn't work for me though.
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.
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.
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.