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
Related
I've found out that components without import React from 'react'; lines works well.
I've added import React from 'react'; to the first line of .jsx files conventionally. And I saw many open source with this line.
Then why do we add this line unnecessarily?
You no longer need to import React from "react". Starting from the release 17 of React, JSX is automatically transformed without using React.createElement.However, other exports like hooks must be imported.
if you use a builder like esbuild, unfortunately you will need to import react in every file because it would be an error: Uncaught ReferenceError: React is not defined
but if you use the default builder you don't have to import react in each file
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.
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
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
I face the same issue as described here
https://github.com/babel/babel/issues/2504
So, any file which has only stateless components needs to have react imported like import React from 'react';, which is bit annoying (eslint gives error as unused variable; which I understand can be suppressed, still..). Is there a way to avoid having this import in a webpack based setup.
thanks.
I had the same issue. Then, I found this:
babel-plugin-react-require
This will automatically add the required require or import calls to get 'react' imported to your stateless component modules.
P.S. If you use webpack and babel6, ensure that you are not using the jsx-loader for your JSX files. I was getting errors with this and then I realized the jsx-loader is not required anymore. Just use:
babel-preset-react
You can use Webpack's ProvidePlugin (https://github.com/webpack/docs/wiki/shimming-modules#plugin-provideplugin):
new webpack.ProvidePlugin({
React: "react"
})
Now you'll have React available in every module without having to explicitly write import React from 'react'