Develop Reference

Module Not Found React Js

Failed to compile.
Module not found: Error: You attempted to import ../components/App 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/.
ERROR in ./src/index.js 6:0-36
Module not found: Error: You attempted to import ../components/App 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/.
webpack compiled with 1 error
i am getting the above error when i am trying to rum my react app. I was learning and a beginner at react js. i was learning about mapping in reactjs and when i run my app i am getting this error anyone please solve this.
the file system allocation is below.

Use import App from "./components/App" instead of import App from "../components/App";

../ means that you want to go out from the folder in which your file is. that means that ../ takes you under mapping so you import like this
import App from "../src/components/App"
but it is better to not go out and use ./ to stay under src and import like this :
import App from "./components/App"
both are correct.

Use a Node module in a public JS file in a Laravel app

I want to use https://github.com/ueberdosis/tiptap in my Laravel app.
I did an npm install #tiptap/core #tiptap/starter-kit and the modules are installed fine and visible in my node_modules folder. Then, I added
import { Editor } from '#tiptap/core'
import StarterKit from '#tiptap/starter-kit'
to my resources/js/apps.js and ran an npm run dev. I can see some tiptap code in my public/js/app.js file.
I would like to instantiate a tiptap class from another public JS file:
which didn't come out of webpack
which I declared with a <script type="module" src="{{ asset('js/tiptap.js') }}"></script> in my Blade file
which contains following:
import { Editor } from '#tiptap/core'
import StarterKit from '#tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
but I just get a Uncaught TypeError: Failed to resolve module specifier "#tiptap/core". Relative references must start with either "/", "./", or "../". in the console.
So yeah, wrong path for the import most likely. I tried to change it to './app.js#tiptap/core' and other variations but always end up with a 404 Not found.
I feel like I'm maybe doing the wrong way maybe, I don't know. Would you guys have any tips on how to do that ?

You can't access a package from outside because when webpack built it for you it encapsulates the file as a bundle so to be able to access it you could create another js file in the resources/js after that include it inside the app.js to be bundled with webpack like this
// hello.js
console.log("welcome from hello script")
// app.js
require('./hello.js')

React trying to access file at a wrong path

I've created a React app using create-react-app and I can't eject it to change the webpack configs.
That being said, I'm trying to use index.scss as a hub and I'm importing all .scss files from sections folder.
At _header.css, I have the following line working fine:
background-image: url(../img/bg_desktop.jpg);
But when I import it to the index.scss file:
#import './sections/header.scss';
React throws the following error:
Module not found: You attempted to import ../img/bg_desktop.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
When I change the path to "./img/bg_desktop.jpg" it doesn't find it either.. so it's working with neither relative path.
Is there a way to fix this without ejecting the whole thing?
This is how it's structured:

Use img/bg_desktop.jpg as ./ represents the current directory, which I believe can be changed during run time.

Making files in sub-folder available directly under npm import root

I am making an npm module that has this folder structure:
lib/
one-icon.jsx
another-icon.jsx
/* about 100 more */
package.json
I want to be able to import them like so:
import OneIcon from 'icon-package/one-icon';
I don't want to move the files from /lib/* to /*, because that will mess up my repo, and it will make the entire project a maintenance nightmare.
Is there any way I can tell npm that icon-package/some-icon refers to icon-package/lib/some-icon?
I tried setting the files field in package.json, but that only made sure the lib/ folder was included in the node_modules package.
Any ideas?

Maybe you can import like this?
import {OneIcon} from 'icon-package';
And having index.js in the package like this :-
export OneIcon from ‘./lib/OneIcon.jsx’

Import files from parent directory into React Native app

I have a file hierarchy as follows:
-native
-app
-components
login.js
-redux
-modules
-users.js
In my login.js file, I attempt to import the users.js redux into my code as such:
import { actions as usersActions} from "../../../redux/modules/users";
It is shared code and I cannot put the redux code in native/
The error I get is:
Unable to resolve module ../../../redux/modules/users. ... Unable to find this module in its module map or any of the node_modules directories.
I've looked at the other questions, such as: React import from parent directory but in the comments it states it to be impossible. I've also tried the fixes in https://github.com/facebook/react-native/issues/4968 but that seems to be mostly for node-modules.

Try creating a symbolic link inside the native directory that references the parent directory