Storybook broken in Ember 4.X

Describe the bug Storybook is completely broken when trying to use it in Ember 4.X Ember 4 removes deprecated features, one of those being Global Ember usage. See https://github.com/storybookjs/ember-cli-storybook/issues/103 for more information

After doing a bit of research there are a few target areas that will need to be fixed.

1. You’ll need to use babel-plugin-ember-template-compilation here

var extraPlugins = [[require.resolve('babel-plugin-ember-template-compilation'), {
      precompile: precompileWithPlugins,
      outputModuleOverrides: {
            '@ember/template-factory': {
              createTemplateFactory: ['createTemplateFactory', '@glimmer/core'],
            }
          },
    enableLegacyModules: ['ember-cli-htmlbars', 'ember-cli-htmlbars-inline-precompile', 'htmlbars-inline-precompile']
  }]];

1. You’ll need to update https://github.com/storybookjs/storybook/blob/4b47793e118f091971f2a453d486c5f01875811d/app/ember/src/client/preview/render.ts#L41 to remove the global ember usage. There is a pull request for this already, but Im not quite sure if you will also have to update it to be a glimmer component and use setComponentTemplate.

2. You might need https://github.com/glimmerjs/glimmer-vm/issues/1252 to be fixed - because you’ll run into that once you make the first change.

Even with all this, I still wasn’t able to get it 100% working - but I was able to bypass the Ember is not defined error.

[olyckne]

@pomm0 I’ve solved that by putting an override in package.json.

"overrides": {
    "@storybook/ember": {
      "ember-source": "~4.8.0"
    },
}

[pomm0]

I’m also not able to update my addon to Ember version 4. But I stuck at the very first step: installing node modules because storybooks’ package.json only allows ember 3.x:

"ember-source": "^3.16.0"