TS2322: Type 'Promise' is not assignable to type 'string'

Question

In my react app, I m trying to import the img source, but getting any error as

TS2322: Type 'Promise<any>' is not assignable to type 'string'. how to fix it or what is the correct way to import an element in variable?

here is my code:

import React, { FC } from "react";
import "./barkingRoad.scss";



const BarkingRoad: FC = () => {

const slidex = import("./../../../../assets/images/small/boomerang-site1.jpg");

return (
    <div className="boomerang-slider-barkingRoad">
    
        <div className="project-data">
            <div className="boomerang-site-slide">
                <div className="prev"><a href="#">Previus</a> </div>
                <div>
                    <img src={slidex} /> //getting error
                </div>
                <div className="next"><a href="#">Next</a> </div>
                {/* srcSet={`${slide} 360w, ${slide} 768w, ${slide} 1366w  `} */}
            </div>
        </div>

    </div>
)

}

export default BarkingRoad;

This is works:

const slidex = require("./../../../../assets/images/small/boomerang-site1.jpg");

but getting an error as ;

 8:20  error  Require statement not part of import statement

Chuck · Answer 1 · 2021-09-09T09:57:03.293

1

I suggest two options.

Import outside the component like this.

const slidex = require("...");

const BarkingRoad: FC = () => {
...
}

Use await keyword.

 const BarkingRoad: FC = async () => {
 ...
 const slidex = await require...
 }

If you defined the image in the public directory, you can use the url, instead of importing in the code.

edited Sep 09 '21 at 09:57

answered Sep 09 '21 at 09:51

Chuck

776
5
18

Cannot find name 'async'. - error raising – user2024080 Sep 09 '21 at 09:56
`Type '() => Promise' is not assignable to type 'FC<{}>'. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2322) const BarkingRoad: React.FC<{}>` – user2024080 Sep 09 '21 at 10:02
Seems like you are using `typescript`. Take a look at this one to get to know how to define `async` function in typescript. https://stackoverflow.com/questions/38744159/in-typescript-how-to-define-type-of-async-function – Chuck Sep 09 '21 at 10:04
Yes, I agree. But my case i am not able to get the correct way of declaration, can you help me? – user2024080 Sep 09 '21 at 10:10

score 0 · Answer 2 · answered Sep 09 '21 at 09:42

0

const slidex = import is dynamic import so retuning a promise<any> and src recieves a direct url string

Try to set it directly:

<img src="./../../../../assets/images/small/boomerang-site1.jpg" />

answered Sep 09 '21 at 09:42

Ryan Le

7,708
1
13
23

I am trying to load in ts file instead of image, require for dynamic process – user2024080 Sep 09 '21 at 09:47

score 0 · Answer 3 · answered Sep 09 '21 at 09:42

0

Try importing like this:

import slidex from "./../../../../assets/images/small/boomerang-site1.jpg";

answered Sep 09 '21 at 09:42

Harshit Rastogi

1,996
1
10
19

I am getting error as `An import declaration can only be used in a namespace or module.` – user2024080 Sep 09 '21 at 09:47
put this import statement above `const BarkingRoad: FC = () => {` – Harshit Rastogi Sep 09 '21 at 09:58

Alex Fischer · Answer 4 · 2021-09-09T09:54:34.093

0

The import function returns a Promise which is not a string.

Your could use the following solutions:

Use path in src-tag
Use a regular import
Or await the import like

 const BarkingRoad: FC = async () => {   
 ...
 const slidex = await import('...');
 ...

edited Sep 09 '21 at 09:54

answered Sep 09 '21 at 09:44

Alex Fischer

193
1
2
12

`'await' expressions are only allowed within async functions and at the top levels of modules.` when i use `const slidex = await import('...');` – user2024080 Sep 09 '21 at 09:46
As siruis suggested you also have to add the async keyword. [here](https://stackoverflow.com/a/69115984/9415076) – Alex Fischer Sep 09 '21 at 09:52

TS2322: Type 'Promise' is not assignable to type 'string'

4 Answers4