I use standard ES6 imports in a react project that is built with Webpack.
For example, at the top of my files will be statements like this:
import React, { Component } from 'react';
import _ from 'lodash';
I found that if multiple files use React, I need to import it in each file.
But I only need to import lodash in one file, and it is available everywhere.
Why the difference?
Looks like this is a lodash specific issue - when imported using Webpack, it can leak into the global window.
https://github.com/lodash/lodash/issues/1798
Related
Problem described here too, but the response was not elaborative React can't be found
import React from 'react' <- I know this statement is correct
Since "React" is a default export and not a named export, shouldn't this statement work too:
import react from 'react'
I know React.createElement() will be called in future, but why isn't react.createElement() correct? After all, the word "React" is just a name to refer to 'react' module.
In the old versions of react-scripts which uses webpack as a bundler, you need to define a React object in your code where you use JSX because when the bundler is handling your code uses the defined React object to call for the nessecerary methods like React.createElement and everywhere else that react is needed. That is why if you remove the React import or write the name in any other fashion you will face an error
I have been studying React and I am trying to understand conceptually what the import statement that I see at the top of every React.js file import React from "react" is actually doing. I have been reading through the React docs https://reactjs.org/docs/react-api.html but not sure if I am understanding the concept correctly.
Does the import statement import React from "react" mean that I am importing the entire react library into the .js file and storing the entire react library inside a new object I am naming "React"?
Or is the "React" object an object that is already defined inside the react library and I am using the import statement to pull the "React" object out of the react library to use some of its methods? In other words the react library contains other objects as well as the React object from my import statement and my imports could be something like this
import React from "react"
import someOtherObject from "react"
As you import a module from your JavaScript file, the module will be cached, for example by Node.js or a browser. Importing the same module from multiple JavaScript files won't create a new object each time.
Although you can use React APIs like React.useState, destructured named imports (ex. import { useState } from "react") is the preferred style going into the future according to this post from React Blog.
Due to some limitations of using jQuery libraries, I need to import bootstrap 4 vanilla style into a couple of React projects. But I would like to create a single package that holds all the assets (such as importing BS4) and having the other React projects importing from this.
assets/package.json
"dependencies": {
"bootstrap": "^4.5.3"
}
index.js
import "bootstrap/dist/js/bootstrap.bundle"; //Does Work; Syntax is called importing with side effects, I believe
//import "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
export * from "bootstrap/dist/js/bootstrap.bundle"; //Does NOT work
//export * from "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
myReactApp1/package.json
"dependencies": {
"#bit/X.Y.Z.assets": "file./components/assets"
}
myReactApp1/App.js
import "#bit/X.Y.Z.assets" //Does NOT work
//import "bootstrap/dist/js/bootstrap.bundle"; //Does work; so essentially I want to replicate their export into my assets so that the version control is one central place
myReactApp1/App.scss
import "~#bit/X.Y.Z.assets/node_modules/bootstrap/scss/bootstrap" //Does work
How do I export a vanilla JS file in React, so that I can import it again?
What I'm trying to achieve is the following diagram, and respectively a non-compiling sandbox.
In my React project, I heavily depend on lodash. Now in each file I have an import statement like this
import each from 'lodash/each';
import compact from 'lodash/compact';
Is there any way in React that I don't need to import these in every file ? Can I import them once in App.jsx (The root component) and they would be available for all React Components that are it's children ?
Or maybe make lodash object globally available throughout the project ?
This is not really recommended, but you could do this in your main file:
import _ from 'lodash';
window._ = _;
to make it available via global window object.
However, it would be better to configure your bundler or compiler setup to expose this as global variable.
What am I doing wrong with this import in my react component? I'm trying to use the following npm package in my React app:
https://www.npmjs.com/package/chrome-headless-render-pdf
I'm assuming that this package is useable from a React app. Is there any reason why it would not be? If not then how should I evaluate whether or not an npm package is useable in a React app? The npmjs page shows the package being used like this:
const RenderPDF = require('chrome-headless-render-pdf');
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
I was thinking that I should be able to simply import the package in my React component like this:
import * from 'chrome-headless-render-pdf';
However, intellisense is reporting this import as invalid. How can I properly import this package into my component?
In their documentation, They also mentioned it as:
you can also use it from typescript or es6
import RenderPDF from 'chrome-headless-render-pdf';
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
This line is not a valid import statement according to the ecmascript spec.
import * from 'chrome-headless-render-pdf';
When you use the * import syntax, you must assign a name. For example:
import * as chromeHeadless from 'chrome-headless-render-pdf';
This will make all named exports from the module available from your chosen namespace. You might use this with modules that does not have a default export. Typically the documentation for the module will explain which style of import syntax you can use.
MDN provides a reference of the different valid import statements available