Does React.lazy() works with Create React App?

Question

I have created one React App using npx create-react-app my-app cmd (React 17 version). Now Well, I just tried to replace a classic

import Component from './Component'

to

const Component = React.lazy(() => import('./Component'));

and then

<React.Suspense fallback={<div>Loading.. </div>}>
    <Component />
</React.Suspense>

but it throws error like SyntaxError: Unexpected token at import(6:22)

> 6 |  const Component = React.lazy(() => import('./Component'));

Can anyone help me to resolve this?

This is the code syntax

And this is the suspense component

And this is the compilation output

My package.json looks like

I have a full routing file with every component is imported using React.lazy and its a create react app and i am also using React.Suspense and its working completely fine. are you importing React right? :p other than that it might be a type or syntax error — Sulman Azhar
– Sulman Azhar, Commented Feb 5, 2021 at 12:43
Please check I have updated the question with my exact code and some snapshots. — Nainish Modi
– Nainish Modi, Commented Feb 5, 2021 at 13:05

dns_nx · Accepted Answer · 2021-02-05 13:35:21Z

0

I'm not sure, if this fixes your issue, but maybe you can give it a try. Are you using Babel?

It says:

When using Babel, you’ll need to make sure that Babel can parse the dynamic import syntax but is not transforming it. For that you will need @babel/plugin-syntax-dynamic-import.

https://reactjs.org/docs/code-splitting.html#import

I've created a .babelrc file on the project root and added the content:

{
    "plugins": [
      "@babel/plugin-syntax-dynamic-import"
    ]
}

I also imported lazy in my component:

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

In my project React.lazy is working fine this way.

answered Feb 5, 2021 at 13:35

dns_nx

3,9556 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nainish Modi Over a year ago

Let me check this and will back to you.

Nainish Modi Over a year ago

No, I am not using babel

Nainish Modi Over a year ago

Created react app using create-react-app cmd

Collectives™ on Stack Overflow

Does React.lazy() works with Create React App?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related