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

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'],
};

[vanilla-james]

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 👏

[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"
    ]
  },