I'm using pdf.js to load a pdf in react. Before the promise in getDocument can resolve, I get the error: fullReader is null (in Firefox). In Chrome, I get a different error: Expected a function, which is strange because I'm passing a callback.
I've tried different ways to import pdf.js and looked at multiple examples. I was able to get this example running successfully (https://github.com/yurydelendik/pdfjs-react) but can't get it working in my own app.
Importing pdf.js:
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
The componentDidMount function in my component:
componentDidMount() {
const loadingTask = pdfjsLib.getDocument(`examplePDFUrl`);
loadingTask.promise.then((doc) => {
console.log(`Document loaded ${doc.numPages} page(s)`);
}, (error) => {
console.error(`Error during loading: ${error}`);
});
}
If anyone has any insight into this, I would greatly appreciate some help. Thank you!
Related
I'm trying to use the Cloudinary Upload Widget in Angular. I followed to example code provided by cloudinary but it doesn't seem to work. It looks like I'm missing an import or a package to get access to the function cloudinary.createUploadWidget
I've installed and imported:
import { CloudinaryModule } from '#cloudinary/ng';
In app.module.ts. and I have added
<script
src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"
></script>
in the index.html file.
but I still get the Cannot find name 'cloudinary' error in my component.
What import am I missing to get access to 'cloudinary' in my angular component. The cloudinary documentation doesn't clarifies it and in their Sandbox Example they have the same error.
ngOnInit() {
this.myWidget = cloudinary.createUploadWidget( /// this is where the error occurs
{
cloudName: this.cloudName,
uploadPreset: this.uploadPreset
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log("Done! Here is the image info: ", result.info);
document
.getElementById("uploadedimage")
.setAttribute("src", result.info.secure_url);
}
}
);
Does anybody had any luck making the cloudinary upload widget work in angular?
Any insight of what I'm missing is very welcome.
Can you try following these steps:
https://cloudinary.com/documentation/angular_quick_start
I'm trying to get some information from my smart contract to display on my React app front page. However, anytime I try to do so I get this error
Server Error
Error: 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.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
resolveDispatcher
file:///Users/louiefranchino/Documents/eventsystem/node_modules/react/cjs/react.development.js (1476:13)
useContext
file:///Users/louiefranchino/Documents/eventsystem/node_modules/react/cjs/react.development.js (1484:20)
Html
../../node_modules/next/dist/pages/_document.js (9:873)
processChild
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3353:14)
resolve
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3270:5)
ReactDOMServerRenderer.render
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3753:22)
ReactDOMServerRenderer.read
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
renderToStaticMarkup
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (4314:27)
renderDocument
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/render.js (2:749)
renderToHTML
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/render.js (54:698)
runMicrotasks
<anonymous>
processTicksAndRejections
internal/process/task_queues.js (94:5)
async
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (112:97)
async
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (105:142)
async DevServer.renderToHTMLWithComponents
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (137:387)
async DevServer.renderToHTML
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (138:610)
This is strange as my code previously worked, however now I get nothing but this error. Here is my code:
import React, { Component } from "react";
import { Card } from "semantic-ui-react";
import factory from "../ethereum/factory";
class EventIndex extends Component {
static async getInitialProps() {
const events = await factory.methods.getDeployedEvents().call();
return { events };
}
render() {
return <div>{this.props.events[0]}</div>;
}
}
export default EventIndex;
If anyone could help me please let me know.
EDIT: Update: I think there is an error with my dependencies or something. When I try to run my previous applications which worked fine. I'm also getting errors on that albeit different errors. I read that this Hook error can display if you have two react packages, how could I go about resolving this?
Here is the full code:
https://github.com/Loustaaa/eventsystem/tree/test
I'm trying to implement a audio player with subtitle synchronization in my vue app.
I found a pen by #Musixmatch which does the work.
However, its all vanilla.
In my vue app, I created a lyric.js file which contains the js code enclosed by:
export const initAudioSub = () => {
return new Promise(resolve => {
....the vanillajs code here...
})
}
Now in my component.vue, I imported it like this import { initAudioSub } from './lyric.js'
and called the initAUdioSub in the mounted hook like this mounted() { initAudioSub(); }
but I get an error saying :
Uncaught (in promise) ReferenceError: $ is not defined
at eval (lyric.js?6080:4)
Am I even close? can someone enlighten me on how to do it?
I've been trying to solve this issue for the last few hours. I'm able to use react-moveable just fine with a simple node.js app. When I try to use the same module inside of a NEXTjs app, it throws an error: TypeError: Cannot read property 'userAgent' of undefined
Here is the issue replicated:
https://codesandbox.io/s/hungry-ramanujan-ttqh3?fontsize=14&hidenavigation=1&theme=dark
As far as I can tell, it looks like I'm trying to render something on the server-side that should be on the client-side. Not sure what the solution is though...
Thanks for your help!
The problem here is that the module is not SSR-ready, and it's trying to read navigator.userAgent
You can try moving your logic to another component and using next/dynamic to dynamically import it setting ssr to false:
import dynamic from 'next/dynamic';
// ...
// other stuff, imports, etc
// ...
const MoveableNoSSR = dynamic(() => import('./MoveableWrapper'), {
ssr: false,
loading: () => <div>Loading Moveable...</div>,
});
Here is my react component:
import { sendAnalytics } from 'analytics';
class MyComponent extends React.Component {
myMethod() {
console.log('do something!');
}
render() {
return (
<Button
onClick={submitAnalytics({name: 'foo'}).finally(this.myMethod())}
dataset={{"data-id": "button"}}
> Send Analytics
</Button>
}
)
}
}
And my test is like so:
import * as analytics from 'analytics';
jest.mock('analytics');
describe('Analytics', () => {
it('Should call analytics when button is clicked', () => {
analytics.submitAnalytics.mockResolvedValue(Promise.resolve(true));
const tree = ReactTestRenderer.create(<MyComponent />);
// Actual implementation of following 3 lines is slightly different.
const button = tree.root.findByProps({"data-id": "button"});
button.props.onClick();
expect(analytics.submitAnalytics).toHaveBeenCalled();
});
});
I tried several different mocking strategies like:
analytics.submitAnalytics.mockImplementation(() => {
return Promise.resolve(true)
});
Nothing seems to work out. I keep getting the following error:
TypeError: (0 , analytics.submitAnalytics)(...).finally is not a function.
I don't know why. Any help appreciated.
Please let me know if you need any more contextual code.
Importing #babel/polyfill before the test also solve this problem
import '#babel/polyfill';
// Your tests...
Upgrading my node version from
v8.10.0
to
v10.19.0
Resolved this error.
Looking at the Browser Compatibility chart on MDN it looks like .finally() is not supported in Node until 10.0.0
import '#babel/polyfill'; worked for me, but is deprecated since babel 7.4.
Instead, import this works fine as well:
import "core-js/stable";
import "regenerator-runtime/runtime";
eventually, I just updated node version (from 8.10.2 to 12.16.1)
I figured it out folks! Here's what was to be done:
analytics.submitPayload = jest.fn().mockImplementation(() => {
return {
finally: () => {
return true;
}
};
});
I don't know if this is right or wrong, but it works. Please let me know if there's a better way to do it.
I faced same challenge.
Reason- Jest runs in Node enviroment,and "Finally" is supported from Node version- 10.0.0. But my Jenkins versions was 8.x so As a quick fix you can remove finally from code. Later we can upgrade local and remote server version.
Below is MDN link-
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally