nuxt: 2.15.8
node: v16.14.2
I've been developing it for over 7 months, I'd like to know if it's normal for other people. because I feel it is very slow before being able to refresh each time Especially when developing with TailwindCSS it is slower than waiting for it to respond.
I use SSR and WSL2 and i think it is not from WSL2 and Docker because its api is very fast.
page response time: 3-6s sometimes 7-10s its very slow
dev build client: 8-30s
dev build server: 9-35s
My files
In folder pages: 40+
In folder components: 60+
In forder plugins: 19
"dependencies": {
"#kangc/v-md-editor": "^1.7.8",
"#nuxt/babel-preset-app": "^2.15.8",
"#nuxtjs/auth-next": "5.0.0-1642502410.8e1c713",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/composition-api": "^0.31.0",
"#nuxtjs/feed": "^2.0.0",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/robots": "^2.5.0",
"#nuxtjs/sitemap": "^2.4.0",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/line-clamp": "^0.3.1",
"#vueform/multiselect": "^2.3.1",
"#vueuse/core": "^7.5.4",
"core-js": "3",
"date-fns": "^2.28.0",
"filepond": "^4.30.3",
"filepond-plugin-file-validate-type": "^1.2.6",
"filepond-plugin-image-preview": "^4.6.10",
"highlight.js": "^11.4.0",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"markdown-it-video": "^0.6.3",
"maska": "^1.5.0",
"numeral": ">=2",
"nuxt": "^2.15.8",
"nuxt-clipboard": "^0.0.7",
"nuxt-jsonld": "v1",
"nuxt-route-meta": "^2.3.4",
"pusher-js": "^7.1.0-beta",
"tailwind-gradient-mask-image": "^1.0.0",
"tailwind-merge": "^1.2.1",
"tinyduration": "^3.2.2",
"vee-validate": "^3.4.14",
"vue": "^2.6.14",
"vue-advanced-cropper": "^1.10.0",
"vue-demi": "^0.12.1",
"vue-filepond": "^6.0.0",
"vue-filter-number-format": "^3.0.1",
"vue-gtag": "^1.16.1",
"vue-if-bot": "^1.2.0",
"vue-lazyload": "^1.3.3",
"vue-lodash": "^2.1.2",
"vue-notification": "!1.3.16",
"vue-scrollto": "^2.20.0",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vue-toastification": "^1.7.14",
"vue2-datepicker": "^3.11.0",
"vue2-timeago": "^2.0.6",
"vuex-pathify": "^1.5.1",
"vuex-persist": "^3.1.3",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/runtime-corejs3": "^7.16.8",
"#iconify/icons-ant-design": "^1.1.1",
"#iconify/icons-bi": "^1.1.12",
"#iconify/icons-bx": "^1.2.3",
"#iconify/icons-carbon": "^1.1.7",
"#iconify/icons-cil": "^1.1.0",
"#iconify/icons-eva": "^1.1.0",
"#iconify/icons-fe": "^1.1.0",
"#iconify/icons-flat-color-icons": "^1.1.0",
"#iconify/icons-fluent": "^1.2.6",
"#iconify/icons-gg": "^1.1.0",
"#iconify/icons-ic": "^1.2.3",
"#iconify/icons-icon-park-outline": "^1.2.1",
"#iconify/icons-ion": "^1.1.2",
"#iconify/icons-la": "^1.2.1",
"#iconify/icons-lucide": "^1.2.11",
"#iconify/icons-mdi": "^1.1.42",
"#iconify/icons-mono-icons": "^1.1.0",
"#iconify/vue2": "^1.1.2",
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/device": "^2.1.0",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/laravel-echo": "v2.0.0-alpha.5",
"#vue/test-utils": "^1.3.0",
"#vueuse/nuxt": "^7.5.4",
"autoprefixer": "^10.4.5",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"jest": "^27.4.4",
"mini-svg-data-uri": "^1.4.3",
"nuxt-storm": "^1.1.2",
"postcss": "^8.4.5",
"sass": "^1.49.0",
"sass-loader": "^10",
"tailwind-scrollbar": "^1.3.1",
"tailwindcss": "^3.1.8",
"vue-jest": "^3.0.4"
},
I want to know if everyone is like me. Or am I doing something wrong? to make you have to wait every time you press Refresh the web page.
In production it works normally and works fast.
Disclaimer: I don't like WSL so I may be biased saying that it has an impact haha. Nothing beats a vanilla UNIX system performance/stability wise, rather than doing a hacky kernel emulation IMO.
Having WSL and Docker as middlewares between your code and your HMR'ed webpage is clearly a good lead towards why it may be slow (a good optimized configuration may be used there).
You could debug that one by trying your app into a Linux VM (or some colleague's computer) without Docker (quite a cumbersome thing to test for sure but is not that trivial I guess).
Then, you're saying that you have quite some plugins. Those are global things that are run at the start of the rendering process of your Nuxt app, they will definitely slow down the reload speed.
Especially if they are importing huge NPM packages. I recommend to use Import Cost as a VScode extension, quite handy to check how big the package you're importing is big.
Bundlephobia is also a quite nice website for that purpose. Hi 280kB highlight.js!
Make sure that you're using the JIT engine properly with Tailwind too, as this one can bring a LOT of CSS classes that are not used by your code.
Be careful about DOM mismatches because those can impact quite heavily your performance by rehydrating your whole app and mess up even more with Docker/etc.
Be mindful to check what you do have as HTTP calls + middlewares. Mainly check your devtools to try to find out what is making the whole thing slow.
Any kind of analytics + 3rd party scripts like chat boxes, mouse trackers etc...can bring a lot of code and impact your Web Core Vitals quite heavily too.
Try to see if some of your dependecies could be moved towards devDependecies if they are not needed on runtime.
Be sure to have a somewhat decent SSD + CPU + proper cooling to handle a minimal dev experience.
Not sure what is vue-lodash benefit but I recommend using a properly tree-shakable lodash-es solution. Same goes for the rest of the packages, trying to maybe find better/lighter alternatives.
Also, try to remove unneeded packages like #nuxtjs/dotenv (baked-in into Nuxt already).
Finally: SASS. Big boy, if you're not using it to the max, maybe consider removing it especially if you're already using Tailwind + PostCSS.
Most of what I wrote above are "fixed" once bundled for production. And since it's working fast there, I guess it's not a code logic issue per-se (but it still can).
Also, depending on your CI and what kind of endpoints you use locally, you may have some degraded performances locally (some devops teams give slower response times for dev environments).
I may have forgotten a few things and I didn't checked your nuxt.config.js file but I think that you have plenty of things to try out already. Good luck!
It looks like it's from importing Icon packages from "#iconify/icons-xx" because I have to use it offline (Nuxt SSR).
https://docs.iconify.design/icon-components/vue2/offline.html
See issues https://github.com/iconify/iconify/issues/175
Solution: I switched to unplugin-icons for icons to be used offline
So now,My nuxt is loading faster.
Adding react-native-web package to existing RN app (made with react-native init). Following the setup from this site:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
The project compiles successfully, but in the browser I get a blank white screen and an error that loops:
Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
I can't find anything about this error, I have traced the relevant files and am not sure how to proceed.
I had the same error message while running test after upgrading react-test-renderer package from v17 to v18. So in my case, I had to downgrade react-test-renderer from v18 to v17 or upgrading react from v17 to v18 also worked to correct this error.
According to this discussion, isBatchingLegacy is a deprecated function in react-test-renderer.
So, I'm not sure about it, because I don't know which packages do you have in your existing RN app, but you can maybe check the packages version you have in order to see if the error could come from here.
I run into the same problem. Make sure all React dependencies are on the same version in your package.json.
"react": "~18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0"
Thanks for this, I just spent 4 hours trying to figure out why I got the same error as you with react-native-testing-library
import { render } from "#testing-library/react-native";
I downgraded the types on my package.json
"devDependencies": {
"#testing-library/react-native": "^9.1.0",
"jest": "26",
...
--"#types/react-test-renderer": "18.0.0",
++"#types/react-test-renderer": "17.0.1",
}
It's working now
I am trying to setup an application with #react-navigation.
I have installed all the required dependencies:
"#react-navigation/bottom-tabs": "^5.4.2",
"#react-navigation/native": "^5.3.0",
"#react-navigation/stack": "^5.3.2",
"react-native-safe-area-context": "^1.0.0",
react-native-screens": "^2.7.0",
"#react-native-community/masked-view": "^0.1.10",
"react-native-reanimated": "^1.8.0",
"react-native-gesture-handler": "^1.6.1",
When launching the application I receive errors regarding 'measureInWindow'.
wrapNativeSuper.js:10 Unhandled JS Exception: TypeError: Cannot read property 'measureInWindow' of undefined
This would appear to relate to the react-native-safe-area-context per some research but I am unable to figure out why that doesn't work. I have pod installed since adding the libraries and rebuilt the application, but the same error persists. If I remove react-native-safe-area-context then react-navigation will complain it is not added.
This question is related but the answer suggests updating react-navigation and I am on the latest version: TypeError: Cannot read property 'measureInWindow' of undefined - This question also mentions react-native-safe-area-view but I believe react-navigation no longer uses this in favour of -safe-area-context.
This issue on react-navigation seems to relate (https://github.com/react-navigation/react-navigation/issues/7933) but it suggests react-native-safe-area-view is in use and there is a new version (that is not published?)
I updated my package(react-admin) to 2.4.2, then unfortunately the LoginForm's input placeholder can't change.It is 'ra.auth.username' now. When package version is 2.4.1 , the LoginForm's input placeholder is 'Username'.
Is this a bug?
I had the same problem. There is a issue if you have different versions of react-admin and ra-data-simple-rest (or another data provider).
I fixed by deleting the correspondig node_modules and installing again changing the dependencies in package.json:
...
"ra-data-json-server": "^2.7.0",
"ra-data-simple-rest": "^2.7.0",
"ra-ui-materialui": "^2.7.0",
"react-admin": "^2.7.0",
...
I'm getting this error with React Native, not ReactJS so all the solutions/workarounds with webpack or browserify wont help.
Full error:
You are currently using minified code outside of NODE_ENV=== "production". This means that you are running a slower development build of Redux. You can use ... bla bla bla ( workarounds for ReactJS )
I'm currently running this config :
"expo": "^23.0.0",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
I tried starting the service with --no-minify and I always start it with --dev. I'm running the app on expo as well.
If anyone has a solution or a workaround for this it'd be really appreciated.
If you're running into this issue while using an android virtual device, open the debug menu (CMD+M on a Mac) > Dev Settings -> Uncheck JS Minify and reload your app. Pictures included below for reference.