Unable to resolve path to module '@storybook/react/types-6-0'

[jamezening]

Describe the bug

Getting eslint Unable to resolve path to module '@storybook/react/types-6-0'. eslint(import/no-unresolved). error when using storybook with Typescript.

with the boilerplate code import { Story, Meta } from '@storybook/react/types-6-0';

Is there a config I might be missing?

To Reproduce Using Storybook with Typescript, NextJS, and other packages.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Firefox: 86.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.1.21 => 6.1.21 
    @storybook/addon-essentials: ^6.1.21 => 6.1.21 
    @storybook/addon-links: ^6.1.21 => 6.1.21 
    @storybook/react: ^6.1.21 => 6.1.21 

Additional context Add any other context about the problem here.

package.json

"dependencies": {
"@svgr/webpack": "^5.5.0",
"firebase": "^8.2.9",
"firebase-admin": "^9.5.0",
"firebaseui": "^4.7.3",
"next": "10.0.7",
"prop-types": "^15.7.2",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/addon-links": "^6.1.21",
"@storybook/react": "^6.1.21",
"@tailwindcss/postcss7-compat": "^2.0.3",
"@types/node": "^14.14.31",
"@types/react": "^17.0.2",
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.2.2",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-watch": "^7.0.0",
"husky": "=4",
"lint-staged": ">=10",
"postcss": "^7.0.35",
"prettier": "2.2.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
"typescript": "^4.2.2"
},

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "."
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}

> .storybook/main.js

const path = require('path');

module.exports = { webpackFinal: async (config) => { config.resolve.modules = [ ...(config.resolve.modules || []), path.resolve(__dirname, '../'), ];

return config;

}, stories: [ '../stories//*.stories.mdx', '../stories/*/.stories.@(js|jsx|ts|tsx)', '../components//*.stories.@(js|jsx|ts|tsx)', ], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], };

[lightcap]

Having the same issue but not with nextjs. Standard CRA with Ionic.

[shilman]

Did you try removing node_modules and/or lockfiles and reinstalling?

[lightcap]

I believe I've narrowed it down to an issue between eslint-plugin-import and storybook.

I added one thing at a time back to my app and found that when I added that eslint plugin back in the error was triggered. Take it out and it's gone.

You can still use eslint-plugin-import but you'll need to make sure you add the typescript config to fix it. Adding plugin:import/typescript to your eslint config should do the trick.

In my package.json:

  "eslintConfig": {
    "extends": [
      "plugin:import/errors",
      "plugin:import/typescript"
    ]
  },

[lightcap]

I'd love to hear if this fixes it for you @gyoon-dev.

@shilman yeah, I tore it all down and built it up one package at a time. I was sure it was a craco related issue, but turned out not to be.

[jamezening]

Wow super fast replies 🚀

---

I'd love to hear if this fixes it for you @gyoon-dev.

@lightcap I will try those settings soon. Immediately after posting this issue, I just used the alternative boilerplate code:

// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react';

which resolved the errors. I assume that this is a viable solution only for those who can update to 6.1.

---

Did you try removing node_modules and/or lockfiles and reinstalling?

@shilman - this was one of the many attempts I made, but the issue did not resolve.

Thank you and it is awesome to see how active this community/repo is 👏

[shilman]

The rationale for the two different imports is that react/types-6-0 would be strict semver, and react imports would potentially change outside of semver. In practice I don't think we've made any breaking changes yet.

[jamezening]

I believe I've narrowed it down to an issue between eslint-plugin-import and storybook.

I added one thing at a time back to my app and found that when I added that eslint plugin back in the error was triggered. Take it out and it's gone.

You can still use eslint-plugin-import but you'll need to make sure you add the typescript config to fix it. Adding plugin:import/typescript to your eslint config should do the trick.

In my package.json:

  "eslintConfig": {
    "extends": [
      "plugin:import/errors",
      "plugin:import/typescript"
    ]
  },

@lightcap I tried adding your settings above to package.json, but the linting error did not go away. I also tried adding the settings in my .eslintrc.js, but no luck there either.

Seems different setups will need different solutions. Thanks again for the input!

[ipaintcode]

Not sure if this helps as the issue has been dormant since March 17/21 but I was able to fix this error message by installing the following package:

"@types/storybook__react": "^5.2.1",

From my devDependencies in my package.json:

"devDependencies": {
    "@babel/core": "^7.15.5",
    "@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/react": "^6.3.8",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "@types/storybook__react": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^4.31.2",
    "@typescript-eslint/parser": "^4.31.2",
    "babel-loader": "^8.2.2",
    "bootstrap": "^5.1.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-react": "^7.26.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.4.1",
    "typescript": "^4.4.3"
}

[shilman]

@ipaintcode you shouldn't need @types/storybook__react; since 6.0 storybook has shipped its own internal types

[Tallies]

No resolution on this? Getting the issue on a new Next.js project.

[julpat]

Just for "google search" reference. After migrating from Storybook 6 to 7 a similar issue appeared. Solved using just @storybook/react:

// old
import { Story, Meta } from '@storybook/react/types-6-0';

// new
import { Story, Meta } from '@storybook/react';

[onurcanavci]

I have same issue after upgrade storybook from v6 to v7 and I solved with below imports

// old
import { Story, Meta } from '@storybook/react/types-6-0';

// new
import { StoryFn, Meta } from '@storybook/react';

[silasechegini]

for me, apparently, in my rollup.config.js file, i had the wrong import of resolve.

// wrong: 
import { nodeResolve } from "@rollup/plugin-node-resolve";

// correct: 
import resolve from "@rollup/plugin-node-resolve";