Home > Back-end >  React.Fragment only works with import React (not with import { React })
React.Fragment only works with import React (not with import { React })

Time:01-07

For some reason if I try and use <React.Fragment> with

import { React, useState, useEffect } from 'react'

at the top of my page I get

Uncaught TypeError: Cannot read properties of undefined (reading 'Fragment')

If I switch this to

import React, { useState, useEffect } from 'react'

it works just fine. Is this indicative of a problem somewhere else?

CodePudding user response:

import React as a named export from the react package, but the react package does not have a named export called React. Instead, the react package has a default export, which is the React object.

This means that you should be using the following import statement:

import React, { useState, useEffect } from 'react';

This will correctly import the React object as the default export, and the other named exports (useState and useEffect in this case) as named exports.

Using the import statement you provided:

import { React, useState, useEffect } from 'react';

will try to import a named export called React from the react package, but since the react package does not have a named export called React, you will get an error.

CodePudding user response:

{ React } is worng usage.
If you use typescript the error will be shown right away. TS Error check this link to see the exact error you are facing and its solution.

  • Related