Develop Reference

Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')

I'm using the react-pdf/renderer package to add functionality to download a pdf from my website. But I'm getting this error message: ./node_modules/#react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
I tried to use different versions of this package, such as v2.2.0, v2.3.0 and v3.0.0, but unfortunately, nothing worked for me. I'm using react v^17.0.2.
PDF Document code:
import { Document, Page, StyleSheet, Text, View } from "#react-pdf/renderer";
import React from "react";
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4",
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});
const InvoicePDF = () => {
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
};
export default InvoicePDF;
PDF Download button:
import React from "react";
import InvoicePDF from "../invoicePDF/InvoicePDF";
import { pdf } from "#react-pdf/renderer";
import { saveAs } from "file-saver";
const InvoiceFooter = ({ data }) => {
return (
<button
className="w-full text-white text-sm font-bold px-6 py-4 rounded-full transition bg-borderOne hover:bg-gray-200 hover:text-borderOne"
onClick={async () => {
const doc = <InvoicePDF />;
const asPdf = pdf([]);
asPdf.updateContainer(doc);
const blob = await asPdf.toBlob();
saveAs(blob, "document.pdf");
}}
>
Download PDF
</button>
);
};
export default InvoiceFooter;

After doing a lot of research this one works for me.
Add:
"#react-pdf/renderer":" 2.1.0",
"#react-pdf/font": "2.2.0",
To your package.json dependencies.
Then below dependencies add:
"resolutions": {
"#react-pdf/font": "2.2.0"
},
If you already have a resolutions object you'll just need to add this version to it. Notice there is no ^ in the version number.
Then remove yarn.lock or package-lock.json and re-run yarn/npm install

"#react-pdf/renderer": "2.1.0",
"#react-pdf/font": "2.2.0",
"resolutions": {
"#react-pdf/font": "2.2.0"
},
To your package.json dependencies.

If you are using npm & not yarn, you could try the following
Update #react-pdf/renderer from ^2.2.0 to 3.0.0
Add an overrides key to my package.json that looks like;
"overrides": {
"#react-pdf/font": "2.2.1",
"#react-pdf/pdfkit": "2.1.0"
}
Your package.json file should look something like;
// other stuff in the package.json file
"dependencies": {
// other dependencies in the package.json file
"#react-pdf/renderer": "3.0.0"
}
"overrides": {
"#react-pdf/font": "2.2.1",
"#react-pdf/pdfkit": "2.1.0"
}
// other stuff in the package.json file

I use yarn and this Github issue answer worked for me.
"resolutions": {
"#react-pdf/font": "2.2.1",
"#react-pdf/pdfkit": "2.1.0"
}
Link:
https://github.com/diegomura/react-pdf/issues/2015#issuecomment-1246286312
As described in the issue thread "overrides" work for npm and resolutions work for yarn.

i used "#react-pdf/renderer": "^1.6.8", this version. and working fine

Give this a try:
"overrides": {
"#react-pdf/font": "2.2.0",
"#react-pdf/pdfkit": "2.1.0",
}

Using yarn, I was able to solve the issue by adding:
"dependencies": {
// all other dependencies
"#react-pdf/renderer": "3.0.0",
}
Then:
"resolutions": {
"#react-pdf/font": "2.2.1",
"#react-pdf/pdfkit": "2.1.0"
},
As "resolutions" is to yarn like "overrides" is to npm.

React Native Expo with Moti gives TypeError: null is not an object (evaluating 'dispatcher.useContext') error

I created a new Expo project to play with different animations (npx create-expo-app my-app), and I installed react-native-reanimated and moti (npx expo install react-native-reanimated moti).
When I import it I get no problem, but when I want to do a simple animation I get the following error:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: null is not an object (evaluating 'dispatcher.useContext')
Here is my code, which is a simple Loading cicrle:
import * as React from 'react';
import { View } from 'react-native';
//Tried both imports
import { MotiView } from '#motify/components'
import { MotiView } from 'moti'
const LoadingIndicator = ({size}) =>{
return <MotiView
from={{
width:size,
height:size,
borderRadius: size /2,
borderWidth:0,
shadowOpacity:0.5
}}
animate={{
width:size +20,
height:size + 20,
borderRadius: (size +20) /2,
borderWidth:size / 10,
shadowOpacity:1
}}
transition={{
type:'timing',
duration:1000,
// repeat: Infinity,
loop:true
}}
style={{
width:size,
height:size,
borderRadius: size / 2,
borderWidth: size / 10,
borderColor: '#fff',
shadowColor:'#fff',
shadowOffset:{width:0, height:0},
shadowOpacity:1,
shadowRadius:10
}}
/>
}
const LoadingScreen= () => {
return(
<View style={{
flex:1,
alignItems:'center',
// paddingTop:300,
justifyContent:'center',
backgroundColor:'#010100'
}}
>
<LoadingIndicator size={100}/>
</View>
)
}
export default LoadingScreen;
I import this in App.js:
return(
{loading ? <LoadingScreen/> : <MainView/>}
)
And here is my package.json
{
"name": "simple-qrcode",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eas-build-pre-install": "npm install --save --legacy-peer-deps"
},
"dependencies": {
"expo": "~46.0.9",
"expo-dev-client": "~1.2.1",
"expo-status-bar": "~1.4.0",
"moti": "^0.18.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-reanimated": "~2.9.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

One of the causes of this problem is different versions of React installed. I got the same issue and solved like this.
If you are using npm, run this.
npm install --legacy-peer-deps
Then start the project with expo start -c
If you are using yarn, add this to your package.json and start the project again:
"resolutions": {
"react": "your-version-here"
}
}

you get this error because you have been using a hook outside of a functional component just change it inside and the error will be fixed

Property description must be an object red screen error on new react-native app

I have initialized a new react-native app but I am getting the following red screen error even after not making any change in the code.
Java version - 8
node - 10.15.3
react-native - 0.57.3
I have initialized with a lower version of react-native because of encountering many errors in newer version. I am new to react-native. Please help.
App.js file.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component{
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
index.js
/** #format */
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
package.json
{
"name": "GoSurf",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.3"
},
"devDependencies": {
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.55.0",
"react-test-renderer": "16.6.0-alpha.8af6728"
},
"jest": {
"preset": "react-native"
}
}
Error shown: -
https://drive.google.com/file/d/1-erzk1O-mZy6q-EuFBjE3qjhPgqmaMNA/view?usp=sharing

Looking from the code posted I would guess it has to do with this line:
<Text style={styles.instructions}>{instructions}</Text>
instructions is an object and not a string

No, { instructions } is not an object - at least we can't tell from that snippet.
It just says tells in JSX to inject the value for instructions inside the <Text> node
We ran into this issue today as well. Turned out it was redux's latest update.
revert to redux#4.0.0 and the error will go away

How can I use a React component within a Node script?

I'm currently trying to use react-pdf to generate and save a pdf to disk. Rendering to a webpage works, but the method that I need to invoke to save a pdf to disc,
ReactPDF.render()
does not work within the npm start (react-scripts) way of running React that I've used in the past to create webpages. From reading this issue, it seems that it needs to be run as a "Node only api". So my question is, what dependencies, commands, and steps do I need to take to run some react code and save a pdf to disk with something like
> node index.js
currently when I run the above command I get
import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
Then, running
node --experimental-modules index.mjs
I get
ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
^
SyntaxError: Unexpected token <
Here are my two files:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ReactPDF from '#react-pdf/renderer';
ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
//ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import { Document, Page, Text, View, StyleSheet } from '#react-pdf/renderer'
class App extends Component {
render() {
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
}
}
export default App;
package.json
{
"name": "ccv-generator-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-pdf/renderer": "^1.4.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-scripts": "2.1.8",
"ts-pnp": "^1.0.1",
"typescript": "^3.3.4000"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
A follow up question would be, Is what I am trying to do an anti-pattern?

Since you're running index.mjs directly from node, it does not go through the build and transpilation process of react-scripts, meaning you have to do it manually.
Node cannot directly parse jsx (<App/>, for example) - so you will need to run your code through Babel with React preset in order to run it.
Since the dependecies should be already installed, try running:
npx babel index.mjs -o index-compiled.js --presets=es2015,react
and then run the compiled file:
node index-compiled.js

Undefined isn't a function (evaluating 't.createContext(!1)') while running react native project

I wrote a mobile app to collect some data from users by using react-native. It uses react native 0.57.4, react 16.2.0, react-redux 5.0.5,prop-types 15.5.10,, react-navigation 1.0.0-beta.11. I'm also using this library to create survey questions within web-view, i.e., basically nest a webview containing a SurveyJS survey INSIDE a React Native app.
Package.JSON
{
"name": "SurveyJSInWebViewWithReactAndReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"lodash": "^4.17.11",
"moment": "^2.20.1",
"prop-types": "15.5.10",
"react": "16.2.0",
"react-native": "^0.57.4",
"react-native-webview-bridge": "git+https://github.com/abolger/react-native-webview-bridge.git",
"react-navigation": "1.0.0-beta.11",
"react-redux": "5.0.5",
"redux": "3.7.1"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "5.0.2",
"jest": "22.1.2",
"native-base": "^2.8.1",
"react-test-renderer": "16.2.0"
},
"jest": {
"preset": "react-native"
}
}
app.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import surveys from './survey/default_surveys';
import Survey from './survey';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
onSurveyCompleted(ownProps, nextProps) {
//TODO: Readers hooks go here.
alert("Nested Survey was completed!");
}
render() {
return (
<Survey
surveyJSON={surveys.example3PagePatientSatisfactionSurvey}
title="My Custom Survey Title"
navigation={this.props.navigation}
surveyResponseDateString={''}
onSurveyComplete={this.onSurveyCompleted}
data={{}}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
When I try to run this code in mobile by using react-native run-android, I get below error. How can I fix it?

only thing missing is binding with context, else i don't see any issue with your piece of code. you can try binding the onSurveyCompleted function with your context. this should work for you
onSurveyComplete={this.onSurveyCompleted.bind(this)}
either you have to bind method in constructor or while using that in render.
constructor(){
this.onSurveyCompleted = this.onSurveyCompleted.bind(this);
}

The new Context API was introduced in react v16.3 and you're using 16.2 so createContext isn't available in your version.
Also, I can't say much about what you're trying to do from the code you shared, but it would be a good idea to build this survey as a standalone web app and then load it remotely into your webview, or even better you should implement this survey in pure react native.