Module not found - project directory path error - javascript

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

Related

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.

React-scripts: Unable to import module from dist folder

I have a mono-repository containing a library application bundled using Webpack & a demo application to test the library.
When I try to import the library in the demo like this:
import Library from 'library-xxxx'
I get the following error:
Module not found: Can't resolve 'library-xxxx' in 'C:\repository-widget\demo\src'
When I try to import directly the library like this:
import Library from '../dist/library-xxxx'
I get the following error:
Module not found: You attempted to import ../dist/ which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Is there a solution to import the bundled library from the dist folder into the demo?
Here's my repository structure:
root
--dist
----main.js
----package.json
--demo
----app.js ------> where I import the library from the dist

Webpack path resolution

I have a SFCC project with multiple sites in one repository. Here is a brief overview of the structure of the codebase:
core
cartridge
js
something
dialog.js
modal.js
app.js
shirt.js
site_1
cartridge
js
page
file1.js
app1.js
site_2
cartridge
js
page
file2.js
app2.js
site_3
cartridge
js
page
file3.js
app3.js
build
site1.js
site2.js
site3.js
My webpack entry points are the site1, site2, and site3 js files. In each of those files, I am importing the respective app.js file. Each of these app.js files has their own files that they require for that particular site. When I run webpack I get the Module not found error.
In the app.js files, I am requiring outside dependencies like so:
require('./dialog.js')
The error for this example would be something like this:
ERROR in ../[site]/cartridge/js/app.js
Module not found: Error: Can't resolve './dialog' in '/path/to/repository/[site]/cartridge/js'
Any idea how I can concatenate the correct path to to these files?
Create an alias to core directory. Then require/import using [alias]/js/something/dialog.js

How to use node module? SyntaxError: import declarations may only appear at top level of a module

I'm trying to use fetch-jsonp, so I type npm i fetch-jsonp to download it and its in my package.json dependencies. Then I try to import it using:
import fetchJsonp from 'fetch-jsonp';
at the top of my main.js but it keep getting this error:
SyntaxError: import declarations may only appear at top level of a module
What is causing this? My file structure is:
JS -> main.js
node_modules -> fetch-jsonp
.gitignore
index.html
package.json
Type the script as a module where you reference it. Like so:
<script src="/js/main.js" type="module"></script>
See this answer for further information.

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

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

Categories