diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index f7b44b28001c8..fca61bdded78f 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -32,7 +32,7 @@ type ImageData = { type ImageProps = Omit< JSX.IntrinsicElements['img'], - 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' + 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style' > & { src: string quality?: number | string diff --git a/test/integration/image-component/typescript-style/next.config.js b/test/integration/image-component/typescript-style/next.config.js new file mode 100644 index 0000000000000..64af59160546d --- /dev/null +++ b/test/integration/image-component/typescript-style/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + images: { + domains: ['via.placeholder.com'], + }, +} diff --git a/test/integration/image-component/typescript-style/pages/invalid.tsx b/test/integration/image-component/typescript-style/pages/invalid.tsx new file mode 100644 index 0000000000000..06a6635269a00 --- /dev/null +++ b/test/integration/image-component/typescript-style/pages/invalid.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import Image from 'next/image' + +const Invalid = () => { + return ( +
+

Invalid TS

+ +

This is the invalid usage

+
+ ) +} + +export default Invalid diff --git a/test/integration/image-component/typescript-style/test/index.test.js b/test/integration/image-component/typescript-style/test/index.test.js new file mode 100644 index 0000000000000..25d62a1a5146c --- /dev/null +++ b/test/integration/image-component/typescript-style/test/index.test.js @@ -0,0 +1,19 @@ +/* eslint-env jest */ + +import { nextBuild } from 'next-test-utils' +import { join } from 'path' + +jest.setTimeout(1000 * 60 * 2) + +const appDir = join(__dirname, '..') + +describe('TypeScript Image Component with Styles', () => { + describe('next build', () => { + it('should fail to build when the `style` prop is passed to ', async () => { + const { stderr, code } = await nextBuild(appDir, [], { stderr: true }) + expect(stderr).toMatch(/Failed to compile/) + expect(stderr).toMatch(/Property 'style' does not exist on type/) + expect(code).toBe(1) + }) + }) +}) diff --git a/test/integration/image-component/typescript-style/tsconfig.json b/test/integration/image-component/typescript-style/tsconfig.json new file mode 100644 index 0000000000000..15cec79584e84 --- /dev/null +++ b/test/integration/image-component/typescript-style/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "module": "esnext", + "jsx": "preserve", + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true + }, + "exclude": ["node_modules"], + "include": ["next-env.d.ts", "components", "pages"] +}