I'm encountering an issue when running Storybook, specifically this error message:
ERROR in ./components/atoms/input/input.tsx 14:0-40
Module not found: Error: Can't resolve 'react-tagsinput' in '...'
To provide some context about my setup:
Directory Structure
root
|.storybook
|-main.ts
|-components
|-atoms
|-input
|-input.tsx
|-input.stories.ts
|-node_modules
Main Configuration (main.ts)
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: ["../components/**/*.mdx", "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
}
};
export default config;
Input Component Stories (input.stories.ts)
import type { Meta, StoryObj } from '@storybook/react';
import Input from './input';
// Code continues...
Input Component Implementation (input.tsx)
import React, { InputHTMLAttributes } from "react";
import TagsInput from 'react-tagsinput';
// Code continues...
Package Dependencies (package.json)
{
"dependencies": {
// List of dependencies
},
"devDependencies": {
// List of dev dependencies
}
}
I've attempted to troubleshoot following suggestions on the Storybook documentation (), but have yet to find a solution. Any assistance would be highly valued.