I am trying to build an app that renders a pdf and I am getting errors for every module I am trying.
I am right now tring the react-native-pdf module.
As a template, I am using the template in the git hub post :
import * as React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import Pdf from 'react-native-pdf';
export default class PDFExample extends React.Component {
render() {
const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };
//const source = require('./test.pdf'); // ios only
//const source = {uri:'bundle-assets://test.pdf' };
//const source = {uri:'file:///sdcard/test.pdf'};
//const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
//const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
//const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages,filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
onPressLink={(uri) => {
console.log(`Link pressed: ${uri}`);
}}
style={styles.pdf}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
}
});
The problem is whenever I try and use my phone, I get two different errors :
When I put App.js as a "main" in package.json, I get this error :
ERROR TypeError: null is not an object (evaluating '_NativeBlobUtils.default.getConstants')
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error
when loading React Native.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error
when loading React Native.
Wen I put node_modules/expo/AppEntry.js as a "main" in package.json, I get this error :
ERROR TypeError: null is not an object (evaluating '_NativeBlobUtils.default.getConstants')
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error
when loading React Native.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error
when loading React Native.
The only differences I see are the (n=10) and (n=11).
Those are my dependencies in the package.json file :
"dependencies": {
"#babel/plugin-proposal-private-methods": "^7.18.6",
"expo": "~47.0.12",
"expo-av": "~13.0.2",
"expo-constants": "^14.0.2",
"expo-file-system": "~15.1.1",
"expo-modules-core": "~1.0.4 || ~1.1.1",
"expo-status-bar": "~1.4.2",
"react": "^18.1.0",
"react-native": "0.70.5",
"react-native-blob-util": "^0.17.1",
"react-native-pdf": "^6.6.2",
"react-native-webview": "^11.23.1",
"react-pdf": "^6.2.2"
},
I tried a lot of render pdf modules but none of them seemed to work with my expo version
I tried resetting the cache, deleting the node_modules and reinstalling them; I don't know what to do.
Related
I am trying to use npm modules in a .NET Core application. I installed the required packages in Visual Studio using the procedure described in Add npm support to a project (ASP.NET Core). After this, my package.json file reads
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"jspdf": "2.5.1"
},
"devDependencies": {}
}
According to the documentation of the jspdf site, one should import a class object using
import { jsPDF } from "jspdf";
However, I have not managed to get this to work. In the wwwroot/js directory, I created a test JS script file called doc-generator.js that reads:
import { jsPDF } from "jspdf";
try {
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
}
catch (err) {
console.error(err.message);
}
This is loaded from the Index.cshtml page using
<script type="module" src="~/js/doc-generator.js"></script>
However, this produces an error
Uncaught TypeError: Failed to resolve module specifier "jspdf". Relative references must start with either "/", "./", or "../".
Since the node_modules directory has definitely been created, I also tried using
import { jsPDF } from "../../node_modules/jspdf/dist/jspdf";
which gives the error
Failed to load resource: the server responded with a status of 404 ()
The node_modules/jspdf/dist contains several different files
jspdf.es.js
jspdf.es.js.map
jspdf.es.min.js
jspdf.es.min.js.map
jspdf.node.js
jspdf.node.js.map
jspdf.node.min.js
jspdf.node.min.js.map
jspdf.umd.js
jspdf.umd.js.map
jspdf.umd.min.js
jspdf.umd.min.js.map
polyfills.es.js
polyfills.umd.js
So I also tried
import { jsPDF } from "../../node_modules/jspdf/dist/jspdf.es";
which gives error
GET https://localhost:44356/node_modules/jspdf/dist/jspdf.es net::ERR_ABORTED 404
and
import { jsPDF } from "../../node_modules/jspdf/dist/jspdf.es.js";
which gives
GET https://localhost:44356/node_modules/jspdf/dist/jspdf.es.js net::ERR_ABORTED 404
Could anyone please advise me how to use such an npm module in a client-side script in .NET Core?
Thanks in advance!
I'm implementing GoogleSign using firebase for the firebase project. I installed these three packages:
"#react-native-firebase/app": "^11.3.0",
"#react-native-firebase/auth": "^11.3.0",
"#react-native-google-signin/google-signin": "^6.0.0",
Then in my Login.js file I'm importing them as:
import auth from '#react-native-firebase/auth'
import { GoogleSignin } from '#react-native-google-signin/google-signin';
Then inside function Login(props) { I've
GoogleSignin.configure({
webClientId: 'MY_WEB_CLIENT_ID.apps.googleusercontent.com'
});
But as soon as I run I get this error:
Error: Requiring module
"node_modules/#react-native-google-signin/google-signin/src/GoogleSignin.js",
which threw an exception: TypeError: null is not an object (evaluating
'RNGoogleSignin.SIGN_IN_CANCELLED')
Please run pod-install and on pod install confirm
Installing FirebaseAuth (8.1.0)
Installing FirebaseInstallations (8.1.0)
Installing FirebaseMessaging (8.1.0)
Installing GTMAppAuth (1.2.2)
Installing GTMSessionFetcher (1.5.0)
Installing GoogleSignIn (5.0.2)
Installing GoogleUtilities 7.4.1
Installing RNFBAuth (12.1.0)
Installing RNFBMessaging (12.1.0)
Installing **RNGoogleSignin** (6.0.0)
I was using '8.0.0' version downgrading to '7.2.2' did trick for me. Remember to remove ^ against version number like this:
#react-native-google-signin/google-signin": "7.2.2"
So I've been trying to run my react native code but it keeps coming up with different errors. I've managed to solve them from solutions I found online but I can't seem to find this particular problem.
When I run react-native run-android I get this error
Failed to compile.
C:/Users/Stephen Murya/Desktop/dev/react-native/FaceAttendance/node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js
Module not found: Can't resolve 'StyleSheet' in 'C:\Users\Stephen Murya\Desktop\dev\react-native\FaceAttendance\node_modules\react-native\Libraries\Components\UnimplementedViews'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
This is the content of the js file in UnimplementedViews
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* #flow strict-local
* #format
*/
'use strict';
const React = require('React');
const StyleSheet = require('StyleSheet');
/**
* Common implementation for a simple stubbed view. Simply applies the view's styles to the inner
* View component and renders its children.
*/
class UnimplementedView extends React.Component<$FlowFixMeProps> {
setNativeProps() {
// Do nothing.
// This method is required in order to use this view as a Touchable* child.
// See ensureComponentIsNative.js for more info
}
render() {
// Workaround require cycle from requireNativeComponent
const View = require('View');
return (
<View style={[styles.unimplementedView, this.props.style]}>
{this.props.children}
</View>
);
}
}
const styles = StyleSheet.create({
unimplementedView: __DEV__
? {
alignSelf: 'flex-start',
borderColor: 'red',
borderWidth: 1,
}
: {},
});
module.exports = UnimplementedView;
I don't know what seems to be the problem here
Trying to apply ChakraUI to my gatsby project.
I've installed all the necessary packages
"#chakra-ui/gatsby-plugin": "^1.0.1"
"#chakra-ui/react": "^1.1.3"
"#emotion/react": "^11.1.4"
"#emotion/styled": "^11.0.0"
"framer-motion": "^3.2.0"
then added the plugin to gatsby-config.js
...
{
resolve: '#chakra-ui/gatsby-plugin',
options: {
isResettingCSS: true,
isUsingColorMode: true,
},
},
...
but after I run `yarn develop, the output is:
> yarn develop
yarn run v1.22.10
$ gatsby develop
success open and validate gatsby-configs - 0.045s
success load plugins - 0.693s
success onPreInit - 0.039s
success initialize cache - 0.018s
success copy gatsby files - 0.093s
success onPreBootstrap - 0.022s
success createSchemaCustomization - 0.010s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.068s
success building schema - 0.234s
info Total nodes: 31, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.004s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.123s
success update schema - 0.031s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.126s
success onPostBootstrap - 0.139s
info bootstrap finished - 5.753s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.207s
success write out requires - 0.010s
success run page queries - 0.029s - 3/3 104.13/s
ERROR
There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: Object(...) is not a
function
27 | };
28 |
> 29 | return transform ? compose(transform, rtlTransform) : rtlTransform;
| ^
30 | }
31 |
32 | export function logical(opts) {
WebpackError: TypeError: Object(...) is not a function
- logical-prop.js:29
node_modules/#chakra-ui/styled-system/dist/esm/utils/logical-prop.js:29:29
- logical-prop.js:41
node_modules/#chakra-ui/styled-system/dist/esm/utils/logical-prop.js:41:1
- position.js:20
node_modules/#chakra-ui/styled-system/dist/esm/config/position.js:20:22
- index.js:1
node_modules/#chakra-ui/styled-system/dist/esm/config/index.js:1:1
- index.js:1
node_modules/#chakra-ui/styled-system/dist/esm/index.js:1:1
- index.js:1
node_modules/#chakra-ui/system/dist/esm/index.js:1:1
- chakra-provider.js:1
node_modules/#chakra-ui/react/dist/esm/chakra-provider.js:1:1
- index.js:1
node_modules/#chakra-ui/react/dist/esm/index.js:1:1
- gatsby-ssr.js:1
node_modules/#chakra-ui/gatsby-plugin/gatsby-ssr.js:1:1
not finished Building development bundle - 5.148s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Do you have any ideas what to do? I don't even use custom html.js.
Watch out, #chakra-ui/gatsby-plugin is not the same as gatsby-plugin-chakra-ui. Follow this example: https://www.gatsbyjs.com/plugins/gatsby-plugin-chakra-ui/
You'll need to install these packages:
yarn add gatsby-plugin-chakra-ui #chakra-ui/core #emotion/core #emotion/styled emotion-theming
In your gatsby-config.js:
module.exports = {
plugins: ["gatsby-plugin-chakra-ui"],
};
Once installed, use it as you wish. For example:
import React from "react";
import { Box, Text } from "#chakra-ui/core";
function IndexPage() {
return (
<Box p={8}>
<Text fontSize="xl">Hello World</Text>
</Box>
);
}
export default IndexPage;
Update: the recent documentation suggests following https://chakra-ui.com/docs/getting-started#gatsby rather than the deprecated package (due to migration). For those who might be struggling with the same issue, check the dependency deprecation.
As pointed out by #jamie-bradley it is discouraged to use gatsby-plugin-chakra-ui as suggested in the accepted answer.
The current version of #chakra-ui/gatsby-plugin still causes issues but downgrading to version 2.0.4 works (tested with Gatsby v4 and v5):
"#chakra-ui/gatsby-plugin": "^2.0.4",
Alongside this version you can use the newest versions of #chakra-ui/react and #chakra-ui/icons:
"#chakra-ui/icons": "^2.0.14",
"#chakra-ui/react": "^2.4.4",
The following warning will show when you run gatsby develop but you can ignore it:
warn Plugin #chakra-ui/gatsby-plugin is not compatible with your gatsby version 5.3.3 - It requires gatsby#^2.29.3 || ^3.0.0 || ^4.0.0
I'm working on an E2E test framework using Cypress, and wanted to import spec files which are outside the Cypress directory (containing dir for: fixtures, integration, plugins, support). When I started some initial tests to verify if it would work as expected, I get these error messages stating that the error originate from my test code, not Cypress. The cause of the error is a TypeError stating: Cannot read property 'includes' of undefined.
Internet searches on this issue weren't really helpful, since no else seemed to have trouble with this behavior, (at least from my perspective). Even when I moved the spec file I selected as an import into cypress/integration/, the same issue repros.
At this point I'm stumped at what's the cause of this problem and how to resolve it. Is there something I'm missing?
Here is what I got in package.json (devDependencies, and field for main):
"main":"index.js",
"devDependencies": {
"#cypress/webpack-preprocessor": "^5.4.1",
"cypress": "^4.9.0",
"selenium-webdriver": "^4.0.0-alpha.7",
"webpack": "^4.43.0"
}
My spec which imports spec file outside of Cypress directory (cypress/integration/RunE2ETest.spec.js):
import '../../Cypress_E2E_Example/SteamHeader.spec';
The spec file outside of Cypress folder (SteamHeader.spec) just showing how I have it set with imports, exports:
import '../Cypress-E2E/BaseTest';
export default describe('Test Suite for ....' () => {
it('test example'), () => {
}
}
The file for my BaseTest:
import default before('BaseSetup', () => {
cy.visit('/');
}
Details on error:
Line causing the error (node_modules/global-dirs/index.js:28:1):
26 |
27 | // Homebrew special case: `$(brew --prefix)/lib/node_modules/npm/npmrc`
> 28 | if (process.execPath.includes('/Cellar/node')) {
| ^
29 | const homebrewPrefix = process.execPath.slice(0, process.execPath.indexOf('/Cellar/node'));
30 | return path.join(homebrewPrefix, '/lib/node_modules/npm/npmrc');
31 | }
Stacktrace:
We dynamically generated a new test to display this failure.
at getGlobalNpmrc (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86028:23)
at getNpmPrefix (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86064:30)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86072:32)
at Object.512._process (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86120:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89116:20)
at Object.551.fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89130:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70417:28)
at Object.425../fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70842:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67474:12)
at Object.411../lib/cypress (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67503:4)
We experienced the same error. It was caused by an import of the cypress module. I guess this module is not intended to be imported in files which are loaded in the browser.