I'm trying to setup Helmet npm using SSR within my meteor application and I'm getting the error, Error running template: TypeError: Cannot read property 'renderStatic' of undefined at sink. I'm new to using SSR so I'm not following what I'm missing here. Very nooooob question.
Path: server/main.js
import React from "react";
import PropTypes from 'prop-types';
import { onPageLoad } from "meteor/server-render";
import { renderToNodeStream } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"
import { Helmet } from 'react-helmet';
import App from "/imports/server/app/App";
onPageLoad(sink => {
const sheet = new ServerStyleSheet();
const appJSX = sheet.collectStyles(
<App location={sink.request.url} />
);
App.propTypes = {
location: PropTypes.object,
};
const htmlStream = sheet.interleaveWithNodeStream(
renderToNodeStream(appJSX)
);
sink.renderIntoElementById("react-root-app", htmlStream);
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
});
Since Helmet is default export you need to import it like
import Helmet from 'react-helmet';
But not
import { Helmet } from 'react-helmet';
However, the latest version does not have a default import.
You must import it like this.
import { Helmet } from 'react-helmet';
This is as per the version
"react-helmet": "^6.0.0",
Related
I have this code right here
import React from "react";
import { useQuery } from "#apollo/react-hooks";
import gql from "graphql-tag";
const FETCH_POSTS_QUERY = gql`
{
getMovies {
id
title
}
}
`;
function Home() {
const { loading, data } = useQuery(FETCH_POSTS_QUERY);
if (data) {
console.log(data);
}
return (
<div>
<h1>Home</h1>
</div>
);
}
export default Home;
and when I'm running it I get lots of errors in my console. I'm not sure what I’m doing wrong.
I can tell it's caused by how useQuery is used i think. I'm not sure what's wrong though.
thanks!
I faced the same problem today, the way of useQuery that you used is correct.
This is my original code in ApolloProvider component:
import React from 'react';
import App from './App';
import { ApolloProvider } from '#apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';
const httpLink = new createHttpLink({
uri: "http://localhost:5000"
})
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
export default(
<ApolloProvider client={ client }>
<App />
</ApolloProvider>
)
I found using apollo-client dependency would cause the errors. Then I changed it and installed #apollo/client at 3.5.10 version instead to import ApolloClient. And It finally works fine.
import React from 'react';
import App from './App';
import { ApolloProvider } from '#apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
// import ApolloClient from 'apollo-client';
import { ApolloClient } from '#apollo/client';
In addition, I've also tried to use #apollo/client at the newest version. It worked successfully as well.
I believe the issue is in the GraphQL schema, you are missing query in it. Try using the following schema:
const FETCH_POSTS_QUERY = gql`
query {
getMovies {
id
title
}
}
`;
I faced the same problem because of an old tutorial.
I configured my Apollo client in the wrong way.
Do the same as described in the get started guide from graphql and it will work perfect.
I'm trying to add unit testing to an application written with Typescript and React. I have a very basic component just for the sake of simplicity.
import React from "react";
import ReactDOM from "react-dom";
type TypeProps = { }
type TypeState = { }
class App extends React.Component<TypeProps, TypeState> {
constructor(props:TypeProps) {
super(props);
this.state = { };
}
render() {
return(<p>Literally Nothing</p>);
}
}
function renderApp() {
let AppElement = document.getElementById("app");
if(AppElement) { ReactDOM.render(<App />, AppElement); }
}
renderApp();
export { renderApp }
Then installed what I believed to be everything required for the tests
npm install --save-dev jest ts-jest #types/jest
npm install --save-dev #testing-library/jest-dom #testing-library/react
With jest.config.json as
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom'
};
So this is all fine and I have a unit test of nothing
import React from "react";
import ReactDOM from "react-dom";
import "#testing-library/jest-dom";
import { render } from "#testing-library/react";
import { renderApp } from "./App";
test("Literally Nothing", function() {
renderApp();
expect(getByText("App")).toBeInTheDocument();
});
But it is throwing the following error on build and npm run test
TS2304: Cannot find name 'getByText'.
Am I missing an install or configuration step?
You are missing getByText which is not imported anywhere.
I'd suggest you import screen
import { screen } from '#testing-library/react';
//....
renderApp();
const appText = screen.getByText("App");
expect(appText).toBeInTheDocument();
Also this will always assets false, because on your component there isn't any text with the value "App", the onlye text that will render is "Literally Nothing".
So like this will work:
const appText = screen.getByText("Literally Nothing");
expect(appText).toBeInTheDocument();
When i try to the run app it shows a red screen with this error in the terminal
Error: Unable to resolve module `../../../../src/assets/images` from `node_modules/#reduxjs/toolkit/dist/redux-toolkit.cjs.production.min.js`:
but It occuurs on iOS as well
The only way to make it go so far has been uninstalling react-redux. I do not have any imports in my code that point to src/assets/images as I dont have an assets/images directory to begin with.
My index.js:
import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';
import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';
const reduxApp = () => (
<ReduxProvider store={store}>
<App />
</ReduxProvider>
)
AppRegistry.registerComponent('main', () => reduxApp);
Redux store:
import { configureStore, getDefaultMiddleware} from '#reduxjs/toolkit';
import logger from 'redux-logger';
import { persistStore } from 'redux-persist';
import reducer from './reducers'
const middleware = [...getDefaultMiddleware(), logger]
const store = configureStore({
reducer,
middleware,
})
export const persistor = persistStore(store);
export default store;
metro.config.js:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
src: './src',
screens: './src/screens',
redux: './src/assets/images',
assets: './assets',
},
},
],
],
};
};
The problem is your babel.config.js file. I'm guessing that you copy and pasted some code from somewhere else without understanding what it means.
redux: './src/assets/images',
This line right here tells the compiler that the location of the redux module is ./src/assets/images. It will look for the redux source code in that folder, which doesn't exist, instead of the default location which is ./node_modules/redux.
You don't want this so delete that line.
I have used storybook npm in my react project, I have my url like this http://localhost:35475/?path=/story/simple-usage--client-demo , when i tried to another params in that url like http://localhost:35475/?path=/story/simple-usage--client-demo&test=123 and reoload it then it removed my test params, can anyone please help me to resolve this issue ? here i have added my code for it
import * as React from 'react';
import { storiesOf, addParameters, addDecorator } from '#storybook/react';
import { setOptions } from '#storybook/addon-options';
import { themes } from '#storybook/theming';
import './demos/helpers/index.css';
import { Toolkit } from '#projectstorm/react-canvas-core';
Toolkit.TESTING = true;
addParameters({
options: {
theme: themes.dark,
}
});
setOptions({
name: 'STORM React Diagrams',
url: 'https://github.com/projectstorm/react-diagrams',
addonPanelInRight: true
});
addDecorator(fn => {
Toolkit.TESTING_UID = 0;
return fn();
});
import demo_client from './demos/client-demo-simple';
import demo_simple from './demos/demo-simple';
import demo_flow from './demos/demo-simple-flow';
import demo_performance from './demos/demo-performance';
import demo_locks from './demos/demo-locks';
import demo_grid from './demos/demo-grid';
import demo_listeners from './demos/demo-listeners';
import demo_zoom from './demos/demo-zoom-to-fit';
import demo_labels from './demos/demo-labelled-links';
import demo_dynamic_ports from './demos/demo-dynamic-ports';
import demo_alternative_linking from './demos/demo-alternative-linking';
import demo_custom_delete_keys from './demos/demo-custom_delete_keys';
storiesOf('Simple Usage', module)
.add('Client Demo', demo_client)
Try passing the url as encoded one
encodeURIComponent('http://localhost:35475/?path=/story/simple-usage--client-demo&test=123')
like this
"http%3A%2F%2Flocalhost%3A35475%2F%3Fpath%3D%2Fstory%2Fsimple-usage--client-demo%26test%3D123"
Hello I am trying to add Apollo to my react app and in the documentation it says to wrap you app in the <ApolloProvider client={client}> tag and pass client in as a variable like so:
import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import CreateApolloClient from './apollo-settings'
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import {BrowserRouter} from 'react-router-dom';
const client = new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));
However I want to remove the const client from the index.js page and move it into another template just to keep things organised like so:
import React from 'react';
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
const CreateApolloClient = () => {
const client = new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
}
export default CreateApolloClient;
What I am struggling with is when importing CreateApolloClient into the index.js page how do I then access the const client and pass it into the <ApolloProvider client={client}>
Thank you for any help in advanced
You should return the apollo client instance in your function and export the createApolloClient.
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
export const createApolloClient = () => {
return new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
}
export default CreateApolloClient;
import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import {createApolloClient} from './apollo-settings'
import {BrowserRouter} from 'react-router-dom';
import { ApolloProvider } from '#apollo/react-hooks';
const client = createApolloClient();
ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));