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.
Related
I am making a real-time card game using react for my front-end (which was made using CRA), and I am storing all of my cards as .svg files in a subfolder in the src folder. I have seen in other questions that for single files you could use import {ReactComponent as Image} from 'whatever.svg' and for an entire folder to use require.context(). While the import statement works, the require.context method just provides me with /static/media/whatever.randomStuff.svg files that I can only import by making an http(s) request to that location on the site. I have tried using #svgr/webpack in the require.context function, but even when installed manually, it gives me the same output. Is there a way for me to use the import statement or something else to import all of the .svg files in that folder as ReactComponents in the file instead of having to make an http(s) request?
The answer I was looking for was in this answer from another question. One thing I didn't know at the time of posting was that the version of webpack that react-scripts was using (v4.44.2) already had #svgr/webpack, so manually installing it with npm was essentially useless because it was probably already using it to generate the /static/media/fileName.randomStuff.svg files in the first place. In the end I used an intermediate file in the svg folder and did this:
interface CardCache {
[key: string]: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
}
const cache: CardCache = {};
/* eslint import/no-webpack-loader-syntax: off */
const files = require.context("!svg-react-loader?name=card!./", true, /\.svg$/);
files.keys().forEach(path => {cache[path] = files(path)});
export {cache};
I used the eslint comment because I did not want to replace react-scripts with something like react-app-rewired just so I could have access to the webpack.config.json file.
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.
I try to add some modules in my app and when i try to compile it, it caught
such errors. By the way i only import module to js file and dont even use it.
Here is my folder structure. I try to import in index.js in createwaiver folder (2nd highlight).
I tried to check my webpack config, but there js extension allowed (copied config file).
Here is my src/util folder and one of its components thats renders other components in async way
I'm not 100% sure but I believe your problem is that util alias you have on line 208 in your webpack config:
util: `${this.srcPathAbsolute}/util/`
it means all import 'util/....' will resolve to yourrootfolder/src/util, I'm not sure what you have there in that folder but I'd start with removing that line or renaming it to:
waiverutil: `${this.srcPathAbsolute}/util/
or similar and go through your code and remove all your 'util/...' imports to waiverutil/....
If that doesn't help let me know, also try posting some more stuff like your imports and /src/util folder.
In your resolve.alias property, you have an alias defined as util: '${this.srcPathAbsolute}/util/'. This is causing the errors because anywhere in your app files and node_modules directory that an import or require statement includes util at the beginning of the path, that path will be rewritten incorrectly to start with ./src/util/.
This alias:
resolve: {
alias: {
util: `${this.srcPathAbsolute}/util/`
}
}
needs to be renamed to something else to avoid conflicting with the util package that many packages import. Because of this, you'll also need to change the paths starting with util in your app files to match this change.
For example, to import the test utils:
import ReactTestUtils from 'react-addons-test-utils'
It works, but there is no such module as 'react-addons-test-utils' under node_modules.
And a cursory look at React source code under node_modules reveals that 'react-addons-test-utils' does not exist. In the module root directory there are only react.js and addons.js.
How does this work? What am I missing with my understanding of NPM?
It shouldn't work. Sounds like you may have installed the dependency somewhere globally. I am certain it shouldn't work without the actually package.
BTW, react source code does not actually use react-addons-test-utils:
https://github.com/facebook/react/search?utf8=%E2%9C%93&q=react-addons-test-utils
I'm already familiar with ReactJS and CommonJS. I know what the exports mean, but looking at this index.js file from ReactRouter library, I don't quite understand the meaning of exports in this context.
When I browserify this project starting from the index.js file, will the results of exports be defined in the global scope?
I was expecting something like this:
ReactRouter.DefaultRoute = require('./components/DefaultRoute');
But instead, in the index.js, there's this:
exports.DefaultRoute = require('./components/DefaultRoute');
If I found the exports.DefaultRoute anywhere else, but in the index.js file, I would understand it. But as I'm not requiring index.js anywhere, how would I be able to reference DefaultRoute?
Will this be in the global scope?
package.json appears to be using index.js on line 13. I believe that index.js is the main module file exported by webpack. So require('ReactRouter') would include all the exports from said index.js.