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
Related
I am writing a React+react-query application today and I am running into a problem when I switched from development mode to production mode.
Production mode is a mix of running npm run build and serving those HTML/JavaScript/CSS files inside a serve (maybe using npx serve dist). Development mode is just running npm run dev (or npm start if using CRA).
This is the code:
const useMyQuery = () =>
useQuery(
["myAwesomeData"],
async () => {
const { data } = await axios.get(`http://http.us/500`);
return data;
},
{ placeholderData: { myAwesomeProperty: [] } }
);
const App = () => {
const { isError } = useMyQuery();
return isError ? <div>Error</div> : <Child />;
};
const Child = () => {
const { data } = useMyQuery();
return (
<pre>
<code>{JSON.stringify(data.myAwesomeProperty)}</code>
</pre>
);
};
For the sake of simplicity, I omitted QueryClientProvider and its client. Also placeholderData is being used as a loading state, which allows Child to be properly rendered while real data is loading.
The most important part here is data.myAwesomeProperty AFTER the loading state - which throws an error ONLY when running in production. The error produced is:
TypeError: Cannot read property 'myAwesomeProperty' of undefined
When running on development, the <div>Error</div> appears as expected.
My main concern here is NOT solve the problem (as I could simply add a if statement on Child component to prevent accessing data.myAwesomeProperty).
Instead, I would like to know why there is a difference between development's and production's behavior? Is it documented somewhere?
The dev and prod version of React has quite a bit difference. But the main one can be the speed here. In general the prod version is a lot more performant.
Based on the way you write, there's no way you should expect a valid myAwesomeProperty. So in the prod, you get the error right away.
In the dev, maybe things slow down, when you get the Child, the API already finishes.
NOTE: list coupe of dev/prod difference.
profiler enabled to collect time info
debug logger, adds quite a bit name and check
check hooks count and order match
strict mode adds bunch of stuff, https://reactjs.org/docs/strict-mode.html
I also notice in the strict mode, things can be rendered twice, My React Component is rendering twice because of Strict Mode
This might answer if you don't get an error, since the double render actually happened in one update (not two updates).
I'm trying to embed Pdf tron to my React application. I'm receiving this error when I'm clicking on the tab I want to filter to find the relative pdf file.
const handleFilteredDocs = (id)=>{
const filteredDoc = props.location.documents && props.location.documents.filter(doc=>{
return doc.controlId === id
})
setFileteredDoc(filteredDoc)
setPdfPath(filteredDoc[0].filePath)
WebViewer(
{
path: 'lib',
initialDoc: `lib/pdf/${pdfPath}`,
extension: "pdf"
},
viewer.current,
).then((instance) => {
const { docViewer, Annotations } = instance;
const annotManager = docViewer.getAnnotationManager();
docViewer.on('documentLoaded', () => {
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
// values are in page coordinates with (0, 0) in the top left
rectangleAnnot.X = 100;
rectangleAnnot.Y = 150;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 50;
rectangleAnnot.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(rectangleAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotManager.redrawAnnotation(rectangleAnnot);
});
});
}
I'm thinking is because the ref component didn't receive in time the pdfPath state and then throw the error. I've tried to place a separate button to load the pdf with the pdfPath correctly updated and in that case worked. What can i do make it render correctly there?
this is the error I get from the console:
(index)
Value
UI version "7.3.0"
Core version "7.3.0"
Build "Mi8yMi8yMDIxfDZmZmNhOTdmMQ=="
WebViewer Server false
Full API false
Object
CoreControls.js:189 Could not use incremental download for url /lib/pdf/. Reason: The file is not linearized.
CoreControls.js:189
{message: "The file is not linearized."}
CoreControls.js:189 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding. See http://www.pdftron.com/kb_content_encoding for instructions on how to resolve this.
CoreControls.js:189 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding. See http://www.pdftron.com/kb_content_encoding for instructions on how to resolve this.
CoreControls.js:189 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding. See http://www.pdftron.com/kb_content_encoding for instructions on how to resolve this.
81150ece-4c18-41b0-b551-b92f332bd17f:1
81150ece-4c18-41b0-b551-b92f332bd17f:1 PDFNet is running in demo mode.
81150ece-4c18-41b0-b551-b92f332bd17f:1 Permission: read
CoreControls.js:922 Uncaught (in promise)
{message: "Exception: ↵ Message: PDF header not found. The f… Function : SkipHeader↵ Linenumber : 1139↵", type: "InvalidPDF"}
Thank you guys for any help I will get on this!
The value of "pdfPath" isn't set to "filteredDoc[0].filePath" yet after you call "setPdfPath" (it'll still be the initial state till the next render). One thing you can do is pass a callback function when using "setState" to call "WebViewer()" after "pdfPath" has been updated
https://reactjs.org/docs/react-component.html#setstate
Also there is a guide on how to add PDFtron to a React project in the following link
https://www.pdftron.com/documentation/web/get-started/react/
One thing to note, is it's does the following
useEffect(() => {
// will only run once
WebViewer()
}, [])
By doing the above, "WebViewer" is only initialized once. It might be a good idea to do something similar and use "loadDocument" (https://www.pdftron.com/documentation/web/guides/best-practices/#loading-documents-with-loaddocument) when switching between documents instead of reinitializing WebViewer each time the state changes
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.
I just built an angularjs app using geofire for location. It works perfectly in production but has issues when i deploy it to firebase. I believe the error should be from here
getLocations(radius: number, coords: Array<number>) {
console.log(radius, coords)
this.geoFire.query({
center: coords,
radius: radius
})
.on('key_entered', (userKey, location, distance) => {
//we need to check this because this.hits the behavioursubject already cached previous result and geofire fetches again each time we go back to homepage
const existAlready = this.hits.value.filter(h=>h.userKey === userKey)
if(existAlready.length > 0){
return
}
console.log(userKey)
const u = this.userList.query.ref
.child(`/${userKey}`)
.on('value',s=>{
const {name, address} = s.val()
console.log(s.val())
let hit = {
location,
distance,
name,
address,
userKey
}
let currentHits = this.hits.value
currentHits.push(hit)
this.hits.next(currentHits)
this.eventService.sendMessage(Constants.EVENT_MESSAGES.LOADING, true)
})
})
}
The above code is meant to fetch the locations around me as soon as the app loads. But instead i get this error
#firebase/database: FIREBASE WARNING: Exception was thrown by user
callback. TypeError: Cannot read property 'myID' of undefined
The error only comes in production
I have corrected the error with the following versions of libraries
npm uninstall firebase
npm uninstall angularfire2
npm install firebase#^4.11.0
npm install angularfire2#^5.0.0-rc.6
I am getting this same error in production in my application as well. The only thing that seems to fix it is clearing my google cache, history, and cookies. It isn't a permanent fix in the slightest, but try and see if it helps.
Not sure if that's the solution but that worked for me. I think the real problem happens once you deploy a new build and not clear the cache.
So for me, eveytime i deploy, i have to clear the cache again.
interesting enough, this just happens in chrome. I tested it in Edge and i don't have to go through that.
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