I am using Meteor with React. I am using Kadira flowrouter-ssr as my router.
It's so weird. None of my components get their componentDidMount() called.
I found a question which seems like the same issue.
I think React only uses getInitialState() & render() to compile to create the html.
It's weird because it was working before and I deployed a new version, didn't update anything and it stopped working. All I did was add a couple of components.
It works on my local machine so I am sure it's something to do with how it's being compiled.
Other than that I am blank. I have no idea what's up with this.
Related
I have a NextJS project using Relay. I have it working fine in development, but when I build, it is building static pages and is trying to access my GraphQL server (in dev it is pointed to https://localhost:3000/api/graphql), but I don't want it to since it should be a dynamic page.
With that, I also can't seem to get SSR working with Relay since a lot of functionality in Relay requires hooks and we can't use hooks in non React components (like getServerSideProps()). I got as far as using loadQuery from Relay in getServerSideProps but now my issue is that I need to get the Relay environment somehow, but again, can't use getRelayEnvironment() in there either. I import it from the createRelayEnvironment file but then I'm not using my App's environment (RelayEnvironmentProvider at the root of my App).
Anyone have success with using Relay in NextJS?
I don't know how I missed this, but I followed along with NextJS's example for using Relay Modern on GitHub.
I didn't do everything the same - I don't have a .babelrc file, for example, because that info is in the next.config.js file (thanks to NextJS 12.1).
What I really used from here was how they were starting and using relay in their relay.js file. Then I used that in a getServerSideProps function in my page just like how they did in their index.js file.
I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:
https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.
So, how to disable SSR "completely"?
While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).
Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.
So I have a project on vue 3, in with was requested to add metadata(og, and twitter), so has been a long week, due I never had to work with something like that before, and it seems there are only 2 options available as I can see, so I have chose to work with usevue/head plugin, however the SSR part was not clear in the documentation, assuming that you already know. So after a long research, testing, and watching tutorials, I found how to, the component rendering to head was the easy part and is done(in my main project not in this repository, because my project I still don't have the ssr part and it's what I'm trying to figure out).
However for the SSR I created a empty project(check repository here) where I just want to run the server together with the plugin example code from the documentation, however now I'm facing 2 issues:
For some reason the css coming from the components is not being "compile" by the server.
More important, when importing the usevue/head plugin into the project I got an error: "UnhandledPromiseRejectionWarning: ReferenceError: useHead is not defined"
I suppose is because now I have 2 "main" js files, one for the server, and one for the client side, so I'm guessing that I need to import somehow the plugin to the main.server one as well, which currently looks like that:
import App from './App.vue'
export default App;
While my client side one looks like:
import { createApp } from 'vue'
import App from './App.vue'
import { createHead } from '#vueuse/head'
const head = createHead();
createApp(App).use(head).mount('#app');
If I am guessing correctly, the question is, how do you include in general a third party plugin in a server side file, not to mention the router?
Thank you in advance for your help. Also if you can recommend something else, also is very welcome.
So im trying to build ontop of the angular-meteor WhatsApp clone tutorial using Ionic 2 CLI
This tutorial basically deletes the client folder in the meteor project and uses the meteor-client-side package inside an ionic project to connect to the meteor server.
Which works perfectly fine, but now i'd like to subscribe to a meteor publication with an reactive parameter.
After searching the Meteor API Documentation I found the Session object:
Session provides a global object on the client that you can use to
store an arbitrary set of key-value pairs. Use it to store things like
the currently selected item in a list.
What’s special about Session is that it’s reactive. If you
call Session.get("currentList") from inside a template, the template
will automatically be rerendered whenever
Session.set("currentList", x) is called.
In the Meteor Subscribe Documentation you can find the following example:
Tracker.autorun(function () {
Meteor.subscribe("chat", {room: Session.get("current-room")});
Meteor.subscribe("privateMessages");
});
This subscribes you to the chat messages in the current room and to
your private messages. When you change rooms by
calling Session.set("current-room", "new-room"), Meteor will subscribe
to the new room’s chat messages, unsubscribe from the original room’s
chat messages, and continue to stay subscribed to your private
messages.
Which is exactly what I want to do too. But as the Session documentation states, session is a package I have to add to the meteor project:
To add Session to your application, run this command in your terminal:
meteor add session
Now my question, is there any way to add session to the meteor-client-side packages?
If I just try to call Session.set() it fails on runtime with Session is not defined
My guess is that I would need some npm package that extracts the Session functionality (basically a sessions-client-side npm package) like accounts-base-client-side
Is there an other way to do this?
How would I build my own sessions-client-side?
I tried to run meteor add session in my meteor project but was not able to find the code for Session anywhere in .meteor folder and npm_modules.
I also looked into the meteor GitHub but the Session.js file they have contains only documentation
Any input how to do something like this would be nice
Update:
I've looked into the accounts-base-client-side package and found out that they are autogenerated using a script, so im currently trying to adapt this script to work with Session instead of accounts-base.
You can find my attempt at: https://github.com/AwsmOli/session-client-side
Still work in progress, but i should get it to work soon
Update 2:
See my answer, my session-client-side is working now :)
The "Session" variable should just appear and be accessible. If you need to verify that, start a new project add the package and write some code to access it. It is likely that something has (unwittingly) nuked the Session variable - I have seen this before with another package.
Another way of doing this is with "getReactively". Below is a helper that uses it in a query. Make sure you declare it before the helper (otherwise it won't work). This one uses the result of another helper, but it can be any variable, and you just assign the variable for the reactivity to kick in and run the helper.
this.helpers({
currentUser: () => { return Meteor.user() },
elder: () => {
let e = Elders.findOne({_id: this.getReactively('this.currentUser._id')});
if (e) {
utils.services.setupElder(e);
}
return e;
}
});
As per the meteor docs, you have to import it:
import { Session } from 'meteor/session'
This will enable it on the client.
In earlier meteor versions this was not required, as it was both a default package, and automatically imported into the global namespace.
I ended up creating the session-client-side package myself, and its working nicely.
If you need it too, its available on GitHub:
https://github.com/AwsmOli/session-client-side
and NPM:
npm install session-client-side
credits to idanwe who created the client side packages and made it realy easy to adapt his work to work with any meteor package :)
To use it with Ionic 2 Apps:
import it in your entry points (src/app/main.prod.ts & src/app/main.dev.ts)
import 'session-client-side';
and now the global Session variable is accessable form anywhere in your app:
Session.set("aCoolNameFormyAwsmChangingObject", myAwsmChangingObject);
Thanks for the help!
This is my first attempt at working with Angular.js after using Backbone.js for some projects. I used Yeoman to get the initial angular scaffolding setup as well as to manage various dependencies etc.
The first issue I've run into is with the angular $resource service I setup to hit an external API which returns a simple array of names. In using the Chrome web inspector I see that the data is returned as expected but never renders. I suspect this is due to the call by asynchronous and when the page renders there is no data to show. Shortly after the page renders the data is returned from the API but the page never re-renders again.
The Angular docs state pretty clearly in the tutorial that this should happen automagically via the angular data binding but so far it's never worked for me.
I put the code I'm experimenting with now up in a repo on GitHub at https://github.com/chad-skidmore/angular-test
I've not found any documented issues so far regarding this issue after spending the last couple days hacking around to try and get it to work. If I pass an array to the controller it works fine of course which is one reason I think that there is something hosed in the data binding for async external resource calls.
Any pointers or help would be appreciated.
You can also get to the same code on plnkr: http://plnkr.co/edit/BAHhsT2l1HKnpjiKLZMK
Thanks,
chad