[Bug] CRA preset does not support ES2020 dependencies

[ph-fritsche]

Describe the bug

Storybook + CRA preset fails due to ModuleParseError for projects containing dependencies in ES2020.

Steps to reproduce the behavior

1. Import a dependency with ES2020 syntax.
2. Start storybook.

See https://github.com/ph-fritsche/repro-storybook-es2020

Expected behavior

Accept imports with ES2020 like CRA does.

Environment

• OS: Debian
• Node.js version: 16.0.0
• NPM version: 7.10.0

[ghost]

@ph-fritsche Were you able to work around this?

[ghost]

I was able to solve this with the following workaround:

  webpackFinal: async (config) => {
    // preset-create-react-app adds an include for the catch-all JS rule and
    // we need to remove it to allow ES2020 syntax in dependencies
    config.module.rules = config.module.rules.map((rule) => {
      if (!rule.oneOf) {
        return rule;
      }

      return {
        oneOf: rule.oneOf.map((oneOfRule) => {
          if (
            Array.isArray(oneOfRule.include) &&
            oneOfRule.include.length === 1 &&
            oneOfRule.include[0] === path.resolve(__dirname)
          ) {
            delete oneOfRule.include;
          }

          return oneOfRule;
        }),
      };
    });

    return config;
  },