im trying to create a text file in a typescript next.js application.
const vCard: File = new File(["..."], "card_file.vcf");
export default vCard;
I'm getting this error thrown:
Server Error
ReferenceError: File is not defined
The goal is to make this file downloadable by the user like so:
<a aria-label={"Link to vCard"} href={URL.createObjectURL(vCard)} target={"_blank"} rel={"noreferrer"} download={vCard.name}>
<QRCode/>
</a>
The reason behind this is to ship the file within the javascript code, so there is no downloading from the server involved once the application loaded.
My question is: Is there no File class in next.js applications? I did the same thing in another project with pure React and it worked fine...
I tried to search the internet about this, but couldn't find anything about it.
Related
I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I am trying to display images that are in my public folder of my react app in the compnents and use require statements inside react-image tags as follows:
{profile.profile.picture && <Img src={require(`../../../public/profile-pictures/${profile.profile.picture}`)} alt=""/>}
I keep getting the above mentioned module not found error despite the image being present exactly where it should be. I tried a lot of solutions on SO but none of them seem to work for me. What could the error be?
Also I am new to React and am absolutely lost on what exactly is webpack and where do I even find this webpack.config.js file (if it exists for my app)
guys I am fairly new to React Js, however I am working with a code that has been sent over and I need to edit for some images. So, I know the basics of changing, styling and just overall editting in React js, not that hard. But I am newbie when it comes to error messages or errors I can not see.
"dogs":{
"text": "This is text",
"src" : "img/dog.png"
}
Calling it in my app.js using:
let {text, src} = config.sections.information[title];
return (
<ImageSplit key={k} title={title} direction={dir} text={text} src={src} />)
So, as you can see in the code snippet above I use a .json file for the text and image. However, the images do not come up at all, and in the console i am getting the error message of:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have looked online for a solution with using WebPack, and it wants me to use require() however, I get the error of 'no module found of 'image name''
Solution:
Image file should be relative to the .json file not the app.js. Rookie move.
With trying my best to find out exactly what went wrong, I came across nothing within the console, apart from the error message mentioned above.
So, I found out the issue I was having was based up my git repo not being up to date, so the live version of the app was working fine with the images but the client side was not. Pulling also did nothing, so what I done is I reinstalled WebPack, reset my .json file and made sure the images were relative to the .json file and not to the app.js. Rookie move on my part. Thank you for everyone who replied and tried to help.
I am trying to load a utility file called as apiclient which is present in
app/stores/util
My distribution folder has a file cfile.js which is calling this file using the following code :
var api = require('../util/apiclient');
I am able to load the component files etc which are present in the app/components folder via a similar code and they work without any issue. But when i try to load the API client i just keep getting this error.
Uncaught Error: Cannot find module '../util/apiclient'
This is how my files and directories are present http://prntscr.com/7qkovs
Could someone help me out over here ?
Thanks
Well your structure is like this:
clinical-notes
app
stores
util
apiclient.js
dist
cfile.js
So when going from cfile.js to apiclient.js the correct require path would be ../app/stores/util/apiclient.js.
But this is neither a reactjs nor flux problem ;)