React trying to access file at a wrong path - javascript

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.

Related

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.

How to import file from public folder in react application?

I have a javascript file in the public folder and I want to import that file to components in the folder src/components.
projectFolder
publicFolder
index.html
recorder.js
srcFolder
componentsFolder
Speech.js
Speech.css
But I can't do something like this in my component:
import Recorder from '../../public/recorder'
Because I get the following error:
Module not found: You attempted to import ../../public/recorder 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/.
As I've understood it's not allowed to import outside of /src directory, so I was wondering how I could "add a symlink" or if you know other ways to fix it.
I believe you are using create-react-app ... this is a feature included in the ModuleScopePlugin, and you can disable it by ejecting the app and editing your webpack configuration (as described in this answer).
But beware, the feature exists for a reason. The create-react-app build tool only processes the src/ directory, so for example your JavaScript outside of here will not be transpiled by Babel. Furthermore, you're typically trying to avoid polluting the global scope if you're using a bundler like Webpack. So unless you've got a really specific reason why you'd need to do this, I'd say try and move it.
You can modify the react-scripts config with the rescripts library
Create a file called .rescriptsrc.js in your root folder:
module.exports = config => {
const scopePluginIndex = config.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
);
config.resolve.plugins.splice(scopePluginIndex, 1);
return config;
};
If you're ok not using the actual file in public and having a duplicate js file in the src directory there's a hacky but cool solution if you use vscode. This vscode extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave allows you to trigger a command on save (you can use regex to specify which file saves should trigger which commands) and you can specify a command to run on save as such:
{
"match": "public\\\\recorder.js$",
"cmd": "copy ${file} ${workspaceFolder}\\src\\recorder.js"
}
Now you can import from that duplicated file.
As i can see you want to import parent component in child component.
While defining path './' represents the current directory in which you are working so you can go one level up by following '../' for one level up and the same goes for the upper level directory.
So if you want to import from public folder inside Speech.js component you could do something like this.
// In Speech.js
import Recorder from './../../public/recorder';
Hope this will be useful to you.

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

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

How to require an alternative js file from a npm package without specifiying full node_modules path

I am using the ES2016 import syntax to load the select2 libray from an npm module (via Webpack):
import 'select2';
This works fine and loads the following file from the node_modules directory.
node_modules/select2/dist/js/select2.js
Now within that directory they have a full version of the library which has some extra functionality I need, it is called:
node_modules/select2/dist/js/select2.full.js
Is there a way to import this without providing the full relative path to my node_modules folder?
I tried:
import 'select2.full'
but no luck.
Try this:
import 'select2/dist/js/select2.full.js'
I think this is the best you are going to get.

Categories

Resources