Deprecated ember-cli-htmlbars-inline-precompile

[dbendaou]

Because usage of ember-cli-htmlbars-inline-precompile is deprecated,
we should migrate to the new ember-cli-htmlbars to avoid any issue in the futur with new Ember versions.

[gossi]

I've spotted errors with hbs imported from ember-cli-htmlbars. I created an issue over there. Please feed more information in as you have them: ember-cli/ember-cli-htmlbars#374

[rwjblue]

Will need to be fixed here:

https://github.com/storybookjs/storybook/blob/4c757d05f162925217751bb5d61518c108d0935b/app/ember/src/server/framework-preset-babel-ember.js#L7

It should become something like:

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

[gossi]

I tried the configuration from rob... yet unsuccessful. I linked storybook and I'm pretty sure, some of the setup over there got wrongly wired together.

[ndelangen]

I could use some help understanding why the 6.0.0 alpha build of storybook for ember is broken. I think it's related to this maybe:
storybookjs/storybook#9569 (comment)

Would one of you be able to assist maybe? 🙏

[dbendaou]

I may try to have a look if you want, is the issue related to Cannot find module '../dist/server ?

[ndelangen]

When running the build-storybooks script in the monorepo, ember errors:

--------------------------
--
11:16:34 AM | ▶️  building: ember-cli
11:16:34 AM | --------------------------
11:16:34 AM | $ yarn build && shx cp -r public/* dist
11:16:35 AM | $ ember build
11:16:36 AM | - Building
11:16:36 AM | DEPRECATION: The integration of jQuery into Ember has been deprecated and will be removed with Ember 4.0. You can either opt-out of using jQuery, or install the `@ember/jquery` addon to provide the jQuery integration. Please consult the deprecation guide for further details: https://emberjs.com/deprecations/v3.x#toc_jquery-apis
11:16:36 AM | - Building
11:16:37 AM | Environment: development
11:16:37 AM | - Building
11:16:37 AM | - building...
11:16:49 AM | Generating files needed by Storybook
11:16:49 AM | Parsing /tmp/broccoli-4916L1q6useZsJM3/out-97-broccoli_merge_trees/index.html
11:16:49 AM | - building... [Package /assets/vendor.js]
11:16:49 AM | - building... [Package /assets/vendor.js]
11:16:49 AM | Generating preview-head.html
11:16:49 AM | - building... [Package /assets/vendor.js]
11:16:49 AM | Generating files needed by Storybook
11:16:49 AM | - building... [Package /assets/vendor.js]
11:16:49 AM | Generating .env
11:16:49 AM | - building... [Package /assets/vendor.js]
11:16:49 AM | - cleaning up
11:16:49 AM | cleaning up...
11:16:49 AM | - cleaning up
11:16:49 AM | Built project successfully. Stored in "dist/".
11:16:49 AM | $ build-storybook -s dist --output-dir=/zeit/7b7c1fa7/built-storybooks/ember-cli --quiet
11:16:50 AM | info @storybook/ember v5.3.7
11:16:50 AM | info
11:16:50 AM | info clean outputDir..
11:16:50 AM | info => Copying static files from: dist
11:16:50 AM | info => Copying prebuild dll's..
11:16:50 AM | info => Building manager..
11:16:50 AM | info => Loading manager config..
11:16:50 AM | info => Loading presets
11:16:50 AM | info => Compiling manager..
11:17:13 AM | info => manager built (23 s)
11:17:13 AM | info => Building preview..
11:17:13 AM | info => Loading preview config..
11:17:13 AM | info => Loading presets
11:17:13 AM | info => Loading config/preview file in "./.storybook".
11:17:13 AM | info => Adding stories defined in ".storybook/main.js".
11:17:13 AM | info => Using default Webpack setup.
11:17:13 AM | info => Compiling preview..
11:17:13 AM | ERR! => Failed to build the preview
11:17:13 AM | ERR! Module not found: Error: Can't resolve 'htmlbars-inline-precompile' in '/zeit/7b7c1fa7/examples/ember-cli/stories'
11:17:13 AM | (node:4959) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'htmlbars-inline-precompile' in '/zeit/7b7c1fa7/examples/ember-cli/stories'
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/webpack/lib/Compilation.js:925:10
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/webpack/lib/NormalModuleFactory.js:401:22
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/webpack/lib/NormalModuleFactory.js:130:21
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/webpack/lib/NormalModuleFactory.js:224:22
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/neo-async/async.js:2830:7
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/neo-async/async.js:6877:13
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/webpack/lib/NormalModuleFactory.js:214:25
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/Resolver.js:213:14
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/Resolver.js:285:5
11:17:13 AM | at eval (eval at create (/zeit/7b7c1fa7/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/Resolver.js:285:5
11:17:13 AM | at eval (eval at create (/zeit/7b7c1fa7/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/Resolver.js:285:5
11:17:13 AM | at eval (eval at create (/zeit/7b7c1fa7/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
11:17:13 AM | at /zeit/7b7c1fa7/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
11:17:13 AM | (node:4959) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
11:17:13 AM | (node:4959) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
11:17:18 AM | error Command failed with exit code 1.

https://zeit.co/storybook/monorepo/52mj5uiu4

Happy to do some pair debugging if you'd be up to that.
I might learn something about ember!

[gossi]

Yeah, that's the main issue at the moment. See the results matrix I gathered in ember-cli/ember-cli-htmlbars#374

From the suggestion in here from @rwjblue it's less of an ember error but more of a babel thing - at least to my current knowledge. Since hbs is now exported from ember-cli-htmlbars, which for me is a package that has a lot of dark magic in it (maybe I just don't know babel here 😇). I'd like to see this done too and perhaps be up to pair but I'm afraid I'm not that much of a help to start with.

PS. You can find me on both ember and storybook discord. Ping me or ask on each in the respective channel

[dbendaou]

So I presume we can now close this issue ?

[ndelangen]

As soon as an release is done with this change in it, @shilman will close this issue.

[dbendaou]

Closing as it has been released in 5.3.10
https://github.com/storybookjs/storybook/releases/tag/v5.3.10