Storybook broken in Ember 4.X

[bakerac4]

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 storybookjs/ember-cli-storybook#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']
  }]];

2. You'll need to update

   storybook/app/ember/src/client/preview/render.ts

   Line 41 in 4b47793

   Ember.Component.extend({

   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.

3. You might need Duplicate @glimmer/validator library blocks rendering glimmerjs/glimmer-vm#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.

[dbendaou]

For the 2nd one there's a MR open already #17843

We could switch to glimmer but that should be enough for fixing the Ember is not defined wdyt?

[bakerac4]

Im by no means an expert in the internals of ember, or storybook at all (I really just wanted to try storybook for the first time haha) but it seems like you would need to attack it from multiple sides due to how storybook renders.

It seems to take your template on client side and convert it via template compiler. Then it uses that compiled template on the server side. And both "sides" actually have an issue with using the global Ember variable.

[RobbieTheWagner]

Any updates here? I'm having a lot of Ember 4 / addon v2 issues.

[dbendaou]

Can you copy past which errors you have? I have an ember addon working with Ember 4 & embroider safe
The only issue that I got was related to doc.json not working (API of component through YUIdoc)

[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"

[olyckne]

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

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

[jayjayjpg]

In an Ember 4 addon that I'm trying to upgrade with the respective new version of storybook@6.5.15, I can see that the missing Ember global error has disappeared, but I'm running into additional build issues when running npm run storybook:

99% done plugins webpack-hot-middlewarewebpack built preview dce4affe3ddb6eed9fb4 in 8894ms
ModuleNotFoundError: Module not found: Error: Can't resolve '@ember/component' in '/my/path/ember4-storybook-example-addon/node_modules/@storybook/ember/dist/esm/client/preview'

// ...

  Parsed request is a module
  using description file: /my/path/ember4-storybook-example-addon/node_modules/@storybook/ember/package.json (relative path: ./dist/esm/client/preview)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

I also created a reproduction repository here in case it is helpful as a reference: https://github.com/jayjayjpg/ember4-storybook-example-addon

Is there a way to contribute to a fix in @storybook/ember for this issue?

[robclancy]

This @ember/component issue seems to be one that is being ignored. I downgraded because of it and then run into the issue with the Ember global.