Fix the a11y addon

[eirslett]

@storybook/addon-a11y error

a11yRunner.js:10 Uncaught SyntaxError: The requested module '/@fs/Users/zander/code/my/project/node_modules/@storybook/addon-a11y/node_modules/axe-core/axe.js?v=ad04bc2d' does not provide an export named 'default'

Originally posted by @mrmartineau in #4 (comment)

[julrich]

Btw., any idea on where this might originate? Would be willing to try my hands on this!
The one addon we're actually really missing right now :)

[eirslett]

It could be related to cjs/esm module issues. Maybe it's including axe.js directly instead of including axe-core?

[IanVS]

I hit a few dozen similar cases where I needed to add sub-dependencies to my optimizeDeps.include in viteFinal(config). I think this is likely due to vitejs/vite#3024. Hopefully the issue will resolve itself when vite behaves correctly, but for now, we're stuck with big optimizeDeps.include lists I think.

[IanVS]

@julrich are you able to get addon-a11y working with the new 0.0.7 version of this builder (and with specifying it in your optimizeDeps.include)?

[julrich]

Will give it a try! Last time I tried I just gave up, because it seemed really tedious.

Do you have some example you could link / paste on how it's done some other place, maybe?

[IanVS]

I haven't quite cleaned this up all the way, but here's the viteFinal that I ended up with in my own project. You may not need all of it, but hopefully it's a start:

async viteFinal(config) {
    return {
      ...config,
      // Use the standard cache dir, to make it easy to clear
      cacheDir: path.resolve(__dirname, '../node_modules/.vite'),
      optimizeDeps: {
        // This is relative to the root, which is buried in node_modules.
        entries: ['../../../**/*.stories.tsx'],
        include: [
          'axe-core',
          'acorn-jsx',
          '@mdx-js/react',
          '@storybook/addon-actions',
          '@storybook/addon-docs',
          '@storybook/addon-docs/blocks',
          '@storybook/addons',
          '@storybook/client-api',
          '@storybook/client-logger',
          '@storybook/csf',
          '@storybook/react',
          '@storybook/testing-react',
          'classnames',
          'deep-object-diff',
          'doctrine',
          'escodegen',
          'fast-deep-equal',
          'global',
          'hoist-non-react-statics',
          'html-tags',
          'lodash/cloneDeep',
          'lodash/isFunction',
          'lodash/isPlainObject',
          'lodash/isString',
          'lodash/mapValues',
          'lodash/pickBy',
          'lodash/uniq',
          'memoizerific',
          'prop-types',
          'storybook-dark-mode',
          'ts-dedent',
          'qs',
          'util-deprecate',
          'uuid-browser/v4',
        ],
      },
    };
}

[julrich]

Great, thanks a lot. Will report back 🙏

[julrich]

Not really sure how and why, but updating to storybook-builder-vite version 0.0.8, updating to Storybook 6.3.0-rc.4 and re-adding @storybook/addon-a11y my problems in dev mode have gone away completely (pretty sure the "production" build was already working before).

I did not have to add anything to my viteFinal for this to work!

I had a quick look at the last a11y-changes, and it seems like this could've been related:
storybookjs/storybook@04acc44

But pretty sure it wasn't working on some alpha-release for us in the past, and that PR was already part of those.

Any idea, how that could've fixed itself (at least from my limited perspective :D)?
Does it work for you without those viteFinal includes, @IanVS?

[eirslett]

I added axe-core to the optimizeDeps list, that could have helped?

[julrich]

Maybe the combination of those two did it?

• eda3b5a
• f8d84c8

Maybe @IanVS can confirm if his own project works without those in viteFinal, too!

[IanVS]

Cool, I was able to simplify my config greatly:

async viteFinal(config) {
  return {
    ...config,
    // Use our standard cache dir, to make it easy to clear
    cacheDir: path.resolve(__dirname, '../node_modules/.cache/vite'),
    optimizeDeps: {
      ...config.optimizeDeps,
      // Entries are specified relative to the root
      entries: [`${path.relative(config.root, path.resolve(__dirname, '../src'))}/**/*.stories.tsx`],
      include: [...config.optimizeDeps.include, 'storybook-dark-mode'],
    },
  };
},

I'll close out the issue, but let us know if you have any other trouble. Glad it seems to be working for you now.