Getting "Unable to resolve path to module" in several modules after migrating to v9.1.13

[teknotica]

Summary

Hi 👋🏽

I've just migrated our project from version 8.6.12 to 9.1.13 following your migration notes. We've updated all the paths for the storybook modules etc, however, ESLint keeps complaining about the new paths:

What's weird is that the project is building correctly, so it's Storybook and all its stories 🤔

What are we missing? 👀 HELP!

Thanks a lot in advance.

Additional information

Here's how our package.json is looking right now:

{
	"name": "name",
	"description": "description",
	"private": false,
	"license": "UNLICENSED",
	"version": "0.0.0",
	"repository": "https://github.com/",
	"scripts": {},
	"files": [
		"dist"
	],
	"exports": {
		".": {
			"import": {
				"types": "./dist/index.d.ts",
				"default": "./dist/nds.es.js"
			},
			"require": {
				"types": "./dist/index.d.ts",
				"default": "./dist/nds.umd.js"
			}
		},
		"./style.css": {
			"import": "./dist/style.css",
			"require": "./dist/style.css"
		}
	},
	"main": "./dist/nds.umd.js",
	"module": "./dist/nds.es.js",
	"style": "./dist/style.css",
	"types": "./dist/index.d.ts",
	"config": {
		"commitizen": {
			"path": "cz-customizable"
		}
	},
	"peerDependencies": {
		"react": "^18.2.0 || ^19.0.0",
		"react-dom": "^18.2.0 || ^19.0.0"
	},
	"devDependencies": {
		"@babel/core": "^7.20.5",
		"@babel/preset-env": "^7.20.2",
		"@babel/preset-react": "^7.18.6",
		"@babel/preset-typescript": "^7.18.6",
		"@chromatic-com/storybook": "^4.1.1",
		"@rollup/plugin-commonjs": "^23.0.3",
		"@rollup/plugin-node-resolve": "^15.0.1",
		"@storybook/addon-a11y": "^9.1.13",
		"@storybook/addon-coverage": "^2.0.0",
		"@storybook/addon-docs": "^9.1.13",
		"@storybook/addon-links": "^9.1.13",
		"@storybook/addon-vitest": "^9.1.13",
		"@storybook/react-vite": "^9.1.13",
		"@storybook/test-runner": "^0.23.0",
		"@storybook/testing-library": "^0.2.2",
		"@stylelint/postcss-css-in-js": "^0.38.0",
		"@testing-library/jest-dom": "^5.16.5",
		"@testing-library/react": "^16.0.1",
		"@testing-library/user-event": "^14.4.3",
		"@types/jest": "^30.0.0",
		"@types/react": "^19.0.0",
		"@types/react-dom": "^19.0.0",
		"@typescript-eslint/eslint-plugin": "^5.45.0",
		"@typescript-eslint/parser": "^5.45.0",
		"@vanilla-extract/css": "^1.17.1",
		"@vanilla-extract/dynamic": "^2.1.2",
		"@vanilla-extract/jest-transform": "^1.1.14",
		"@vanilla-extract/recipes": "^0.5.5",
		"@vanilla-extract/rollup-plugin": "^1.3.14",
		"@vanilla-extract/sprinkles": "^1.6.3",
		"@vanilla-extract/vite-plugin": "^5.0.1",
		"babel-jest": "^29.3.1",
		"babel-loader": "^9.1.0",
		"babel-preset-react-app": "^10.0.1",
		"chromatic": "^11.27.0",
		"clsx": "^1.2.1",
		"commitizen": "^4.3.0",
		"css-mediaquery": "^0.1.2",
		"cz-customizable": "^7.0.0",
		"cz-customizable-ghooks": "^2.0.0",
		"dotenv": "^16.0.3",
		"dotenv-cli": "^7.0.0",
		"eslint": "^8.28.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-import": "^2.26.0",
		"eslint-plugin-jsx-a11y": "^6.6.1",
		"eslint-plugin-prettier": "^4.2.1",
		"eslint-plugin-react": "^7.31.11",
		"eslint-plugin-storybook": "^9.1.13",
		"jest": "^29.3.1",
		"jest-environment-jsdom": "^29.3.1",
		"mini-css-extract-plugin": "^2.7.1",
		"postcss": "^8.5.3",
		"postcss-syntax": "^0.36.2",
		"prettier": "^2.8.0",
		"react": "^19.0.0",
		"react-dom": "^19.0.0",
		"rollup": "^3.5.1",
		"rollup-plugin-peer-deps-external": "^2.2.4",
		"rollup-plugin-postcss": "^4.0.2",
		"rollup-plugin-typescript2": "^0.34.1",
		"storybook": "^9.1.13",
		"storybook-addon-pseudo-states": "^9.1.13",
		"storybook-addon-tag-badges": "^2.0.3",
		"tsconfig-paths-webpack-plugin": "^4.0.0",
		"typescript": "4.7.4",
		"vite": "^6.3.6",
		"vite-plugin-dts": "^4.5.3"
	}
}

Here's a snippet of one of the components having issues with the ESLint error:

import React, { useState } from 'react';
import { StoryFn, Meta } from '@storybook/react-vite';

import {
	Description,
	Heading,
	Canvas,
	ArgTypes,
	Stories,
	Source,
	Title
} from '@storybook/addon-docs/blocks'; // <---Unable to resolve path to module '@storybook/addon-docs/blocks';


export default {
	title: 'Components/Accordion',
	component: Accordion,
	parameters: {
		controls: {
			include: ['children', 'size', 'flush', 'variant', 'className']
		},
		docs: {
			description: {
				component: 'Accordions description.'
			},
			page: () => (
				<>
					<Title />
					<Description />
					<Canvas of={Example} />
					<ArgTypes of={Example} />
					<Stories />
				</>
			)
		}
	}
} as Meta<typeof Accordion>;

Create a reproduction

No response

[dosubot[bot]]

Hi @teknotica! I'm Dosu and I’m helping the storybook team.

The ESLint errors are due to breaking changes in Storybook v9.x: many package import paths have changed. For docs blocks, you now need to import from @storybook/blocks instead of @storybook/addon-docs/blocks—update all such imports accordingly. Similarly, other packages like @storybook/addon-actions are now storybook/actions, and @storybook/test is now storybook/test (without the @storybook/ prefix) [migration guide].

If you still see unresolved module errors after updating imports, make sure your ESLint config is set up for ESM resolution. If you're using Vite, you may also want to add this to your .storybook/main.ts:

export default {
  viteFinal: async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.conditions = ['module', 'import', 'require'];
    return config;
  }
}

This helps Vite (and sometimes ESLint) resolve ESM modules correctly [discussion].

Once you update your imports and check your config, the errors should go away.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[teknotica]

Resolved this issue by adding these lines to our .eslintrc.cjs to use the TS configuration:

'import/resolver': {
			typescript: { // <------ Adding this object
				alwaysTryTypes: true, 
				project: './tsconfig.json'
			},
			node: {
				paths: ['src'],
				extensions: ['.js', '.jsx', '.ts', '.tsx']
			}
		}