Unable to launch following install instructions

[michaeltford]

I get the following error when trying to load. Am I missing something obvious? I appears to be a babel related issue.

ModuleNotFoundError: Module not found: Error: Can't resolve '@babel/plugin-syntax-unicode-sets-regex' in 'C:\dev\sheetxl\node_modules\@babel\standalone'.

When trying to troubleshoot I downloaded the source and tried to run the example (I am on a windows 11 box). I get the following error Cannot find module './dist/cjs/preset'

[svanetten1976]

@michaeltford I am getting the same exact issue when running Storybook 6.5.14. Or, if I have not built yet and am trying to build with a test Playground component, I also get this message "Field 'browser' doesn't contain a valid alias configuration" along with a number of node_modules/@babel/plugin-syntax-unicode-sets-regex doesn't exist errors. Any ideas @JeremyRH ?

[michaeltford]

Thanks @svanetten1976 . I am not new to development and I spent several hours with no luck. I also tried in sb 7.1alpha with fresh download. This component looks so awesome.

It has something to do with babel standalone needed for monaco but sb is include/mapping.

[JeremyRH]

Thanks for reporting, I'll take a look at this soon.

[svanetten1976]

@michaeltford @JeremyRH I actually just solved the issue, figured out what I needed to do anyways with my configuration. This is the magic line, maybe this is something you want to add : '@babel/plugin-syntax-unicode-sets-regex': path.resolve(__dirname, '../', 'node_modules/@babel/standalone')

This is in storybook/main.ts in my case, here is the full webpackFinal function (there is some other stuff in there very specific to the app I am working on but that is the magic line that fixed stuff for me):

  webpackFinal: async (config) => {
    // Use SVGR for SVG files
    const fileLoaderRule = config.module.rules.find((rule) => (rule as any).test.test('.svg'));
    (fileLoaderRule as any).exclude = /\.svg$/;
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        { loader: '@svgr/webpack', options: { icon: true } },
        {
          loader: 'file-loader',
          options: {
            name: '[name].[contenthash].[ext]',
          },
        },
      ],
    });

    config.resolve.alias = {
      '@babel/plugin-syntax-unicode-sets-regex': path.resolve(__dirname, '../', 'node_modules/@babel/standalone'),
      '@': path.resolve(__dirname, '../', 'src'),
    };

    return config;
  },

[michaeltford]

@svanetten1976, very nice job! I thought about an alias but I thought there might be a ton more. I will try this patch tomorrow and thanks. @JeremyRH do you think this is a storybook issue or a monaco issue? I didn't see anything in your codebase that looked like it would cause this.

[JeremyRH]

@babel/standalone has this in its JS:

require("@babel/plugin-syntax-unicode-sets-regex")

but it does not have @babel/plugin-syntax-unicode-sets-regex as a dependency or peer dependency. Maybe this was working before due to storybook or some other dependency bringing in @babel/plugin-syntax-unicode-sets-regex and now it's not. I can try to fix it by making @babel/plugin-syntax-unicode-sets-regex a dependency of storybook-addon-code-editor but it should really be fixed elsewhere.

EDIT: Looks like this might be related: https://github.com/babel/babel/pull/15636 This comment here sheds some light on this. I'm intentionally transforming code written in the editor to CommonJS to hook into the require( calls. I'm hoping there's a way to stop this plugin from loading even when using CommonJS. Possibly this.

[JeremyRH]

This was fixed on babel's side: https://github.com/babel/babel/pull/15675/files