Storybook: Ember: Module not found: Error: Can't resolve 'fs' in monorepo

[gossi]

When using the new import module: import { hbs } from 'ember-cli-htmlbars;' it will fail when used in a monorepo. The upgrade was introduced with this PR: #9633

Module not found: Error: Can't resolve 'fs'

In short:

• v5.3.10 - import { hbs } from 'ember-cli-htmlbars;' works, when the storyfile is in the same directory as the sb project
• v6 - the above also works when the story is in another folder

Reproduction

https://github.com/gossi/hokulea - Check out run ember serve in the /explorer dir and yarn storybook parallel to (I run them in parallel atm)

If you move /explorer/stories/button.js to /components/buttons/addon/components/button/story.js it will fail when you execute the commands above

Analysis

My suggestion here is, that v6 has some changes that made it work with monorepos but that didn't got cherry-picked for 5.3.

Risk Assessment

At the moment, this is not a risk as this wasn't working before with the old syntax either.

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

[iamareebjamal]

Facing this issue. Any solutions?

I'm using import { hbs } from 'ember-cli-htmlbars';
Used this https://github.com/storybookjs/storybook/issues/4082#issuecomment-495370896, and got this error https://github.com/stefanpenner/username-sync/issues/3, added it to config as well, and now the project runs but throws error at runtime at should-preserve-symlinks.js which is trying to access process args and they are undefined

[gossi]

import { hbs } from 'ember-cli-htmlbars'; works with storybook v5.3.10 in a manyrepo (but just one - ie no monorepo).

Ember and monorepo support is coming with v6. I'm using storybook@next in my ember monorepo and it is working quite well - if you wanna go adventureous

[iamareebjamal]

But this works in 5.3.18 as well. https://github.com/storybookjs/storybook/tree/v5.3.18/examples/ember-cli/
And we have the same setup. An ember app repo with storybook. But in my repo, I am getting these errors. Even after manually editing should-preserve-symlinks.js, it proceeds but I get another error

Object(...) is not a function
TypeError: Object(...) is not a function

I am surely missing something because everything works in the example repo
This is the PR for reference - https://github.com/fossasia/open-event-frontend/pull/4325

[gossi]

The storybook examples:

  "dependencies": {
    "ember-template-compiler": "^1.9.0-alpha"
  }

I'm not sure here, but I use it with addons and ember-cli-htmlbars in dependencies - I'd try that with an app, too.

[iamareebjamal]

Still the same error. However I got the issue. It gets transpiled to

var ToStorybook = function ToStorybook() {
  return {
    template: Object(ember_cli_htmlbars__WEBPACK_IMPORTED_MODULE_3__["hbs"])(_templateObject()),
    context: {
      onClick: Object(_storybook_addon_links__WEBPACK_IMPORTED_MODULE_4__["linkTo"])('Button')
    }
  };
};

ember_cli_htmlbars__WEBPACK_IMPORTED_MODULE_3__ has no entry for 'hbs' and hence it turns to Object(undefined) which then throws Object is not a function. Wasn't super easy to debug because of webpack source maps throwing me back at source code again and again. Any idea what might be causing this?

[iamareebjamal]

This is related to https://github.com/storybookjs/ember-cli-storybook/issues/20
More info in upstream bug - https://github.com/ember-cli/ember-cli-htmlbars/issues/524

Not sure what to do further