Storybook: Ember: Uncaught TypeError: _global.window.require is not a function

[musaffa]

After running the storybook server, the following error pops up in the browser console:

Uncaught TypeError: _global.window.require is not a function

Originates from this line.

To Reproduce
Steps to reproduce the behavior:

1. ember new storybook-test --yarn
2. cd storybook-test
3. npx -p @storybook/cli sb init
4. yarn build && yarn storybook

System:

• OS: Ubuntu 16.04 LTS
• Browser: Chrome, Firefox
• Framework: Ember (3.5)
• Version: 4.0.12
• Node: 10.14.1
• Yarn: 1.12.3

[igor-dv]

@gabrielcsapo, wasn't sb cli supposed to install sb-ember-adapter?

[igor-dv]

@musaffa, try to use ember-cli-storybook until we have a better solution.

[gabrielcsapo]

@musaffa have you tried using the quick-start guide https://storybook.js.org/basics/guide-ember/?

@igor-dv will investigate and make sure it gets added as a part of the bootstrapping process

[musaffa]

@gabrielcsapo Yes I tried and I encountered this error #4672.

[ghost]

here is clean repository with this issue https://github.com/killabeat/storybook-issue-4957

[gabrielcsapo]

@musaffa what was the version of storybook you were installing?

@killabeat would you be able to go through the bootstrapping process and show where it fails? There is no stories in the specified link.

[musaffa]

Storybook version: 4.0.12

[ghost]

@gabrielcsapo
sorry i hurried) added strories to https://github.com/killabeat/storybook-issue-4957

[barryofguilder]

I went through the steps on the Ember guide an ran into issue #4672. I solved it by running npm i --save-dev babel-loader. After that, I hit this issue ☹️. Anybody solve it yet?

[ghost]

@musaffa @barryofguilder
I can run this example https://github.com/storybooks/storybook/tree/next/examples/ember-cli

[barryofguilder]

@killabeat the package.json file seems to have a lot more stuff than what you get by following the instructions in the guide.

I have followed the Ember specific guide which just says you have to run npm i --save-dev @storybook/ember and then it walks you through adding the config file, stories, etc. That will give you the error that says "Cannot find module 'babel-loader/package.json'" when you run npm run storybook and it tries to pull stuff from the Ember build. After manually running npm i --save-dev babel-loader, I get the error that says "Uncaught TypeError: _global.window.require is not a function" after storybook is launched in my browser.

I have followed the instructions from the generic Quick Start guide that says to run npx -p @storybook/cli sb init. This actually gets you a little further because it detects I am using Ember, so it installs storybook for Ember. It also installs babel-loader. But I still get an error that says "Uncaught TypeError: _global.window.require is not a function" after storybook is launched.

I'm not sure if there are some dependencies that are not added when installing storybook (using either method), or if there are some additional dependencies needed for storybook that I should just know I have to install.

[barryofguilder]

@killabeat And yes, if I clone the storybook repo and run the ember-cli example, it works. I'm trying to figure out what's missing between mine and that.

[barryofguilder]

It seems that the step missing from the guide is to manually install ember-cli-storybook. The guides say

Your environment will be preconfigured using ember-cli-storybook.

But I don't think there's anything that's actually installing that addon when running npm i --save-dev @storybook/ember. This addon is what's responsible for creating the .storybook/preview-head.html file which is crucial to running Stoybook.

After manually installing that addon with ember install ember-cli-storybook, my Ember app is successfully running Storybook.

Edit: It also seems that if you run the storybook script first, which does ember serve & start-storybook -p 9001 -s dist, the storybook files are not generated. You must first run the build-storybook command, which does ember build && build-storybook -p 9001 -s dist. After you do that, running the storybook command will update the files, but it seems like it doesn't create the files initially.

[gabrielcsapo]

@barryofguilder correct, you have to start ember serve or ember build then run storybook. This is a limitation of how ember can be integrated with storybook, hopefully we can statically build a ember application in the future, without the need to compile the application and then inject it to run pieces of it.

[barryofguilder]

@gabrielcsapo It's strange though, when running storybook the very _first_ time, ember serve does not create the preview-head.html file. I noticed that I had to run ember build the first time, then once the preview-head.html file exists, running ember serve before storybook will update the file accordingly.

[gabrielcsapo]

Right, ember serve will enable live reload, ember build does not enable live reload.

[barryofguilder]

@gabrielcsapo Sorry, I don't think I'm explaining it well enough.

If I follow the steps on the Storybook for Ember page, I get an error due to the preview-head.html file not being there. I have my npm scripts setup just like it says:

{
  "scripts": {
    "build-storybook": "ember build && build-storybook -p 9001 -s dist",
    "storybook": "ember serve & start-storybook -p 9001 -s dist"
  }
}

What I'm saying is, after installing Storybook and going through the guide, at the end it says:

Now everything is ready. Simply run your storybook with: npm run storybook

Doing that gives me the error that this issue is talking about. It seems that running ember serve does not create the preview-head.html file. Running ember build does create the preview-head.html file. Once the file exists, running ember serve will update the file with additional stuff, but it does not create it.

That leads me to believe one of two things:

1. The ember-cli-storybook addon needs to be updated to create the preview-head.html file when running ember serve.
2. The Ember guide for Storybook needs to be updated to say that if the preview-head.html file doesn't exist, you must first run ember build (not ember serve) to create it.

I'm not familiar enough with Storybook yet to know which option is correct.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[robertsteilberg]

Still having this issue. Anyone find a resolution?

[ddoria921]

I ran into this same issue. I ran the exact steps listed in the original issue.

I resolved it by doing the following:

1. ember install @storybook/ember-cli-storybook
2. Replacing the generated scripts in package.json with

"build-storybook": "ember build && build-storybook -s dist",
 "storybook": "ember serve & start-storybook -p 9001 -s dist"

1. Run npm run build-storybook && npm run storybook

[gvocale]

I keep running into this issues.

I have tried to do the following in succession:

1. ember install @storybook/ember-cli-storybook
2. ember build
3. build-storybook -s dist
4. ember serve in one terminal
5. start-storybook -p 9003 -s dist in another

But I keep running into:
_global.window.require is not a function

The file .storybook/preview-head.html is there.