Develop Reference

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.

Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

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.

React JS import error - Module not found: You attempted to import ../actions which falls outside of the project src/ directory

I am building a Spotify Application with their web API and am running the front end with React. I am importing my actions to my component, but I get this error
Failed to Compile
./src/SearchBar.js
Module not found: You attempted to import ../actions 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/.
But my actions folder is 100% within my src directory of my client. I have imported Actions in the past, but for some reason it's different, does it have something to do with my server?
Thanks for checking it out!

When you use ../ you're trying to access to the parent folder. That's why now you're out of the src folder.
If you want to import something at the same level, you should use ./ In your case ./actions/yourFile

react or npm issue: Module not found: [CaseSensitivePathsPlugin] `...\react.js` does not match the corresponding path on disk `react`

I'm getting the following errors when I execute the npm start command on a react project.
Failed to compile.
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\React\react.js` does not match the corresponding path on disk `react`.
# ./~/react-scroll-pagination/dist/index.js 3:27-43
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.js` does not match the corresponding path on disk `jquery`.
# ./~/react-scroll-pagination/dist/index.js 3:45-62
I'm new to react - but from what I can tell it's a pathing issue where npm install adds modules into the node_modules folder, all with lowercase folder names, but the compiler resolves to folder names with mixed case paths.
How do I fix this? The code is from the MongoDb Stitch PlateSpace tutorial project
Do I updated the existing code (maybe the import statements) or is it a npm or react issue?
Thanks
Tim

I come across the same problem.
I replaced :
import React, {Component} from 'React', with :
import React, {Component} from 'react'.
React is case-sensitive, so be careful and good luck.

For anyone facing this issue who is using CRA, I was getting this error and was not understanding why. My VS Code clearly showed the correctly named file, so I decided to check in the terminal:
ls -la [path/to/file/location]
I then actually saw that the file was in fact lowercase!
I renamed the file via the terminal and re-listed it to confirm:
mv src/create_page/createPage.jsx src/create_page/CreateDashboard.jsx
ls -la [path/to/file/location]
This fixed my issue, so at the end, I am not sure why this happened, maybe because my VS Code was not autosaving before I set the settings flag.

Solved it...
I haven't import all the libraries. So, I went to my root folder and excecute.
npm install
then
npm start

You may be executing the npm install / start inside of the wrong folder. I would delete the current directory and make sure to run the install in:
cd /stitch-examples/helloworld/react-example/
then
npm install
npm start

For this error :
import React from 'react'; in your index.js file . For this error : Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace this code import React from 'react'; in your index.js file .
For this error :
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace the code with import Jquery from './jquery';
Don't worry this errors will shows pretty commonly its because react is a case sensitive.

For me the issue was the files on my disk was named filename.js, but my imports were doing this import thing from 'fileName.js'.
Renaming the file from filename.js to fileName.js on disk fixed the issue.

How does import statement look for a module from installed node modules in reactJS?

I just want to know one thing,
Consider i have defined a dependency in package.json file like "some-library": "1.0.0"
and installed it using npm install. which will include all dependencies to node_modules folder.
then am importing a Component from that dependency using
import SomeLibrary from 'some-library;
when we do this where this import statement start looking for the component which we are importing ?
can some one explain in a better way. i have googled alot but didn't find any relevant answer. Thanks in advance.

At it's core, the import statement uses the same module resolution method as require().
So for installed modules it goes like this: By calling require(X), it gets a list of all the 'node_modules' directories present in the parent directories. Then, it tries to load the X module from each of those directories (either as a single file, or a directory.)
https://nodejs.org/api/modules.html#modules_all_together