I'm trying to use Blotter.js in my React application, but I can't find out how to define the Blotter class in my React application.
I exported this codepen that tests Blotter.js (https://codepen.io/jgordon-orange/pen/oEGxpp) and it works locally as it's not a React application. However, trying to add the script tags in the head of my Index.HTML has not worked. I also tried importing all of the scripts with React, but that didn't work either. Importing the package from NPM didn't work, probably because it hasn't been updated in 3 years.
componentDidMount() {
const links = ["https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/blotter.min.js", "https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/materials/channelSplitMaterial.js", "https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/materials/fliesMaterial.js"]
for (var i=0; i<links.length; i++){
const script = document.createElement("script");
script.src = links[i];
script.async = true;
document.body.appendChild(script);
}
}
When I try to run the code with my methods of importing the libraries, I'm expecting that the code will work as in the demo I linked, but instead I'm getting this error: TypeError: blotter__WEBPACK_IMPORTED_MODULE_13__.default.Text is not a constructor, or I'm getting Blotter is not defined.
Related
So I migrated from CRA to Next Js. At first my app is working fine on IE 11 while I'm migrating from CRA to next js (I was testing it on IE every time I'm making changes). But then I forgot to test on IE, and now I fully migrated my app on nextjs, and I tried to open it on IE, now the page doesn't fully load because of this error, ( on both dev mode and prod mode). I notice that this error occurs when I'm trying to add my page and component that has socket io-client, I think the error is in debug/src/browser in node_modules. What I don't get is my CRA app also has this dependency, but why it works on IE while the Nextjs version doesn't? I used my old CRA app and just installed next, and made changes, so it has babel.
This is the error:
SCRIPT1002: Syntax error
_app.js (24050,23)
Now when I click it, this is the code where the error occurs
exports.formatArgs = formatArgs;
exports.save = save;
exports.load = load;
exports.useColors = useColors;
exports.storage = localstorage();
exports.destroy = (() => {
let warned = false;
return () => {
if (!warned) {
warned = true;
console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
}
};
})();
Please help me! thank you.
I downgraded my socket.io-client version to socket.io-client#2.3.1
I want to sync a Google Sheet with my Firebase real-time database.
My code is:
function writeDataToFirebase() {
var ss =
SpreadsheetApp.openById("18AU9ZP9UHs9lvIeTA0SyJv6tcHPe7ux0tLopkRAz1T0");
var sheet = ss.getSheets()[0];
var data = sheet.getDataRange().getValues();
var dataToImport = {};
for(var i = 2; i < data.length; i++) {
var date = data[i][1];
dataToImport[date] = {
niftyclose:data[i][2],
sensexclose:data[i][5]
};
}
var firebaseUrl = "<MY database URL>"; //Yes I have entered the URL in my actual code
var base = FirebaseApp.getDatabaseByUrl(firebaseUrl);
base.setData("", dataToImport);
}
But when I run the script, I get this error:
ReferenceError: FirebaseApp is not defined
I tried adding the Firebase Library and got this error:
Firebase Library Error
Can someone help me figure this out?
Thanks in advance.
I think that MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l is the project key. In this case, it can be used for the legacy editor. But, in the current stage, the script ID is used for installing the GAS library. And also, when you use new script editor, it is required to use the script ID for installing the library. I thought that this is the reason of your issue.
When the project key of MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l is installed using the the legacy editor and check appsscript.json, the script ID of the library can be known. It's 1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt. So please modify your situation as follows.
1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt
Please install the library using above script ID. This script ID can be also seen at https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/source
References:
Libraries
Firebase
I use isMobileOnly from "react-device-detect" npm package in my React component say(SampleComponent.js).
I would like to customize the return value of isMobileOnly in my jest unit tests.
I have tried Jest manual mocks as mentioned in the link below:
https://jestjs.io/docs/en/manual-mocks
But it does not seem to work for me.
I have also tried:
jest's mockImplementation
jest's mockImplementationOnce
jest's spyOn
import {isMobileOnly} from 'react-device-detect;
In my jest unit tests, i would like to mock the function isMobileOnly in such a way that i should be able to customize its return value to "true". The default value is "false".
This worked for me.
In your test file, add this: import * as deviceDetect from 'react-device-detect';
then you can change things like: deviceDetect.isMobileOnly = true;
eg.
import * as deviceDetect from 'react-device-detect'; //<--important
it.only('clicking on myAccount redirects to /user/myAccount', () => {
///make sure this is before mount or shallow
deviceDetect.isMobileOnly = true; //<--important
component = mount(<Provider store={store}><Sidebar history={mockedHistory} /></Provider>);
component.find('[test-id="myAccount"]').first().simulate('click');
expect(mockedHistory.push).toHaveBeenCalledWith('/user/myAccount');
});
Finally! I figured it out myself after hours of struggle. Here is what i did:
Created __mocks__ folder in the same level as node_modules directory where the package "react-device-detect" is available. Note: smaller case is important for __mocks__.
Created a file named "react-device-detect.js" within the __mocks__ folder.
Added the following code in it:
const deviceDetect = jest.genMockFromModule('react-device-detect');
deviceDetect.isMobileOnly = true;
module.exports = deviceDetect;
Within the test file, i imported the "isMobileOnly" as i did in the original
component:
import { isMobileOnly } from 'react-device-detect';
Now, i can change value of "deviceDetect.isMobileOnly" to true or false in the
mocked file as per the unit test case's need .
For more details, refer the official documentation here https://jestjs.io/docs/en/manual-mocks
Thanks #Roman for reaching out!
I use the " import * as deviceDetect" answer, it worked but I ran into an issue because of typescript and the readonly property of isMobile.
So this solution worked for me :
Object.defineProperty(reactDeviceDetect, 'isIOS', { get: () => true });
as describe here
I hope that help!
You can possibly override the User Agent for testing purposes so react-device-detect package will identify it like You need, here's how to do that.
This topic should also be helpful.
Got this error after upgrading to React when I ran my Jest unit tests:
React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
How do I fix it?
I'm using Jest 18.1.0.
Found a workaround!
Steps:
Create the file __mocks__/react.js
Add the following into __mocks__/react.js
const react = require('react');
// Resolution for requestAnimationFrame not supported in jest error :
// https://github.com/facebook/react/issues/9102#issuecomment-283873039
global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
throw new Error('requestAnimationFrame is not supported in Node');
};
module.exports = react;
Run jest !
As marked on comments on the code
This is the solution from
https://github.com/facebook/react/issues/9102#issuecomment-283873039
this worked for me:
Install raf
npm install --saveDev raf or yarn add -D raf
Add the polyfill to your setupFiles in your jest config in package.json like this:
'setupFiles': ['raf/polyfill']
Note: if you have other setup files in this array, you may want to put raf/polyfill first.
If you just need to polyfill it for tests, then you don't actually need the throttling.
Create a new file with this code:
global.requestAnimationFrame = function (cb) {
return setTimeout(cb, 0);
};
Add that file to the jest/setupFiles array in your package.json.
If you are using create-react-app, some of these solutions will not work well (or at all, in the case of setupFiles). What does work well is creating a file at src/setupTests.js and adding your mock in there:
global.requestAnimationFrame = (cb) => { cb(); };
You can also add other global mocks in there (e.g. localStorage and navigator.serviceWorker).
Another working solution!
The idea is to load a simple shim before each spec, by using the setupFiles property in the jest config.
Create a file shim.js file (preferably in your root dir) and have this code in it:
global.requestAnimationFrame = (callback) => {
setTimeout(callback, 0);
};
Next, you may be having redundant code that keep reappearing in all/most of your files - and you want to put them in a single file and have them run before each spec also, to do that:
Create a setup.js file in the root dir too. A good piece of redundant code to D.R.Y is the react enzyme adapter configuration code. Paste it here
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Now create the jest.config.js file, to specify the paths of the two files
{
module.exports = {
"setupFiles": ["<rootDir>shim.js", "<rootDir>setup.js"]
}
}
N.B: The jest config file take json, so make sure json's in. Also, if your shim.js and setup.js files are not in the same dir as your jest.config.js, adjust the path accordingly.
Hope this helps!
Credit: https://github.com/facebook/jest/issues/4545
Here's a realistic way to mock requestAnimationFrame:
let time;
const maxTimeElapsed = 2000;
beforeEach(() => {
time = 0;
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
time += 100;
if (time < maxTimeElapsed) {
return cb(time) as any;
}
});
});
in your test, it repeatedly calls the RAF callback until it reaches the max elapsed time that you set. It happens instantly, so you don't need to stall it.
Just upgrade your react-scripts to 1.0.15 or above. It has been officially fixed after that version. See more details in https://github.com/facebook/create-react-app/issues/3199
Search the comment of gaearon commented on 31 Oct 2017
If you use TypeScript, the best solution is;
window.requestAnimationFrame = (): number => {
window.clearTimeout();
return 0;
};
Before all your describe and test suits.
According raf package docs at this moment need to run polyfill() function and specify object that need to be polyfilled. In my case works:
require('raf').polyfill(global.window)
Turns out it was because I upgraded enzyme without upgrading react and react-dom.
React 15.5 brings about some deprecations that caused many dependent libraries to have to update too. Make sure you are updating react, react-dom and check the README of those dependent packages for new libraries you have to install. For instance, Enzyme 2.8.2 now requires react-addons-test-utils as a dependency.
I've been working on a project using Meteor and React, which needs a PDF viewer with the ability to select text.
I'm currently trying to achieve this with Mozilla's PDF.js, but am having some trouble getting started. I'm a long time reader, first time asker at stackoverflow.
I've installed PDF.js with npm.
npm install pdfjs-dist --save
Now I'm trying to modify the example from pdf.js's github project here to create a React component that will render a PDF from a supplied file path and include a text layer.
imports/ui/components/PDF/PDFText.jsx
import React from 'react';
require ('pdfjs-dist/build/pdf.combined');
require ('pdfjs-dist/web/compatibility');
export default class PDFText extends React.Component {
renderPDF() {
PDFJS.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.js';
const container = document.getElementById('pdf-container');
const scale = 1;
const pageNumber = 1;
PDFJS.getDocument(this.props.file).then(function(pdf) {
return pdf.getPage(pageNumber).then(function(page) {
var pdfPageView = new PDFJS.PDFPageView({
container: container,
id: pageNumber,
scale: scale,
defaultViewport: page.getViewport(scale),
textLayerFactory: new PDFJS.DefaultTextLayerFactory()
});
pdfPageView.setPdfPage(page);
return pdfPageView.draw();
});
});
}
render() {
this.renderPDF()
return (
<div id='pdf-container'></div>
);
}
}
If I include this component in page I get the following error:
Uncaught (in promise) TypeError: PDFJS.DefaultTextLayerFactory is not a constructor
The next thing I tried was including 'pdfjs-dist/web/pdf_viewer' in my code, as this is where DefaultTextLayerFactory is declared. I modified the code above to add the following line above the class declaration:
require ('pdfjs-dist/web/pdf_viewer');
When I run the code now, I get a different error.
Uncaught TypeError: Cannot read property 'PDFJS' of undefined
at Object.<anonymous> (modules.js?hash=9dd20a3…:114918)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at Object.<anonymous> (modules.js?hash=9dd20a3…:117449)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at Object.<anonymous> (modules.js?hash=9dd20a3…:118157)
at __w_pdfjs_require__ (modules.js?hash=9dd20a3…:114838)
at module.exports (modules.js?hash=9dd20a3…:114884)
at modules.js?hash=9dd20a3…:114887
at webpackUniversalModuleDefinition (modules.js?hash=9dd20a3…:114811)
at pdf_viewer.js (modules.js?hash=9dd20a3…:114818)
I'm really unsure what is going on here. I noticed that the function complaining refers to webpack - which I haven't been using.
I've also tried including the following check at the start of my code (this is taken from pageviewer.js in the github link above).
if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
alert('Please build the pdfjs-dist library using\n' +
' `gulp dist`');
}
My code does in fact trigger that alert (PDFJS.PDFViewer is undefined) but the message doesn't seem correct as I installed the built pdfjs-dist library using npm. That message seems for people who cloned the repo. There isn't a gulp file in the pdfjs-dist directory - which makes sense.
I'm sure part of thep problem is that I'm experimenting with a lot of new tools here. This is my first time working with meteor, react, node, and pdf.js, so apologies in advance if I've made an obvious rookie mistake.
For the record I've tried a few other libraries, including:
mikecousins/react-pdf-js (worked reasonably well for simply displaying a pdf with no text layer).
peerlibrary/meteor-pdf.js (I hit some errors with this one as well, and I didn't pursue it too much further as the repo hasn't been touched in a couple of years).
Hopefully that's enough information for someone to spot the issue. My theory is that there's some other set up step I need to do to get this working for meteor or react (and that's why it hasn't been obvious from the "getting started" in the PDF.js website.
Also, I'm not locked in to PDF.js, so if the easiest solution to my problem is to use something else, I'd be happy to try that.
Thanks for your time