Open jamezening opened 3 years ago
Having the same issue but not with nextjs. Standard CRA with Ionic.
Did you try removing node_modules
and/or lockfiles and reinstalling?
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"
]
},
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.
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 👏
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.
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. Addingplugin:import/typescript
to youreslint
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!
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"
}
@ipaintcode you shouldn't need @types/storybook__react
; since 6.0 storybook has shipped its own internal types
No resolution on this? Getting the issue on a new Next.js project.
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';
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';
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";
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.Additional context Add any other context about the problem here.
const path = require('path');
module.exports = { webpackFinal: async (config) => { config.resolve.modules = [ ...(config.resolve.modules || []), path.resolve(__dirname, '../'), ];
}, stories: [ '../stories//*.stories.mdx', '../stories/*/.stories.@(js|jsx|ts|tsx)', '../components//*.stories.@(js|jsx|ts|tsx)', ], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], };