[Bug]: Fresh install Storybook with Ember framework produces a ModuleNotFoundError

[frinyvonnick]

Describe the bug

Hello 👋

First of all, thank you for all the great work you do for the community 🙏

Today, I tried a fresh install of storybook for ember framework using the following guide : https://storybook.js.org/docs/ember/get-started/install

At the step npm run storybook it produces this error :

ModuleNotFoundError: Module not found: Error: Can't resolve '@ember/component' in '/Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/esm/client/preview'
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/Compilation.js:2016:28
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/neo-async/async.js:6883:13
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/webpack/lib/NormalModuleFactory.js:958:45
    at finishWithoutResolve (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/forEachBail.js:16:12
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/AliasPlugin.js:125:14
    at next (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/forEachBail.js:14:3)
    at forEachBail (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/forEachBail.js:24:9)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/AliasPlugin.js:51:5
    at _next0 (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/myuser/Documents/workspace/ember-quickstart/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/myuser/Documents/workspace/ember-quickstart/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:41:15
    at processTicksAndRejections (node:internal/process/task_queues:82:21)
resolve '@ember/component' in '/Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/esm/client/preview'
  Parsed request is a module
  using description file: /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/package.json (relative path: ./dist/esm/client/preview)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/esm/client/preview/node_modules doesn't exist or is not a directory
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/esm/client/node_modules doesn't exist or is not a directory
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/esm/node_modules doesn't exist or is not a directory
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/dist/node_modules doesn't exist or is not a directory
      looking for modules in /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules
        single file module
          using description file: /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/package.json (relative path: ./node_modules/@ember/component)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.json doesn't exist
            .cjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component.cjs doesn't exist
        /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/ember/node_modules/@ember/component doesn't exist
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@storybook/node_modules doesn't exist or is not a directory
      /Users/myuser/Documents/workspace/ember-quickstart/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/myuser/Documents/workspace/ember-quickstart/node_modules
        single file module
          using description file: /Users/myuser/Documents/workspace/ember-quickstart/package.json (relative path: ./node_modules/@ember/component)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.json doesn't exist
            .cjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component.cjs doesn't exist
        /Users/myuser/Documents/workspace/ember-quickstart/node_modules/@ember/component doesn't exist
      /Users/myuser/Documents/workspace/node_modules doesn't exist or is not a directory
      /Users/myuser/Documents/node_modules doesn't exist or is not a directory
      /Users/myuser/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

To Reproduce

I can't create a "reproduction" using npx sb@next sandbox because my issue occurs during installation. Here is what I did:

• Use node 16 (which is still supported see here)

nvm use 16

• Install latest version of Ember CLI (v4.9.2)

npm install -g ember-cli

• Create a fresh app Ember

ember new ember-quickstart --lang fr

• Check Ember app works fine

cd ember-quickstart
npm start

• Install storybook for Ember

npx storybook init
ember install @storybook/ember-cli-storybook

• Run storybook (it is when the error occurs)

npm run storybook

System

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Firefox: 108.0.2
    Safari: 15.2
  npmPackages:
    @storybook/addon-actions: ^6.5.15 => 6.5.15
    @storybook/addon-essentials: ^6.5.15 => 6.5.15
    @storybook/addon-links: ^6.5.15 => 6.5.15
    @storybook/builder-webpack5: ^6.5.15 => 6.5.15
    @storybook/ember: ^6.5.15 => 6.5.15
    @storybook/ember-cli-storybook: ^0.6.0 => 0.6.0
    @storybook/manager-webpack5: ^6.5.15 => 6.5.15

Additional context

I also tried to bootstrap an Ember Addon rather than an Ember App. It produces the same error.

[ArnaudWeyts]

Seems to be introduced somewhere between @storybook/ember 6.5.13 and 6.5.15, I ran into the same issue updating from 6.5.13.

[maneetgoyal]

Getting the same issue. Trued this too: https://storybook.js.org/tutorials/intro-to-storybook/ember/en/get-started/. Same issue.

[tdwesten]

Getting the same issue, rolling back to 6.5.13 works..

[m3l1x]

6.5.14 is the last working release, issue can be reproduced on 6.5.15 and 6.5.16

[shilman]

I'm guessing it's due to this change which was released in v6.5.15. #17843

@dbendaou @krezi @gossi any thoughts here? did we release a breaking change on 6.5?

[dbendaou]

It's seems that we've released a bug in the v6.5.15 indeed :/

[gossi]

Apparently the backport of #17843 to v6.5.15 broke it. Afair, v7 is also broken for ember - the last time I tried (due to this?)

I dunno if I ever get time to dig into this. But is there a tutorial/docs, how to spin up storybook development environment locally? That's preventing me from even consider trying.

[dbendaou]

Shall we start by reverting my MR? then see how we can properly mitigate this
I was unable to try but I think we should replace this line with import Component from '@glimmer/component'

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

Line 5 in e2fda25

import Component from '@ember/component'; // eslint-disable-line import/no-unresolved

[esbanarango]

👋 Getting the same issue here.

[robclancy]

Rolling back to 6.5.13 fixes this but means other bug fixes for Ember 4 just aren't there.