Addon Docs and Controls not working with Yarn 2.

Describe the bug Hi. I have a monorepo setup with Yarn 2 and the latest storybook and addons. The Doc page shows an error when I navigate to it, and the controls section shows not setup, despite following the examples shown in the Docs.

To Reproduce Steps to reproduce the behavior:

1. Create New Repo with Yarn 2
2. Try to setup Addon Docs and Controls
3. Observe errors in screenshots below

Expected behavior Docs page and Controls tabs work as specified in docs

Screenshots

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

main.js file

const { resolve, join } = require('path');
const lessToJS = require('less-vars-to-js');

const UNIVERSAL_PATH = join(__dirname, '../../universal/src');

if (typeof require !== 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  require.extensions['.less'] = (file) => {};
}

const themeVariables = lessToJS(
  readFileSync(
    resolve(__dirname, `${UNIVERSAL_PATH}/theme/antdThemeVariables.less`),
    'utf8'
  )
);

module.exports = {
  // stories: [`${SRC_PATH}/**/*.stories.tsx`],
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-viewport',
    '@storybook/addon-backgrounds',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },

    '@storybook/addon-controls',
    '@storybook/addon-actions',
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    const isDEV = configType === 'DEVELOPMENT';
    const isPROD = configType !== 'DEVELOPMENT';
    // config.resolve.extensions.push('.ts', '.tsx');
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            plugins:
              process.env.NODE_ENV === 'production'
                ? [
                    require('postcss-import'), // use with https://github.com/postcss/postcss-url in prod
                    require('tailwindcss')('../universal/tailwind.config.js'),
                    require('postcss-flexbugs-fixes'),
                    require('postcss-preset-env')({
                      autoprefixer: {
                        flexbox: 'no-2009',
                        grid: 'autoplace',
                      },
                      stage: 3,
                      features: {
                        'custom-properties': false,
                      },
                    }),
                  ]
                : [
                    require('tailwindcss')('../universal/tailwind.config.js'),
                    require('postcss-preset-env'),
                  ],
          },
        },
      ],
      include: [
        resolve(__dirname, '../'),
        resolve(__dirname, `${UNIVERSAL_PATH}/`),
      ],
    });

    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: [
        resolve(__dirname, '../'),
        resolve(__dirname, `${UNIVERSAL_PATH}/styles/main.scss`),
      ],
    });

    config.module.rules.push({
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader', // translates CSS into CommonJS
        },
        {
          loader: 'less-loader', // compiles Less to CSS
          options: {
            javascriptEnabled: true,
            modifyVars: themeVariables,
          },
        },
      ],
    });

    // Return the altered config
    return config;
  },
};```

***preview.js file***
```export const parameters = {
  actions: { argTypesRegex: '^on.*' },
};```

**System:**
Using Yarn 2, Node 12, Storybook versions:

"@storybook/addon-actions": "^6.0.0-beta.31",
"@storybook/addon-backgrounds": "^6.0.0-beta.31",
"@storybook/addon-controls": "^6.0.0-beta.31",
"@storybook/addon-docs": "^6.0.0-beta.31",
"@storybook/addon-essentials": "^6.0.0-beta.31",
"@storybook/addon-knobs": "^6.0.0-beta.31",
"@storybook/addon-links": "^6.0.0-beta.31",
"@storybook/addon-storyshots": "^6.0.0-beta.31",
"@storybook/addon-viewport": "^6.0.0-beta.31",
"@storybook/addons": "^6.0.0-beta.31",
"@storybook/client-api": "^6.0.0-beta.31",
"@storybook/client-logger": "^6.0.0-beta.31",
"@storybook/react": "^6.0.0-beta.31",

[nnennajohn]

Thanks so much @shilman. You are right. I think its because my stories are in its own package. Sadly, I can’t move it, as it’s intentionally structured that way. I found that just adding SampleStory.args = { someSampleProp: '' } generates the specified arg. I will def be loosing out on automatic arg generation. But I get all the other awesome stuff with Storybook 6. So still happy.

Thanks again for helping me figure this out.

[jayarjo]

I also have a problem with monorepo. However in my case versions definitely match. The problem is that @storybook/addon-controls module is for some reason installed into the root node_modules and Storybook in one of the packages simply acts as if @storybook/addon-controls is not registered or present.