To begin, I've looked up various similar posts which have not solved my issue. I have tried using rescripts and other methods to no avail. I also am not able to move this file from it's original location.
I am in the process of building a create-react-app that utilizes an API for application data. The API file that I am using is named api.js and is outside of the src folder where my react application lives. When I try to import this module I receive an error saying,
"Module not found: You attempted to import ../api which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."
Here is the folder structure that I am working with:
- react-jobly
- backend
- jobly
- src
- Companies.js
- api.js
Related
I recently switched to create-react-app as I had issues in production.
Now, I have this folder structure with the images being inside my asset folder which is inside my src folder:
At the top of my Main.js-file I seek to import my image files like so:
import Pic from "../assets/Aalto.png"
However, I get this error from devserver: "Module not found: Error: You attempted to import ../assets/Aalto.png 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/."
-> this code worked flawlessly before my switch to create-react-app AND when trying to import "./Website_pic.jpg" instead (which you can see in the picture), which is not inside my asset folder, then the problem does not arise.
How can I fix this?
You are trying to go out of the src folder by using ..
Change this
import Pic from "../assets/Aalto.png"
To this:
import Pic from "./assets/Aalto.png"
i have created one components folder which is outside the src .Now i need to access that components inside the src .
suggest steps to do that(instead of moving components folder inside src)And the other solutions didn't helped me to solve this
and the error is
Compiled with problems:X
ERROR in ./src/App.tsx 27:0-198
Module not found: Error: You attempted to import ../almLib/almLib
which falls outside of the project src/ directory. Relative i
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/.
You cannot do this when using Create React App. There are some libraries that allow you to override this configuration but the best solution is to move your folder inside /src. If you still want to have this folder structure then you can follow this thread that includes many alternatives.
I'm trying to extend the create-react-app with new folders and files outside of the /src directory. But this is by default not allowed by create-react-app. I tried to import a .json with this command:
const contractABI = require('../../artifacts/contracts/MyNFT.sol/MyNFT.json')
The error message:
Module not found: You attempted to import ../../artifacts/contracts/MyNFT.sol/MyNFT.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
I tried to create a symbolic link like so: mklink /d \MyContracts \artifacts\contracts\MyNFT.sol
This was successful \MyContracts <<===>> \artifacts\contracts\MyNFT.sol
Now, how can I import it into my react javascript file? I tried const contractABI = require('MyContracts/MyNFT.json') without success.
Any help would be great or any other approach how to solve this issue. Thanks a lot
I found a workaround by adding paths: {artifacts: "./src/artifacts"} to the hardhat.config.js I could configure that hardhat should create the directories and files inside the /src.
I am trying to add image to the carousal from the public/image folder in the carosal.js file.
My component tree looks like this:
I wrote " ../../public/image/cover1.png"
but getting an error saying:
Module not found: You attempted to import ../../public/image/cover1.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Assuming this is a create react app project, the public folder is served statically, so instead of directly trying to import the image from the public folder you can simply reference the image in your code without the relative path.
As an example, you could do the following
<img src="image/cover1.png" />
This way you are not actually importing the image file like its a module, but instead you are having the server serve it the browser statically.
I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/