Comments (22)
0xsven
commented on July 4, 2024
2
@volkyeth
I am not using nohoist. All my dependencies are hoisted to the root folder.
From issue #22 it sounds like css-loader >6.0.0 is the issue. storybook-addon-next is still depending on it.
I downgraded to [email protected] and it works now! Thanks for the tips.
from storybook-addon-next.
volkyeth
commented on July 4, 2024
1
Fixed in #26
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
1
I was able to find a way to get package resolution working with #31. That being done, I'm still interested in any ideas to improve package management within this repo.
Also ty @illarionvk for the explanation.
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
Thanks for opening up this issue!
Here you mentioned that storybook dependencies don't work well for yarn workspaces either. Could you clarify? Also if that is the case, is this problem worth fixing in this repo if storybook can't be used with it?
from storybook-addon-next.
0xsven
commented on July 4, 2024
I am having that issue with npm workspaces and turborepo. It's as if it cannot find next, see output:
npm run storybook
> [email protected] storybook
> turbo run storybook
• Packages in scope: , config, e2e, generated, web, tsconfig, ui
• Running storybook in 7 packages
:storybook: cache miss, executing 7cc2a4f8d13d56fe
:storybook:
:storybook: > storybook
:storybook: > start-storybook -p 6006
:storybook:
:storybook: info @storybook/react v6.4.19
:storybook: info
:storybook: info => Loading presets
:storybook: info => Using implicit CSS loaders
:storybook: ERR! Error: Cannot find module '/code/webapp/apps/storybook/node_modules/next/package.json'
:storybook: ERR! Require stack:
:storybook: ERR! - /code/webapp/node_modules/storybook-addon-next/dist/utils.js
:storybook: ERR! - /code/webapp/node_modules/storybook-addon-next/dist/preset.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-common/dist/cjs/presets.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-common/dist/cjs/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-server/dist/cjs/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core/dist/cjs/server.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core/server.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/react/dist/cjs/server/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/react/bin/index.js
:storybook: ERR! at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
:storybook: ERR! at Function.Module._load (node:internal/modules/cjs/loader:778:27)
:storybook: ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
:storybook: ERR! at require (node:internal/modules/cjs/helpers:102:18)
:storybook: ERR! at getNextjsVersion (/code/webapp/node_modules/storybook-addon-next/dist/utils.js:9:1)
:storybook: ERR! at configureStaticImageImport (/code/webapp/node_modules/storybook-addon-next/dist/images/webpack.js:14:50)
:storybook: ERR! at configureImages (/code/webapp/node_modules/storybook-addon-next/dist/images/webpack.js:8:5)
:storybook: ERR! at /code/webapp/node_modules/storybook-addon-next/dist/preset.js:29:35
:storybook: ERR! at Generator.next (<anonymous>)
:storybook: ERR! at fulfilled (/code/webapp/node_modules/tslib/tslib.js:114:62)
:storybook: ERR! Error: Cannot find module '/code/webapp/apps/storybook/node_modules/next/package.json'
:storybook: ERR! Require stack:
:storybook: ERR! - /code/webapp/node_modules/storybook-addon-next/dist/utils.js
:storybook: ERR! - /code/webapp/node_modules/storybook-addon-next/dist/preset.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-common/dist/cjs/presets.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-common/dist/cjs/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core-server/dist/cjs/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core/dist/cjs/server.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/core/server.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/react/dist/cjs/server/index.js
:storybook: ERR! - /code/webapp/node_modules/@storybook/react/bin/index.js
:storybook: ERR! at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
:storybook: ERR! at Function.Module._load (node:internal/modules/cjs/loader:778:27)
:storybook: ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
:storybook: ERR! at require (node:internal/modules/cjs/helpers:102:18)
:storybook: ERR! at getNextjsVersion (/code/webapp/node_modules/storybook-addon-next/dist/utils.js:9:1)
:storybook: ERR! at configureStaticImageImport (/code/webapp/node_modules/storybook-addon-next/dist/images/webpack.js:14:50)
:storybook: ERR! at configureImages (/code/webapp/node_modules/storybook-addon-next/dist/images/webpack.js:8:5)
:storybook: ERR! at /code/webapp/node_modules/storybook-addon-next/dist/preset.js:29:35
:storybook: ERR! at Generator.next (<anonymous>)
:storybook: ERR! at fulfilled (/code/webapp/node_modules/tslib/tslib.js:114:62) {
:storybook: ERR! code: 'MODULE_NOT_FOUND',
:storybook: ERR! requireStack: [
:storybook: ERR! '/code/webapp/node_modules/storybook-addon-next/dist/utils.js',
:storybook: ERR! '/code/webapp/node_modules/storybook-addon-next/dist/preset.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/core-common/dist/cjs/presets.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/core-common/dist/cjs/index.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/core-server/dist/cjs/index.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/core/dist/cjs/server.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/core/server.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/react/dist/cjs/server/index.js',
:storybook: ERR! '/code/webapp/node_modules/@storybook/react/bin/index.js'
:storybook: ERR! ]
:storybook: ERR! }
:storybook: WARN Broken build, fix the error above.
:storybook: WARN You may need to refresh the browser.
:storybook:
:storybook:
:storybook: Error: command finished with error: exit status 1
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
Yeah, I'd agree. How are package resolutions supposed to work in mono repos like that? (Forgive me as I haven't played with monorepos yet)
from storybook-addon-next.
0xsven
commented on July 4, 2024
Imagine the following folder structure:
/packages
/my-storybook
/.storybook
/stories
/package.json
/ui-library
/Button.jsx
/package.json
/node_modules
/package.json
/package-lock.json
If you run npm install npm/yarn will go through your packages' package.json file and install all their dependencies withing the root's /node_modules folder and link them together. So there only is one node_modules folder and one package-lock.json file.
In this example the workspace "my-storybook" imports the ui-library workspace and displays it within storybook.
This setup is very usefull for bigger projects, as you can exclude certain packages (and their dependencies) when deploying and so speed up your pipelines. Also it makes your project nicely structured and understandable...
from storybook-addon-next.
volkyeth
commented on July 4, 2024
@RyanClementsHax what makes packages incompatible with workspaces is missing some dependency declarations or explicitly referencing the node_modules folder, as yarn workspaces hoists the subprojects node_modules folders up to the monorepo folder, and the newer yarn pnp does not even have a node_modules, so any dependency on the regular folder structure breaks the packages.
over here I think using require.resolve fixes the issue
from storybook-addon-next.
github-actions
commented on July 4, 2024
🎉 This issue has been resolved in version 1.4.3 🎉
The release is available on:
Your semantic-release bot 📦🚀
from storybook-addon-next.
0xsven
commented on July 4, 2024
The previous errors are gone! 🥳
There are some new ones (see error below).
I am trying to get the basic example from next/examples running within my project.
This error does not show if I run storybook from within the package.
npm run storybook
> [email protected] storybook
> turbo run storybook
• Packages in scope: config, e2e, generated, storybook, tsconfig, ui, web
• Running storybook in 7 packages
storybook: cache miss, executing 7e6fa4dd60a59a63
storybook:
storybook: > storybook
storybook: > start-storybook -p 6006
storybook:
storybook: info @storybook/react v6.4.19
storybook: info
storybook: info => Loading presets
storybook: info => Using implicit CSS loaders
storybook: info => Using default Webpack5 setup
storybook: <s> [webpack.Progress] 0%
storybook:
storybook: <s> [webpack.Progress] 1% setup initialize
storybook: [...]
storybook: <s> [webpack.Progress] 100%
storybook:
storybook: ModuleBuildError: Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
storybook: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
storybook: - options.url should be one of these:
storybook: boolean | object { filter? }
storybook: -> Allows to enables/disables `url()`/`image-set()` functions handling.
storybook: -> Read more at https://github.com/webpack-contrib/css-loader#url
storybook: Details:
storybook: * options.url should be a boolean.
storybook: * options.url should be an object:
storybook: object { filter? }
storybook: - options.import should be one of these:
storybook: boolean | object { filter? }
storybook: -> Allows to enables/disables `@import` at-rules handling.
storybook: -> Read more at https://github.com/webpack-contrib/css-loader#import
storybook: Details:
storybook: * options.import should be a boolean.
storybook: * options.import should be an object:
storybook: object { filter? }
storybook: at validate (/code/webapp/node_modules/schema-utils/dist/validate.js:105:11)
storybook: at Object.getOptions (/code/webapp/node_modules/webpack/lib/NormalModule.js:580:19)
storybook: at Object.loader (/code/webapp/node_modules/css-loader/dist/index.js:31:27)
storybook: at processResult (/code/webapp/node_modules/webpack/lib/NormalModule.js:753:19)
storybook: at /code/webapp/node_modules/webpack/lib/NormalModule.js:855:5
storybook: at /code/webapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
storybook: at /code/webapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
storybook: ModuleBuildError: Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
storybook: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
storybook: - options.url should be one of these:
storybook: boolean | object { filter? }
storybook: -> Allows to enables/disables `url()`/`image-set()` functions handling.
storybook: -> Read more at https://github.com/webpack-contrib/css-loader#url
storybook: Details:
storybook: * options.url should be a boolean.
storybook: * options.url should be an object:
storybook: object { filter? }
storybook: - options.import should be one of these:
storybook: boolean | object { filter? }
storybook: -> Allows to enables/disables `@import` at-rules handling.
storybook: -> Read more at https://github.com/webpack-contrib/css-loader#import
storybook: Details:
storybook: * options.import should be a boolean.
storybook: * options.import should be an object:
storybook: object { filter? }
storybook: at validate (/code/webapp/node_modules/schema-utils/dist/validate.js:105:11)
storybook: at Object.getOptions (/code/webapp/node_modules/webpack/lib/NormalModule.js:580:19)
storybook: at Object.loader (/code/webapp/node_modules/css-loader/dist/index.js:31:27)
storybook: at processResult (/code/webapp/node_modules/webpack/lib/NormalModule.js:753:19)
storybook: at /code/webapp/node_modules/webpack/lib/NormalModule.js:855:5
storybook: at /code/webapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
storybook: at /code/webapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
storybook:
storybook:
storybook: WARN Broken build, fix the error above.
storybook: WARN You may need to refresh the browser.
storybook: Error: command finished with error: exit status 1
It seems like css-loader is initialized with the wrong config?
Here are the versions of css-loader that are installed:
npm ls css-loader
[email protected]
└─┬ storybook@ -> ./apps/storybook
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│ └── [email protected]
├─┬ @storybook/[email protected]
│ └── [email protected]
├─┬ @storybook/[email protected]
│ └── [email protected]
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]
Could there be a mismatch?
from storybook-addon-next.
volkyeth
commented on July 4, 2024
CSS Loader has been initialized using an options object that does not match the API schema.
This is #22
Are you using nohoist on your workspace? This issue only manifested for me with nohoist because then storybook-addon-next managed to pick its own css-loader version and broke because of selecting the wrong one
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
@volkyeth so it turns out that the fix made in #26 breaks local development (yarn watch) because require.resolve('styled-jsx') tries to resolve to the root node modules folder instead of the examples one. Do you know of a way to preserve support for monorepos while also allowing for local development?
from storybook-addon-next.
volkyeth
commented on July 4, 2024
@RyanClementsHax yeah, that's an issue with Yarn v1 link. It's solved on Yarn v2+
Refs:
https://twitter.com/arcanis/status/1133706355888590849?s=20&t=be7t-pmMkf9EuKzd11kUPw
https://yarnpkg.com/features/protocols#whats-the-difference-between-link-and-portal
I'm trying to upgrade it so we switch from link: to portal: protocol on the examples, then I'll send a PR. Would that work for you?
In my experience, it's worth using Yarn v2+. I've been hitting so many issues with yarn that won't be fixed in v1, so I guess it's time to move on. Performance of yarn install on v2+ is also great.
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
Interesting that it solved those problems for you. I've had a terrible time trying to get yarn link to work in v2+. I'd be happy to see what u come up with.
I do have one concern with yarn v2+ that I was hoping you could help answer. Why does it seem no one uses yarn v2+? It seems like everyone still uses v1.
from storybook-addon-next.
illarionvk
commented on July 4, 2024
I do have one concern with yarn v2+ that I was hoping you could help answer. Why does it seem no one uses yarn v2+? It seems like everyone still uses v1.
Yarn v2 adds a runtime dependency to make the PnP magic mode work, essentially hiding the node_module folder from the tools that analyze the code statically.
In other words, the development tooling has to support Yarn PnP to work correctly.
We switched to pnpm because it produces the node_modules folder with the efficiency of Yarn v2 using a unix-standard symlink/copy strategy, and it's even faster than Yarn.
For example, it takes Yarn v1 over 3 minutes to do a clean install for one of my projects with Storybook. It takes just 40 seconds with pnpm.
from storybook-addon-next.
github-actions
commented on July 4, 2024
🎉 This issue has been resolved in version 1.4.4 🎉
The release is available on:
Your semantic-release bot 📦🚀
from storybook-addon-next.
daviddelusenet
commented on July 4, 2024
I'm running into the same problem with NPM workspaces.
My project setup:
webfolder (contains Next project includingnext.config.js)storybookfolder (contains all Storybook related code)
I'm getting the following error:
ERR! Error: Cannot find module '/Users/daviddelusenet/Development/some-project/workspaces/storybook/next.config.js'
Makes sense because the next.config.js file isn't in that folder.
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
@daviddelusenet I created a pull request (#40) that adds this feature. I'm just looking for an example repo to make sure I solved it properly. Are you able to provide one?
from storybook-addon-next.
thijsdaniels
commented on July 4, 2024
Hi @RyanClementsHax! Awesome plugin! I've checked in with @daviddelusenet offline and I can setup a quick example repo (using NPM workspaces; I've never used yarn workspaces, though I imagine the setup is very similar) early next week :) Or if you prefer, I can also test it myself next week.
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
@thijsdaniels Thanks! I really appreciate the complements!
Someone helped out a bunch by contributing an example that uses nx (#41) which allowed me to publish a version of this repo that allows a developer to specify a path for the next config (see options).
Hopefully this works for you. Let me know if it doesn't.
That being said, I'd still be open to receive any examples you're willing to contribute.
from storybook-addon-next.
thijsdaniels
commented on July 4, 2024
@RyanClementsHax Sorry for disappearing for a while! Just tested with our NPM workspaces setup and it works like a charm :)
from storybook-addon-next.
RyanClementsHax
commented on July 4, 2024
No problem! It happens. I'm glad it worked out for you
from storybook-addon-next.
Related Issues (20)
- Does not work with `@nrwl/react/plugins/storybook` addon HOT 16
- Failed to load preset: /dist/preset.js HOT 3
- Next 12.2 newNextLinkBehavior support HOT 7
- I'm trying to use the addon with storybook and react, but can't build storybook once I installed the addon HOT 7
- Autoprefixer not working HOT 5
- Does not work with next/future/image HOT 3
- already written HOT 1
- Doesn't support AVIF format HOT 3
- Incopatibility with @storybook/builder-vite HOT 1
- Nextjs Image Error message Failed to parse src "static/media/public/logo.jpeg" on `next/image` HOT 3
- next 13 support HOT 11
- Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted HOT 4
- Enabling react strict mode with this addon causes "Rendered more hooks than during the previous render." error. HOT 1
- Examples broken on next13, node 16.17.0 HOT 2
- Allow use of ES Module for NextJS config HOT 1
- Support Storybook v7 for upgrading HOT 9
- Nextjs Image Error message Failed to parse src "static/media/public/logo.jpeg" on next/legacy/image on Nextv13 HOT 1
- Image doesn't support the `loader` prop HOT 2
- Object.defineProperty(NextImage, '__esModule', descriptor) is no more needed from [email protected] HOT 4
- Next12.2 future/image support HOT 14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook-addon-next.