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

frinyvonnick · 2023-01-17T13:47:33Z

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.

The text was updated successfully, but these errors were encountered:

ArnaudWeyts · 2023-01-24T09:25:41Z

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 · 2023-01-28T07:09:24Z

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

tdwesten · 2023-01-30T09:11:56Z

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

m3l1x · 2023-02-09T12:30:09Z

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

shilman · 2023-02-14T07:49:38Z

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 · 2023-02-22T16:56:45Z

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

gossi · 2023-02-22T23:41:00Z

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 · 2023-02-23T09:24:01Z

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 · 2023-04-19T23:38:37Z

👋 Getting the same issue here.

robclancy · 2023-06-21T12:25:59Z

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

frinyvonnick added bug needs triage labels Jan 17, 2023

shilman added ember and removed needs triage labels Feb 14, 2023

This was referenced Mar 6, 2023

Ember: Fix broken import #21435

Closed

Ember: Fix broken import #21580

Closed

francois2metz mentioned this issue Jul 13, 2023

Ember: Fix @storybook/ember #23435

Merged

5 tasks

shilman closed this as completed in #23435 Dec 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

frinyvonnick commented Jan 17, 2023 •

edited

ArnaudWeyts commented Jan 24, 2023

maneetgoyal commented Jan 28, 2023

tdwesten commented Jan 30, 2023

m3l1x commented Feb 9, 2023

shilman commented Feb 14, 2023 •

edited

dbendaou commented Feb 22, 2023

gossi commented Feb 22, 2023

dbendaou commented Feb 23, 2023

esbanarango commented Apr 19, 2023

robclancy commented Jun 21, 2023

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

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

Comments

frinyvonnick commented Jan 17, 2023 • edited

Describe the bug

To Reproduce

System

Additional context

ArnaudWeyts commented Jan 24, 2023

maneetgoyal commented Jan 28, 2023

tdwesten commented Jan 30, 2023

m3l1x commented Feb 9, 2023

shilman commented Feb 14, 2023 • edited

dbendaou commented Feb 22, 2023

gossi commented Feb 22, 2023

dbendaou commented Feb 23, 2023

esbanarango commented Apr 19, 2023

robclancy commented Jun 21, 2023

frinyvonnick commented Jan 17, 2023 •

edited

shilman commented Feb 14, 2023 •

edited