Using lerna, source-loader cannot resolve packages

Describe the bug

WARNING in ./packages/common/src/AntdCommonButton.stories.tsx 16:2
Module parse failed: Unexpected token (16:2)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|     title: 'Example/AntdCommonButton',
|     component: AntdCommonButton,
> } as Meta;
| 
| export const basic = () => <AntdCommonButton type="primary" />;
 @ \.)(?=.)[^\/]*?\.stories\.(js|jsx|ts|tsx))$ (./packages sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|jsx|ts|tsx))$) ./common/src/AntdCommonButton.stories.tsx
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Expected behavior Hope the packages directory can work If it is in the src directory, it can work.

Screenshots

Code snippets https://github.com/lucaslz2020/cra-ts-lerna-antd

System:

    "@babel/core": "^7.11.4",
    "@storybook/addon-actions": "^6.0.17",
    "@storybook/addon-essentials": "^6.0.17",
    "@storybook/addon-links": "^6.0.17",
    "@storybook/node-logger": "^6.0.17",
    "@storybook/preset-ant-design": "0.0.1",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.17",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "lerna": "^3.18.3",
    "less": "^3.12.2",
    "less-loader": "^5.0.0",
    "react-is": "^16.13.1",
    "style-loader": "^1.2.1"

Additional context https://github.com/storybookjs/storybook/issues/10347

[drphelps]

I had the same issue in a monorepo with workspaces. It should be possible to tweak the Webpack config so that your package dirs are transpiled, something like the following:

module.exports = {
  ...

  webpackFinal: (config) => {
    const {
      module: {
        rules: [, , , , , , { oneOf }],
      },
    } = config;

    const babelLoader = oneOf.find(({ test }) => new RegExp(test).test('.ts'));

    // transpile shared modules from any package
    babelLoader.include = /packages\/(.*)\/src/;

    return config;
  },
};

[mattfelten]

Figured it out. For whatever reason this config had an extra item in the array. I needed an extra comma.

console.log('config.module.rules', config.module.rules);

^ was able to show me how many rules I had and where oneOf was.