Storybook: Issue with using addon: Unexpected value 'undefined' declared by the module 'DynamicModule'

[balteo]

Describe the bug
I am facing an issue with adding storysource addon. Here is the error I get:

Unexpected value 'undefined' declared by the module 'DynamicModule'
Error: Unexpected value 'undefined' declared by the module 'DynamicModule'
    at syntaxError (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:8364:17)
    at http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:27800:40
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:27798:54)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:33910:51)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:33891:36)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:33851:37)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:74246:31)
    at compileNgModuleFactory__PRE_R3__ (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:63073:21)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (http://localhost:4400/vendors~main.f55ebc95ceee9dbd1ca0.bundle.js:63300:16)

To Reproduce
I have npm i the addon (from package.json):

"@storybook/addon-knobs": "5.3.17",
"@storybook/addon-storysource": "5.3.17",

I have added the storysource addon as follows (from addons.js):

import '@storybook/addon-storysource/register';

And configured it as follows (from config.js):

import { configure, addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
import { withStorySource } from '@storybook/addon-storysource';

addDecorator(withKnobs);
addDecorator(withStorySource);
configure(require.context('../src/lib', true, /\.stories\.tsx?$/), module);

Expected behavior
The source for my component should be displayed.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.2 - ~/.nvm/versions/node/v12.3.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 69.0
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-knobs: 5.3.17 => 5.3.17 
    @storybook/addon-storysource: 5.3.17 => 5.3.17 
    @storybook/angular: 5.3.17 => 5.3.17 

Additional context

• I have opened an post on SO: https://stackoverflow.com/questions/60883649
• FYI, I am using Nrwl Nx and Angular
• Please note that the knobs addon works fine by itself. The issue occurs when I add the storysource addon.

[shilman]

Can you provide a reproduction repo?

[balteo]

Hi @shilman
Please find the reproduction repo here: https://github.com/balteo/reproduction_issue_10230
There's only one branch. After npm i, please run the following command: nx run my-lib:storybook and open your browser here: http://localhost:4400/

[balteo]

@shilman
This might help: I noticed that in libs/my-lib/.storybook/config.js

addDecorator(withKnobs); // A
addDecorator(withStorySource); // B

B seems to point to that code (from node_modules/@storybook/addon-storysource/dist/index.js):

Object.defineProperty(exports, "withStorySource", {
  enumerable: true,
  get: function get() {
    return _preview.withStorySource;
  }
});

whereas A points to that line of code (from node_modules/@storybook/addon-knobs/dist/index.d.ts): export declare const withKnobs: (...args: any) => any;

[shilman]

It definitely seems to be an issue with your storysource setup.

It works when I remove all storysource references in your code and use the preset instead in .storybook/presets.js:

module.exports = ['@storybook/addon-storysource/preset'];

Note: I'd recommend upgrading to the main.js config

[balteo]

Thanks for your reply. It works indeed. I am closing the issue.