I would like to include a JS library into my react app. This is really frustrating to include a simple script tag. However I am a newbie in react so might be I am doing an incorrect way.
The library is a TradingView library downloaded from Github. For this I tried many method but I am failed to include. After inclusion the correct path goes to 404. Let me explain what I did:
I put the library code in root folder and created a relative path and put the code in componentdidmount through document.createElement method.
I created an hook and included that but its going to 404. Ref: link
Tried with React-Helmet but same error. Ref: link
There are some more method I tried but none of them is working. Please help me out.
Related
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
This is somewhat related to an issue I'm having with CF on IBM Cloud here. My question after playing around with the folder structures is how exactly is CF building the app when it comes to relative paths?
For example, if i have the following folder structure
when I add <script type = 'text/javascript' src = '../index.js'></script> to the index.html file, I get GET https://simple-toolchain-20190320022356947.mybluemix.net/index.js net::ERR_ABORTED 404. This error does not happen when I move index.js into the public folder and change <script type = 'text/javascript' src = 'index.js'></script>.
The problem I have then is that when I try to require() any modules when the index.js file is in a sub-directory, it returns a Require is not defined error indicating that it is not getting the module from the node_modules cache which CF is suppose to build. Requiring any files in the same sub-directory also throws the same error. This does not seem to be a problem when the require() is used in the default app.js as the application loads without any errors.
I'm relatively new to the IBM Cloud Foundry tool but I'm following the same structure as when I pushed apps via Cloud9 IDE and didn't have any such issues there. I feel I might be missing something ridiculously simple like configuration of endpoint or package.json. However, I've been searching around for days and can't seem to find a solution.
Appreciate if you have any pointers. Thanks!
Due to my lack of understanding, I was trying to use require() on the client side hence the errors. Going to figure out how to use Browserify now. ;)
I am trying to integrate the jQuery-File-Upload (https://github.com/blueimp/jQuery-File-Upload) with the npm module "blueimp-file-upload-node" to process file uploads.
Sadly, this package "blueimp-file-upload-node" has not been documented yet.
The frontend integration is working correctly, but I am struggling to get the upload functionality working.
I have read and followed this section:
https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-nodejs which tells me to start the service by running:
./node_modules/blueimp-file-upload-node/server.js (notice, the path of this file is within my node_modules folder)
I would like to have the file uploader as a route of my app, (i.e. /upload) not a separate service, on a different port.
How would I go about that?
My code is here:
https://github.com/robsilva/fileUploader
I really appreciate if anyone can shed some light here.
Seems like you are looking for the express middleware
https://github.com/aguidrevitch/jquery-file-upload-middleware
I had already implemented authentication for the app I'm working on but am trying to refactor it based on a recent tutorial I did which I thought was very clear and also involved adding facebook / google / twitter auth which I would like to do.
So far, I've updated the user model and defined my local strategy for signup but when I go to try and run the app now, I'm getting an error. I have the app uploaded to github and wondered if somebody would be able to check it out and see where I'm going wrong. The error is pointing to a part of the index file until node_modules / express but I cannot work out what's up and I'd like to know before I proceed further.
Latest commit is under: https://github.com/DaveBage83/friendly-invention
Thanks!
A few things for you notice.
1 - Do not commit the node_modules folder. Once you have all your dependencies in the package.json file, the npm install will download all of for you again.
2 - This code is full of erros. I won't put everything here, I believe you find them by yourself. Otherwise, put the specific code here, so we can help you out.
About the question:
In you app.js file.
...
authRoutes = require('./routes/index')(app, passport)
...
If you look at the ./routes/index, you'll see that it is exporting a route object, witch does not expect the two parameters. (e.g. (app, passport)).
Hope it can still help you.
In my nwjs application i am using React to build my UI. Currently, React is being loaded via a <script> tag in the main file, index.html. index.html has another <script> tag which loads main.js containing code which defines and renders my React components as well as requiring (require()) a few Node modules such as "fs" and "McFly".
This all seems to be working, however when i try using another node module (react-inlinesvg) i get an error, "document is undefined".
Having looked online for help, i have come to the conclusion that React now believes that it is being run on the server? Which is odd, as before i started using the react-inlinesvg module it was happily rendering components using React.render (clientside rendering).
If you need any more context or information then please ask.
It could be that you are rendering on the server side, or also that you are rendering both sides. In the second case you could simple nest the line that is causing you error with:
if (process.env.BROWSER) {
the line causing the error
}
If the error disappears, it means that you are on the server side also!
I hope this helps...
Basically if you code is universal (or isomorphic, if you want...) with this check you can execute the code only on client side, you want to do this to use a particular style-sheet for example:
if (process.env.BROWSER) {
require("../style/main.scss");
}
Naturally if you want to do stuff server-side you can check
if (!process.env.BROWSER) {
}
if any one face this he can solve it in 2 ways:
Solution 1: if you are using nw.js 15 or above try to enable mix context mode:
in your package.json add this flag:
"chromium-args": "--mixed-context"
Solution 2: expose document to the global object using this hack:
global.document = window.document;