An imported module contains a .png file that I would like to overwrite with another one. On the web application I can see that the reference to this file isn't change even though it is not just a module of another project.
My question is: How to file paths work in a node module that is being imported? The built project should have another structure, right?
The import statement always takes the relative path from the file or searches the module in node_modules.
If you are writing something like
import Abc from './abc.js'
it will search for abc.js in the same directory. If you want to go to the parent directory, you can use ../ instead of ./. Whatever the location of the file you give, will be calculated from the current file. This current file can be imported again and the next file cares about only this file and not what it imports
If you are not using ./ or ../ then nodejs will look for the module in node_modules folder.
import React from 'react'
Related
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.
The top of most React files has:
import React from 'react'
Yet react is not actually a file. So where is it and how is it being imported from nothing?
When you import from react it first looks into the node_modules/react/index.js like other module looks for the index.js if there's no file specified. And you may also ask why does it look for node_modules? The answer is you have not specified relative or absolute file path for eg. ./components/MyComponent. When you do not specify the specific path, it will look for the node_modules directory.
The index.js exports is like:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
So, let's continue with development environment. Now, when you look into the file node_modules/react/csj/react.development.js, you will find several exports statement at the end of the file.
So, you're simply importing React means you're importing all of them. And thus, you can use React.Component, React.Children, etc.
It's not necessary that you must have named React but it's standard. So, even if you do:
import ReactApplication from 'react'
You have access to all of them like ReactApplication.Component. Hope, this clears up things.
Further details:
When you specify ./, it will look for the current directory.
When you specify /, it will look for the root directory.
When you do not specify, it will first look to directory in your project and if it doesn't find, it will look into the node_modules directory.
Other post you may be interested to look into: https://stackoverflow.com/a/27218926/2138752
React is available as a dependency in the node_modules directory.
React must also be in the scope of files containing JSX to enable transpilers like Babel know how to handle that syntax.
React is installed as an npm package, so it can be found in your node_modules folder. That's where it's being imported from.
I was using react rc-tree module in my project by importing it like this:
import Tree, { TreeNode } from 'rc-tree';
This worked fine. However after a while I wanted to make changes to the source code of rc-tree, so I cloned the source code from github into my ./src directory. i.e. I now have a directory called ./tree under my ./src directory. How do I call that code, rather than rc-tree in node_modules?
I have tried various import statements but nothing works.
Add .env file in root and add this line
NODE_PATH=src
Now import
import Tree, { TreeNode } from 'tree';
You should try to relative import your code.
Think if you are in this path src/component/childComponent/ where you import your desire package and here you must use a relative path to the package which is inside src.
import Tree, { TreeNode } from '../../tree';
this .. indicates that you go backward inside your current path.
In this example, it means to go up two directories (component and childComponent). here now you are addressing src directory you should write the rest of your path which is /tree.
I take look at rc-tree package and noticed it has been written with typescript. If your app doesn't support typescript you can't use source code of the package and you should build package first and then import build directory.
In case your app supports absolute paths you can easily use:
import Tree, { TreeNode } from 'src/tree';
I couldn't get these suggestions to work, probably my fault... so I just moved the entire rc-tree sub directory from node_modules to under my source tree and called it "tree". I then made a sym-link from node_modules/rc-tree to the ./tree in my source tree.
I just import Tree, TreeNodes etc, like I am using the module, but really it's calling the copy of the code in ./tree.
It all seems to work. The only thing that is not so good is that because the code is now under ./src the linter prints many warnings about the code. Obviously it is not my code, and I would rather not hear about it, but I can live with this.
Trying to import my folders but they keep on saying that cannot find folder but the folder I'm import is the correct:
./src/LoginPage/Login.js
Module not found: Can't resolve '../_actions' in >'/Users/mirasmith/Desktop/KPV1-Project-master/src/LoginPage'
I don't know how to show the image so if someone can help fix it. Here the link to the folder hierarchy.
https://gyazo.com/410386debd550039400cf40e9e448196
Does _actions have a index.js? When require is given the path of a folder, it'll look for an index.js file in that folder. If there is one, it uses it. If not, it doesn't know what file you're trying to import.
If you don't have an index.js in there, you'll need something like:
"import actions from ../_actions/filename.js"
If you are trying to do an import of all the files from a folder, this answer talks about how to do that:
https://stackoverflow.com/a/5365577/5216218
import alert from "../_actions/alert.actions.js"
import user from "../_actions/user.actions.js"
I am new to Go and AppEngine. I am trying to figure out how to create packages but I keep running into conflicts. My directory structure is below:
GOPATH
third-party-libs
app
app.yaml
controllers
default.go -- package controllers
models
models.go -- package models
templates
templates.go -- package templates
I am importing the templates package as follows import ("app/templates") inside default.go
When I do goapp serve I get this error:
Failed parsing input: app file templates.go conflicts with
same file imported from GOPATH
I have tried a bunch of things and nothing has worked so far. These are things I have tried:
Changed the templates directory to apptemplates and the corresponding file to apptemplates.go, changed package name to apptemplates. I imported it as app/apptemplates
I tried different combinations by changing the file name but not the package name, vice versa, etc. Either it does not find the file or has a conflict.
I am importing html/template in my templates.go file. So I commented out the entire file just keeping the package declaration but did not make the conflict go away
I thought may be another file is named templates.go but when I do this (at the GOPATH level) find . -name "*.go" | grep "templates.go" I only see the one file I have created.
I am confused as to how packages are created. I have changed the name to something generic so it does not look like a naming issue. Can someone please tell me how I can debug this error?
Thanks!
Rename the package to a non-conflicting name as in #1. Import the package using the path "apptemplates".
Packages inside of the application directory (the directory containing app.yaml) are imported with a path relative to the application directory. See Organizing Go Apps for the complete details.