CSF stories using the "story.name" property always fail

[JohnAlbin]

I have a super simple component which renders perfectly in Storybook 5.2. It uses the CSF format and the "name" property so that I can use a different name from the variable name of the named export.

import React from 'react';
import Error from './index';

export default {
  component: Error,
  title: 'Pages/Error',
}

export const Error404 = () => (
  <Error
    statusCode={404}
  />
);
Error404.story = {
  name: '404 Error',
};

In CSF, the default name for a story is its exported variable name with spaces inserted before camelcase letters or numbers. In this case Error404 is converted to Error 404, but the name I really want is "404 Error" since that is its common terminology. I can't use export const 404Error because that is invalid JavaScript. Fortunately, CSF allows you to override the default export name with the [export var].story.name property.

This option works great inside Storybook. Unfortunately, it causes Loki to fail to make a screenshot saying:

      ❯ Pages/Error
        ✖ 404 Error
          → Failed with "Unable to get position of selector "#root > *". Review the 
            `chromeSelector` option and make sure your story doesn't crash.
…

If I remove the Error404.story.name property, then Loki is able to generate a screenshot without error.

[JohnAlbin]

Update: I just noticed I have another story with TODO.story = { name: "@TODO"} and that renders fine with Loki.

~~So perhaps it's the use of a space in the name that cause Loki to fail?~~ Edit: Nope. @TODO got converted to TODO which matches the original exported variable name. That just means that most (but not all) stories with [var name].story.name will fail under Loki.