[Bug]: Stories glob incorrectly matching test files

[shilman]

Describe the bug

From Discord https://discord.com/channels/486522875931656193/1090840732945891328/1090840732945891328

I have a single stories.tsx file currently. If I include the story directly, all is well. If however, I switch to a wildcard glob (../src/components/**/*.stories.@(ts|tsx)), SB crashes because it's trying to include my *.test.tsx files, which are not *.stories.tsx. I tested the babel config and it's ignoring the test files.

Example error:

ModuleParseError: Module parse failed: Unexpected token (8:11)
File was processed with these loaders:
 * ../../node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| describe('EzAlert', () => {
|   it('should meet accessibility guidelines for status messages', async () => {
>     render(<EzAlert headline="A11y" use="info" />);
|     expect(await axe(await screen.findByRole('status'))).toHaveNoViolations();
|   });
    at handleParseError (/Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:741:23)
    at /Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:843:9
    at processResult (/Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:597:14)
    at /Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:646:9
    at /Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:368:5
    at iterateNormalLoaders (/Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:213:12)
    at iterateNormalLoaders (/Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:217:12)
    at /Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:229:5
    at context.callback (/Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:116:16)
    at /Users/norandabrown/Projects/recipe/node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js:37:73

Version: 7.0.0-rc.10 using react-webpack5
Repo: https://github.com/ezcater/recipe/blob/nb/storybook-7-upgrade/packages/recipe/.storybook/main.ts#L37

To Reproduce

No response

System

No response

Additional context

No response

[tmeasday]

I wasn't able to reproduce this in a basic (NextJS) sandbox.

I have:

  stories: ['../stories/*.stories.@(js|jsx|ts|tsx)'],
  webpackFinal(config) {
    return { ...config, stats: { logging: 'info' } }
  },

And:

(With some intentional mistakes in Button.test.ts). I see:

modules by path ./node_modules/ 4.07 MiB
  javascript modules 4.06 MiB 482 modules
  json modules 3.22 KiB 3 modules
modules by path ./stories/ 14 KiB
  modules by path ./stories/*.css 4.46 KiB 2 modules
  ./stories/ lazy ^\.\/.*$ include: (?:\/stories\/(?%21\.)(?=.)[^/]*?\.stories\.(j...(truncated) 160 bytes [built] [code generated]
  ./stories/Button.stories.ts 4.29 KiB [optional] [built] [code generated]
  ./stories/Button.tsx 5.09 KiB [built] [code generated]
modules by path ./*.js 7.36 KiB
  ./storybook-config-entry.js 4.24 KiB [built] [code generated]
  ./storybook-stories.js 3.13 KiB [built] [code generated]

Notice Button.tests.ts isn't even processed, so unsurprisingly, errors in there have no effect.

Will look at the repro now.

[tmeasday]

OK, I figured out the problem @noranda

The issue stems from this line:

https://github.com/ezcater/recipe/blob/5926d3ed212a9f6db1c9e5a6b8d99a92c0e541c8/packages/recipe/.babelrc#L14

We use special webpackInclude comments in a generated JS file to control which files are processed by webpack. I guess the above strips those comments.

One workaround is to add "./storybook-stories.js" to your ignore list.

@ndelangen I guess the user's babelrc settings must be applying to ./storybook-stories.js, a virtual module we create. Do you think we should:

a) Somehow exclude that file from being processed by babel (i.e do the ignore list thing for them)?
b) Warn the user if they are doing known bad things to it, like stripping comments,
c) Something else?

[ndelangen]

Excluding that path and adding our own loader for it seems the right move to me.

Alternatively we could change the code to not need a loader at all. I'm not sure how hard that would be.

[tmeasday]

I don't believe it needs a loader. It's simple custom JS we produce.

[M3kH]

I will believe #22239 is also related to the same glob issue.
There I notice a different behaviour between Linux FS and Mac FS.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.13 containing PR #22331 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.9 containing PR #22331 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade