I have created a reactjs app which is inside the Loopback folder.
I put a folder tree image below. as the picture inside the client_src have react files.
I have used loopback-storage-component to store images. Those images are stored into files folder.
Now, my problem is to get stored images from files folder. So that, I used
<Img
src={require("../../files/revenue_Licence_Copy/5.jpg")}
/>
while I run reactjs App using npm start into client_src folder.
Then I got an error
Module not found: You attempted to import ../../files/revenue_Licence_Copy/5.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project'snode_modules/.
How to solve my problem
I refer below link
enter link description here but that also not solve my problem..
Please anyone help me?
So basically, you can do a symlink which links a folder inside your app folder to a folder anywhere else on the system. However, if at all possible, please avoid doing this. While a valid solution, it creates a whole bunch of problems in deployment, or moving the repo around. If you work with someone else, they have to have an identical setup as well etc. Moving the folder to the project folder, or having a backend serving data you want is a much better approach.
However, if you really wanted to, you could do, from inside the project folder's node_modules, so from the project root:
cd node_modules
ln -s ../../files ./linked_images
which would link your files folder to a folder called /linked inside the node_modules.
You can then reference the image inside by doing:
<Img
src={require('images/revenue_Licence_Copy/5.jpg')}
/>
Here's a stack answer explaining symlinks
Related
i was trying to publish my website via Vercel but somehow i couldn't...
I have the api url and token in index.js in consts folder.
I've tried to put api info in the .env file but i couldn't do that either.
Here is my files and the Vercel's error
I would be really happy if i use some help. Thank you.
My files
What vercel says
Keep all your .js files inside src folder.
Looking at your problem ,it looks like your index.js falls outside src folder. Try placing it directly in your src folder like your App.js, it should work fine.
Also, Run npm run build in your VS Code terminal before deploying it.
I'm building a React-Native component library.
I built a simple loader using lottie-react-native.
When installing the library locally, the component works.
After publishing the package on github and installing it, there is no error but the component is not displayed at all.
(FYI, I first encountered an issue installing it which has been resolved here : Why a dependency would not want to install when installing a library?
Now, the lottie-react-native dependencies appears in my node_modules).
I think I spotted the issue but I'm not sure and I don't how to resolve it.
First have a look at the freshly installed library's folder tree in the node_modules folder:
At this point, the lib folder shows an error, let's open it :
Ok, let's open the TS folder and sub-folders until I reach the error:
Now the index.d.ts file containing the error:
Originally, the assets folders contains the json files needed for the Lottie view.
When running the publishing process, my src folder is compiled to TS and the .d files are created.
I think the issue could be due to some tsconfig options or maybe the way I import things, but I'm not sure.
Here's the folder structure in the dev environnement:
Since it works fine when the lib is installed locally, I'm pretty sure that the issue occurs when compiling to TS.
What do you think?
Looks like you have 2 problems here.
png and json extension are not copied to the destination folder. You can fix this by copying manually or using tsc-hook.
.js extension files are not compiled. I think your tsconfig file has set emitDeclarationOnly to true. Try setting that to false.
I have been running into this error "Could not find a required file. Name: index.html" when I attempt to deploy my React Portfolio to Heroku. I have looked at previous answers and I have not found a solution. I do not have my public folder in .gitignore and I will attach a photo to show.
Do I need to add certain "scripts" in my package.json that I may be missing. I also tried buildpacks after watching a youtube tutorial and that did not seem to work either.
If you're deploying from Git, anything gitignored will not be included in what gets deployed. Rather than ignoring the whole public directory, you could ignore only some files, for example public/*.js.
EDIT: see comments, I misread the question.
The solution to this was that I did not have all my files at the route. Simple as that, I just needed to delete the parent folder and move all files to the route of the directory. I had them nested within 2 folders, I had moved them out of one of those folders thinking it was at the route but it needed to go one more folder out and that was the issue that I was having.
I have a webpack react project. It runs only webpack, but I want to remove the webpack related matter and run as a normal react project.
webpack is just a bundler. It bundles all your js files and dump that as string in eval function in one single js file.
I Got your question now. I guess, you mean that you have a react project. Its developed now. And you want only the usefule files now, right? If thats the case, you need only two files(primarily for the project). First you build the project with whatever script you have, I guess, npm run build.
Post that, you will see a dist folder at the root.
Inside that dist folder you will find one index.html file and index.js file. Besides this you may want css and assets folder.
Does that answers your concern?
I want to build a blog with create-react-app and host it on Github pages.
I want the posts content to be md files I dump on some folder in the repo.
I'm able to render md files currently only by requiring each file in code, fetching it and rendering.
this s not very scalable.. I don't want to have an import line for every file I add...
Is there a way for me to "require" all of the files in a specific folder so I can fetch them in runtime?
Checkout gatsby https://github.com/gatsbyjs/gatsby
You should be able to get an idea how they are pulling this off without a backend service. Gatsby does exactly what you're describing. If anything you should be able to extract the functionality if you don't want to go with the whole framework. It is very very fast though =)