Using Wingsuit in monorepo alongside Storybook 7 project

[justintemps]

I have a wingsuit project in a monorepo that also includes a Storybook 7 package for the implementation of my design system in React. I'm using pnpm to manage dependencies. So the project looks something like this.

📦designsystem
 ┣ 📂node_modules
 ┣ 📂packages 
    ┣ 📜twig <-- wingsuit
    ┃ ┗ 📜node_modules
    ┗ 📜react <-- Storybook@7
       ┗ 📜node_modules

Since upgrading the react project to Storybook@7, I'm getting build errors in wingsuit that look like this:

twig:build: <s> [webpack.Progress] 18% building 71/83 modules 12 active /designsystem/node_modules/.pnpm/[email protected]/node_modules/react/index.js
twig:build: /designsystem/node_modules/.pnpm/@[email protected]/node_modules/@storybook/mdx2-csf/loader.js:23
twig:build:   const options = Object.assign({}, this.getOptions(), {
twig:build:                                          ^
twig:build: 
twig:build: TypeError: this.getOptions is not a function
twig:build:     at Object.loader (/designsystem/node_modules/.pnpm/@[email protected]/node_modules/@storybook/mdx2-csf/loader.js:23:42)
@ilo-org/twig:build:     at LOADER_EXECUTION (/designsystem/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:119:14)

This looks to me like a Webpack error, but I don't understand why Wingsuit is trying to use @storybook/mdx2-csf, which I think is a dependency of Storybook@7 instead of Storybook@6 which Wingsuit ought to be using. I understand @storybook/mdx2-csf only supports Webpack 5, but I can't tell where in my dependency graph it's coming from or why Wingsuit is trying to use it to build the Storybook project.

Here's what the package.json of my Wingsuit project looks like, would really appreciate any advice on how to work through this. Thanks!

{
...
  "dependencies": {
    ...
    "@wingsuit-designsystem/preset-scss": "^1.2.7",
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addons": "^6.4.9",
    "@storybook/linter-config": "^2.5.0",
    "@storybook/react": "^6.4.9",
    "@storybook/storybook-deployer": "^2.8.7",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.17",
    "@wingsuit-designsystem/cli": "1.2.7",
    "@wingsuit-designsystem/core": "1.2.7",
    "@wingsuit-designsystem/pattern": "1.2.7",
    "@wingsuit-designsystem/preset-scss": "^1.2.7",
    "@wingsuit-designsystem/storybook": "1.2.7",
    "autoprefixer": "^10.4.0",
    "core-js": "^3.4.1",
    "cross-env": "^6.0.3",
    "eslint": "^6.7.2",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-webpack": "^0.12.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "^23.7.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.0.1",
    "file-loader": "^6.2.0",
    "fs": "0.0.1-security",
    "fs-extra": "^8.1.0",
    "glob": "^7.1.6",
    "jquery-once": "^2.2.3",
    "lodash": "^4.17.20",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss": "^8.4.12",
    "postcss-loader": "^4.2.0",
    "postcss-nested": "^4.2.1",
    "postcss-scss": "^3.0.4",
    "prettier": "^1.19.1",
    "raw-loader": "^4.0.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "regenerator-runtime": "^0.13.3",
    "require-context": "^1.1.0",
    "resolve-url-loader": "^3.1.5",
    "sass-loader": "^10.4.1",
    "storybook": "^6.5.15",
    "style-loader": "^1.3.0",
    "stylelint-scss": "^3.21.0",
    "webpack": "^4.46.0",
    "yaml-loader": "^0.8.0",
    "yo": "^3.1.1"
  }
}

[christianwiedemann]

Hi, Wingsuit 1.0 propably wont't work with stoybook 7. It only supports webpack 4 and storiesof api. We are currenty working on the v2 version.

[justintemps]

@christianwiedemann Thanks for the fast response! I'm not actually trying to use wingsuit with storybook 7, my wingsuit project just happens to be in a monorepo with another, different Storybook 7 project and it seems like the dependencies are getting mixed up, but I can't figure out how.