REACT How to access to a file from outside src folder? - javascript

I'm pretty new on React world. I'm working on a project and I'm trying to access to a file from outside the current src folder and I got such a strange error:
Module not found: You attempted to import ../../../server.js 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's node_modules/.
Any ideas of how I can fetch data from a file from outside src folder without getting this error?
Thanks in advance

Related

How do I add a symlink from project's node_modules?

I've been following a tutorial on how to code a Password Manager using React, Node.js and MYSQL.
I suddenly got this error telling me the file, /EncrpytionHandler, falls outside of the project src/ directory.
Though, the file structure is the same as it is in the video.
I'm not sure what to do, being that even when I do move the file, the error still occurs.
Here is the video to the tutorial and a screeshot of my workspace:
Compiled with problems:
ERROR in ./src/App.js 9:0-66
Module not found: Error: You attempted to import ../../server/EncryptionHandler 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's node_modules/.
Coding a Password Manager - ReactJS, NodeJS, MySQL
Image of my workspace
You attempt to import file outside of the project src/ directory. This functionality was added to "create-react-app" not so long ago. You might want to resolve it by simply adding the same file to your frontend app, say, to src/util/ directory, or proceed with this answer:
ReactJS import component outside src/ directory
Note that you have run the server on the src folder, so it is normal for it to run as the root directory of your server process, so this process has no right to exit its root, so it is best to add this module to the src folder To make exporters available in that folder, otherwise you can create a Symlink for it as follows:
create this file with name "createSym.js" in src dir and And put the following program in it :
// Node.js program to demonstrate the
// fs.symlink() method
// Import the filesystem module
const {symlink} = require('fs');
symlink("../../server/EncryptionHandler.js",
"./EncryptionHandler.js", 'file', (err) => {
if (err) console.log(err)
else console.log("done");
);
and run this with node in src directory<as current work director(cwd or pwd)>
node createSym.js
Note that to do this, you need to have the required permission

Module not found - project directory path error

I am getting an error message that says: Module not found: You attempted to import ../contracts/PreciousChickenToken.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. How do i setup my relative path properly to consider the directory structure? i imported my contract .sol file into app.js like this: import PreciousChickenToken from "./contracts/PreciousChickenToken.json";
MyApp
build/contracts
PreciousChickenToken.sol
client
src
app.js

Can't get the relative path right React

Folder structure:
my-app/
node_modules/
package.json
src/
websites/Home.js
pictures/Group140.png
App.js
index.js
I am located in Home.js
I am trying to import Logo from "../pictures/Group140.png";
and use it as a src={Logo} on img. Keep getting this error
Module not found: Can't resolve '../pictures/Group140.png' in 'C:\Users\User\Desktop\Website\my-app\src\websites'
In react-create-app you have to import the image if you want to use it in your javascript code, you can see that in the default app.js file where it imports the logo.
Alternatively you can put your images (or other assets) inside the public folder and access them directly. RCA already saved the public folder path in the handy env var process.env.PUBLIC_URL.
See here.

VueJS JavaScript path finding leads to a default path

I'm trying to import external js file to vue component and embed that imported file to a script tag.
Here is my code.
created(){
let ckeditor = document.createElement('script');
ckeditor.setAttribute('src',"./jsmaps/jsmaps.js");
document.head.appendChild(ckeditor);
}
But it gives an error
Loading failed for the with source
“http://localhost:8080/jsmaps/jsmaps.js”.
jsmaps folder is not in the localhost.
It is inside the my vue js project folder's src folder.
Why this take localhost in default and how I override this default behavior to load that script which is inside my Vue project's src folder
I found solution by my self.
Basic reason for this error is I gave only
('src',"./jsmaps/jsmaps.js");
It takes path correctly after I give the full path.
('src',"src/student/jsmaps/jsmaps.js");
I only give the relative path only it leads to localhost to find the path. =)

Node.js - Error: Cannot find module 'config/chgpass'

I created the files following the tutorial (http://dataops.co/android-login-registration-system-with-node-js-and-mongodb/), but unfortunately the error is shown like in the image.
I'm new to node.js and to this kind of programming.
PS.: All of the other files that are referred in the tutorial are right, and the chgpass.js is in the target folder.
Code from the file that requests the chgpass.js file AND the tree from the folder (open with Word and select MS-DOS):
http://www.mediafire.com/download/w283nsjuuj9j794/File-Folder.txt
As your config folder is inside of node_modules folder, thus use:
var chgpass = require('config/chgpass');
Explanation:
In tutorial config folder is inside node_modules that way you can directly access it using require('config/chgpass')
But if you put outside of node_modules then you have to give the complete path of the folder from the location you are requiring it. That is in your case: require('../config/chgpass')

Categories