XLKee
XLKee

Reputation: 1

Keep getting TS2307 error even I have declare the module for my typescript angular framework project

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

Answers (0)

Related Questions