Can't import image inside tsx file in nextjs 9

[michaelchiche]

I am trying to use this plugin with nextjs 9. When importing an image inside a .js file, it works fine, but fails when importing inside a tsx file.

[arefaslani]

Thank you for reporting. I'll fix it tomorrow.

[talentlessguy]

I have the same issue on Next.js v9.0.2 and next-images v1.1.2

// ...
import logo from './logo.svg'
// ...
<img src={logo} />

my ts config:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "types": ["jest", "react", "styled-components"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts", "**/*.tsx", "**/*.svg"]
}

my next.config.js:

const withImages = require('next-images')

module.exports = withImages({
  target: 'serverless'
})

[StefKors]

any progress on this issue?

[arefaslani]

Unfortunately not. ATM I'm too busy working on our startup. I checked it once but it had no progress because I hadn't enough time. Please contribute if you have any solution or wait until I can resolve this issue. Thank you.

[MilanLempera]

this is only typescript problem, you can avoid it by ts module definition for image types in d.ts file

e.g.

declare module "*.png" {
   const value: string;
   export = value;
}

[rtatarinov]

@MilanLempera Thanks. it works for me

[michaelchiche]

same for me! thanks

[arefaslani]

@MilanLempera Could you implement it in the library or in the readme file??

[MilanLempera]

@arefaslani https://github.com/twopluszero/next-images/pull/23

[arefaslani]

This issue is solved in version 1.2.0 thanks to @MilanLempera 🎉