[Bug] Error: Ember is not defined (Ember v4.1.1)

[dimtatarin]

Component in Storybook page is displayed with an error:

package.json:

"devDependencies": {
    "@babel/core": "^7.17.0",
    "@ember/optional-features": "^2.0.0",
    "@ember/test-helpers": "^2.6.0",
    "@glimmer/component": "^1.0.4",
    "@glimmer/tracking": "^1.0.4",
    "@storybook/addon-actions": "^6.4.18",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/builder-webpack5": "^6.4.18",
    "@storybook/ember": "^6.4.18",
    "@storybook/ember-cli-storybook": "^0.4.0",
    "@storybook/manager-webpack5": "^6.4.18",
    "autoprefixer": "^10.0.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^2.2.4",
    "ember-cli": "~4.1.1",
    "ember-cli-app-version": "^5.0.0",
    "ember-cli-babel": "^7.26.11",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^6.0.1",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-terser": "^4.0.2",
    "ember-cli-typescript": "^5.0.0",
    "ember-cli-typescript-blueprints": "^3.0.0",
    "ember-data": "~4.1.0",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.1.1",
    "ember-load-initializers": "^2.1.2",
    "ember-page-title": "^7.0.0",
    "ember-qunit": "^5.1.5",
    "ember-resolver": "^8.0.3",
    "ember-source": "~4.1.0",
    "ember-template-lint": "^4.0.0",
    "ember-welcome-page": "^6.0.0",
    "eslint": "^8.8.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-ember": "^10.5.8",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-qunit": "^7.2.0",
    "eslint-plugin-storybook": "^0.5.6",
    "html-webpack-plugin": "^5.5.0",
    "loader.js": "^4.7.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.6",
    "prettier": "^2.5.1",
    "qunit": "^2.17.2",
    "qunit-dom": "^2.0.0",
    "tailwindcss": "^3.0.0",
    "typescript": "^4.5.5",
    "webpack": "^5.68.0"
  },

Steps to reproduce the behavior

1. ember install @storybook/ember-cli-storybook
2. npx sb init
3. npm run storybook
4. See error

Environment

• OS: macOS Monterey 12.1
• Node.js version: v14.17.6
• NPM version: 8.1.2
• Browser: Chrome
• Browser version: 98.0.4758.80

[steckel]

I also am experiencing this bug.

[m3l1x]

same here, additionally it crashes because of setting Ember.testing = true in preview-head.html generated by

ember-cli-storybook/lib/util.js

Line 142 in 53c3948

doc.push('<script>runningTests = true; Ember.testing=true;</script>');

[jgadbois]

I am getting this bug as well after upgrading Ember to 4.1

[gabrielcsapo]

ember 4 upgrade will most likely need to be supported by a major bump in this library. Looking into it over the weekend.

[benedikt]

@gabrielcsapo Is there anything I can do to help with this? I'd be happy to look into things, just have no idea where and how to start.

[dbendaou]

I think the issue comes actually from the render within storybook itself, not the this package

https://github.com/storybookjs/storybook/blob/next/app/ember/src/client/preview/render.ts#L41

[dbendaou]

This should fix the issue storybookjs/storybook#17843

[fastfedora]

@dbendaou I am getting the same issue on a fresh install of Storybook using . I tried monkey-patching in the fix from storybookjs/storybook#17843 and it didn't appear to work.

I was able to track down where the Ember.HTMLBars is being output in the final JavaScript and it appears to be coming from the babel-plugin-htmlbars-inline-precompile plugin that is configured in this file. The documentation for this plugin has an example of transforming hbs'hello' into Ember.HTMLBars.template(...).

I tried a bunch of different configuration options to change this behavior, but couldn't get it to work. Removing the plugin broke the compilation.

Hope that's useful in tracking down the source of the bug. FYI, I'm using Ember 4.2.0.

[jelhan]

I was able to track down where the Ember.HTMLBars is being output in the final JavaScript and it appears to be coming from the babel-plugin-htmlbars-inline-precompile plugin that is configured in this file.

This maybe related to using a very outdated version of that babel plugin:

• Latest version is 5.3.1. https://www.npmjs.com/package/babel-plugin-htmlbars-inline-precompile
• Recent ember-cli-htmlbars specifies ^5.3.0 for its dependency on babel-plugin-htmlbars-inline-precompile enforcing nearly the latest version: https://github.com/ember-cli/ember-cli-htmlbars/blob/78a29d83b5d2674a929b0e22224f381a8db4149f/package.json#L37
• Storybook seems to use 2 || 3: https://github.com/storybookjs/storybook/blob/181208dd36641f68c2ff1b9ad5afa0420e606498/app/ember/package.json#L60
• In ember-cli-htmlbars@4.3.0 an useEmberModule option was added, which seems to be related: Adds useEmberModule option ember-cli/babel-plugin-htmlbars-inline-precompile#332

Long story short: I guess that babel plugin must be updated to a recent version.

[fastfedora]

So I can confirm that the version of babel-plugin-htmlbars-inline-precompile that is being run by Storybook is v5.3.1, the latest version (verified through a console statement in the actual code). Looks like it's only defined as a peer dependency in that package.json, so it doesn't actually install a separate version.

I had multiple versions of ember-cli-htmlbars, but just forced a resolution to the latest version, 6.0.1, so only that version was installed and it didn't fix the issue.

I also tried setting useEmberModule to both true and false in framework-preset-babel-ember.js and it didn't solve the problem.

Note that the problem does appear to be with either babel-plugin-htmlbars-inline-precompile or ember-cli-htmlbars and not one of the other modules list, because it still exhibits the issue without generating errors if I comment out the second two modules:

  var extraPlugins = [[require.resolve('babel-plugin-htmlbars-inline-precompile'), {
    precompile: precompileWithPlugins,
    modules: {
      'ember-cli-htmlbars': 'hbs',
//      'ember-cli-htmlbars-inline-precompile': 'default',
//      'htmlbars-inline-precompile': 'default'
    }
  }], [require.resolve('babel-plugin-ember-modules-api-polyfill')]];

Finally, there was also a moduleOverrides option added in this PR, but there is no documentation on it, so I'm not sure how to use it. Looking at the test code, it looks like it might be Glimmer related.

Also, there is this PR which seems to indicate that babel-plugin-ember-template-compilation might be a better/newer option than babel-plugin-htmlbars-inline-precompile. But I couldn't get that to work.

Happy to try other things on my setup if it's helpful for debugging.

[bakerac4]

@gabrielcsapo same here. If theres anything I can do to help please let me know. I just recently updated to ember 4.0 for the addons I wanted to use storybook on - so unless there is a known workaround Im paused for the moment.

[dbendaou]

I think we have many issues that needs to be addressed here:

• Removed any Ember global usage
• Upgrade the template compiler (either switch to babel-plugin-ember-template-compilation or upgrade babel-plugin-htmlbars-inline-precompile)

[dbendaou]

I've pushed a MR to upgrade our Ember scenario and test against Ember4, this should help the upgrade #113

[bakerac4]

I created storybookjs/storybook#18028 today after doing a bit of research for it. I was able to locally bypass the Ember is undefined issue. But its a whole process ... We will need a few changes to fix this stuff.