I am trying to add a react component to a meteor project. It works well when I run it in the browser but when I run on ios emulator or device, I will get an error.
template:
<template name="navbar_datepicker">
<div>
{{> React component=DesktopInfiniteCalendar}}
</div>
</template>
component:
import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css';
var today = new Date();
var minDate = Number(new Date()) - (24*60*60*1000) * 7; // One week before today
export default class DesktopInfiniteCalendar extends React.Component {
render() {
return (<InfiniteCalendar width={400} height={600} selectedDate={today} minDate={minDate} keyboardSupport={true} rowHeight={40} />);
}
}
helpers:
import DesktopInfiniteCalendar from './datepicker_components.js';
Template.navbar_datepicker.helpers({
DesktopInfiniteCalendar() {
return DesktopInfiniteCalendar;
}
});
The above code works in combination with the meteor package react-template-helper, but in the browser only.
The error I get on emulator and real device is:
[Error] TypeError: null is not an object (evaluating 'document.body.appendChild')
exports (modules.js:43659)
(anonymous function) (modules.js:1645)
fileEvaluate (modules-runtime.js:180)
require (modules-runtime.js:109)
(anonymous function) (modules.js:809)
fileEvaluate (modules-runtime.js:180)
require (modules-runtime.js:109)
import (modules.js:394)
(anonymous function) (app.js:2657:539)
fileEvaluate (modules-runtime.js:180)
require (modules-runtime.js:109)
global code (app.js:13231)
Any thoughts about why this happens?
Related
Im trying to create a portfolio site for myself using sanity on the backend. The site is working and the DB is set up and working using Sanity studio, but I cant get it to connect properly on the backend using Next.
Here is my connection file:
import { createClient } from "next-sanity";
import createImageUrlBuilder from "#sanity/image-url";
export const client = createClient({
projectId: "p079sml5",
dataset: "production",
apiVersion: "2023-01-31",
useCdn: false,
});
I'll be hiding a lot of this in env files but for the purposes of debugging I've left the info in.
And here is one of my endpoints:
import { NextApiRequest, NextApiResponse } from "next";
import { groq } from "next-sanity";
import { client } from "sanity";
import { Social } from "./typings";
const query = groq`
*[_type == "social"]
`;
type Data = {
socials: Social[];
};
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
const socials: Social[] = await client.fetch(query);
res.status(200).json({ socials });
}
As per the title, when trying to make the call on http://localhost:3000/api/getSocials, I get the following error: error - TypeError: Cannot read properties of undefined (reading 'fetch')
at handler (webpack-internal:///(api)/./src/pages/api/getSocials.ts:15:70)
Fetch appears on the autofill, along with the other methods, so it would appear that its been imported "correctly". The error suggests that that its the client that is the issue but cant figure out why.
Thanks in advance
Ive tried, using my dev environment, with the associated project id etc but no joy.
UPDATE: Fixed, I just moved the client file into a different folder, and it worked
Follow this doc https://github.com/vercel/next.js/tree/canary/examples/cms-sanity
Or setup this repo in new folder and update it's config (/lib/config.js) file with your sanity details then check... previously it was worked for me.
I'm getting the error below when providing a constant with my graphql query to useQuery inside of my component.
Uncaught (in promise) Error: Invalid AST Node: undefined.
at devAssert (app.js:60958:11)
at visit (app.js:65283:130)
at Object.assign.added (app.js:59225:58)
at InMemoryCache.transformDocument (app.js:53379:101)
at QueryManager.transform (app.js:56649:42)
at QueryManager.getVariables (app.js:56681:121)
at QueryManager.watchQuery (app.js:56684:147)
at ApolloClient.watchQuery (app.js:55091:34)
at start (app.js:5304:26)
at immediate (app.js:5522:7)
My component script section looks like:
<script>
import { MY_QUERY } from "./constants/qraphql";
import {useQuery} from "#vue/apollo-composable";
export default {
setup() {
const {result, loading, error} = useQuery(MY_QUERY);
return {
result,
loading,
error
}
}
}
</script>
And my ./constants/graphql.js file looks like:
import gql from 'graphql-tag';
const MY_QUERY = gql`
query exampleQuery {
tasks {
id
name
title
text
}
}`;
Why is this happening?
Turns out I forgot to prefix export to my constant MY_QUERY. This caused the component to attempt to use a undefined constant because it failed to import.
In my ./constants/graphql.js file I have to change
const MY_QUERY
to
export const MY_QUERY
Now the error is fixed
I'm trying to import Typewriter Effect into my NextJS project, but whenever I do, I get this error that reads the following:
ReferenceError: window is not defined
and from what I've read, the error is displaying because it's trying to load the library on the server-side rather than the client-side.
So when I simply try to import it like this:
import Typewriter from 'typewriter-effect'
the error promptly displays.
People suggested that I try something like this:
let Typewriter
if (typeof window !== 'undefined') {
Typewriter = require( 'typewriter-effect' )
}
however, it doesn't work like this either. I get an error that reads the following:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I've searched a lot of places for a potential solution to this problem, but I've been unsuccessful with my attempts.
What you need to do is dynamic import with No SSR
Try this:
import React, { Component } from 'react';
import dynamic from 'next/dynamic';
const Typewriter = dynamic(
() => import('typewriter-effect'),
{
ssr: false
}
)
class Home extends Component {
render() {
return (
<Typewriter
onInit={(typewriter) => {
typewriter.typeString('Hello World!')
.callFunction(() => {
console.log('String typed out');
})
.pauseFor(2500)
.deleteAll()
.callFunction(() => {
console.log('All strings were deleted');
})
.start();
}}
/>
)
}
}
export default Home;
I use import folder on my Meteor App, but I got error with following config :
/imports/startup/client/routes.js
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
import '../../../ui/layout/layout.js';
import '../../../ui/pages/home/home.js';
FlowRouter.route('/', {
action: function() {
console.log("Yeah! We are on the post:");
}
});
and my /client/main.js
import '/imports/startup/client';
And I've this error :
Error: Cannot find module 'routes.js'
Do you have any idea why routes.js isn't loaded ?
Thank you !
You need to import the routes file. Your current import resolves to a folder so it will import the index file in the folder if there is one.
I am trying to get access to objects using import, but am struggling with the logic:
schemas.js:
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
export default UsersExtraSchema = new SimpleSchema({
...
}
seed.js:
import '/imports/startup/server/schemas.js';
export default class SeedDB {
loadBaseData() {
....
UsersExtraSchema.validate(attr);
...
}
}
I am getting the error:
TypeError: Object [object Object] has no method 'validate'
at SeedDB.loadBaseData (imports/startup/server/seed.js:19:26)
at server/main.js:11:14
at /tidee/app/tidee-meteor/.meteor/local/build/programs/server/boot.js:290:5
Exited with code: 8
Your application is crashing. Waiting for file change.
Why do not you import like this?
import UsersExtraSchema from '/imports/startup/server/schemas.js';