Reputation: 1
I am trying to include image in my storybook project
import { Meta, StoryObj } from '@storybook/angular';
import { ImageComponent } from './image.component';
import imageFile from './assets/context.png';
import { fn } from '@storybook/test';
console.log('__dirname:', __dirname);
console.log('__filename:', __filename);
const meta: Meta<ImageComponent> = {
title: 'My Development/Image',
component: ImageComponent,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<ImageComponent>;
const image = {
src: imageFile,
alt: 'my image',
}
export const Image: Story = {
args: {
imageUrl: image.src,
altText: image.alt,
},
};
But after I run this code I keep getting the TS2307 error
The error are shown:
ERROR in src/stories/image.stories.ts:3:23 - error TS2307: Cannot find module './assets/context.png' or its corresponding type declarations.
3 import imageFile from './assets/context.png';
~~~~~~~~~~~~~~~~~~~~~~
preview compiled with 1 error
WARN DefinePlugin
WARN Conflicting values for 'process.env.NODE_ENV'
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
at starter (.\node_modules\@storybook\builder-webpack5\dist\index.js:1:8088)
at starter.next (<anonymous>)
at Module.start (.\node_modules\@storybook\builder-webpack5\dist\index.js:1:10083)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Broken build, fix the error above.
You may need to refresh the browser.
I had try to find the solution, with adding the following code in tsconfig.app.ts
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.ts",
"src/**/*.d.ts"
]
}
and declare the module inside index.d.ts
declare module '*.svg' {
const value: any;
export = value;
}
declare module '*.png' {
const value: any;
export = value;
}
declare module '*.jpg' {
const value: any;
export = value;
}
declare module '*.jpeg' {
const value: any;
export = value;
}
The structure of file is as follow, inside "C:\Users\User\Desktop\storybook" (only mentioned file show):
storybook/
├── tsconfig.app.json
├── tsconfig.json
├── src/
│ ├── index.html
│ ├── main.ts
│ ├── style.scss
│ └── stories/
│ ├── input.component.ts
│ ├── input.stories.ts
│ └── assets/
│ └── context.png
│ └── index.d.ts
Also I had try to clear cache for browser and npm, still getting same error. May I know what is the issue, that I miss out?
Upvotes: 0
Views: 62