Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

angular 13.1 stories file missing from the TypeScript compilation #17039

Closed
literalpie opened this issue Dec 18, 2021 · 73 comments
Closed

angular 13.1 stories file missing from the TypeScript compilation #17039

literalpie opened this issue Dec 18, 2021 · 73 comments

Comments

@literalpie
Copy link
Contributor

Describe the bug
When using Angular 13.1, the latest storybook, and no "storybook:build" builder, I get the following error:

Error: /{redacted}/sb-ng-performance/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

To Reproduce
Create a new project with Angular 13.1 and the latest storybook alpha (stable does not support ng 13.1). Make sure you don't have a "storybook:build" configuration in your angular.json file. Try building.
see this reproduction

System

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.21.0 - /usr/local/bin/node
    Yarn: 3.1.1 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.1
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-docs: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-essentials: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/addon-links: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/angular: 6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/builder-webpack5: ^6.5.0-alpha.4 => 6.5.0-alpha.4 
    @storybook/manager-webpack5: ^6.5.0-alpha.4 => 6.5.0-alpha.4 

Additional context

@flo-02-mu
Copy link

Changing the default includes in .storybook/tsconfig.json from:

"include": [
    "../src/**/*",
    "../projects/**/*"
  ],

to

"include": [
    "../stories/**/*",
    "../src/**/*",
    "../projects/**/*"
  ],

solved the above issue for me. Not sure though if this is only a workaround.

@literalpie
Copy link
Contributor Author

I should clarify that this isn't a problem in angular 13.0. So even if it expected that the stories need to be included, it may be an unintentional breaking change since this wasn't required in the past.
You can test this by downgrading all angular packages in my repro to 13.0.x.

@meriturva
Copy link

Simple step to reproduce with angular 13.1:

  • ng new projectName
  • npx sb@next init
  • npm run storybook

In my case change .storybook/tsconfig.json as described in #17039 (comment) doesn't solve the issue.

@literalpie
Copy link
Contributor Author

I think the best workaround is probably to add a storybook builder to angular.json

@artaommahe
Copy link

@literalpie any other solutions? we have storybooks for a group of libs, dunno how it will work in angular.json to add builder for such case

@danielbater
Copy link

I got this to "build" by removing .storybook/tsconfig.json updating tsconfig.app.json

"exclude": [],
"include": ["**/*"]

However, then I am faced with JIT issues such as Errors during JIT compilation of template for DummyComponent: Opening tag "dummy-component\n" not terminated. Which is not the case. Another is Uncaught (in promise) TypeError: n is not a function Which looks to caused by the Zeplin addon

Also I get this when downgrading to Angular 13.0.3. not just 13.1.x.

@literalpie
Copy link
Contributor Author

@artaommahe I think using a builder in the angular.json file should still work. You can see an example in a different branch of my reproduction project here. Notice that the storybook builder is not a part of any specific Angular project.

@danielbater I wouldn't recommend including all files using a wildcard like you did in the tsconfig. I think this will probably cause a lot of issues. Was your project working at a different point (for example, when you were on 12.x), or is this a new project? The issue you are seeing might be unrelated to mine.

@meriturva
Copy link

Thanks @literalpie , I have switched our project using builder on angular.json file but the watch feature and build during editing doesn't work anymore, have you tested on your side?

@danielbater
Copy link

@literalpie I agree including everything is not a good idea, but only way I could get this to work. Yes project works fine when using Angular 12. When remaining in Angular 13 and I go back to a normal setup which for me is no tsconfig in .storybook:

The error is the same as yours.

ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: filepath\filename.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

So I tried adding includes to my tsconfig.app.json to see if I can get it to build as I previously commented I did but only with a wildcard include eveything.

I added a fresh new tsconfig.json to .storybook folder. Somthing like this:

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": ["node"]
  },
  "include": ["../**/*.stories.ts"],
  "exclude": []
}

But then continue to get cannot find stories.

Error: filepath\filename.component.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 
'files' or 'include' property.

@danielbater
Copy link

I have just tried the above adding to angular.json build, this does build but also has JIT issues I see when adding wildcard to tsconfig.app.json

Errors during JIT compilation of template for DummyComponent: Opening tag "dummy-component\n" not terminated.

I have obviously checked this, and it's not an issue. Also the actual Angular app builds/runs fine no JIT issues, and I get lots of these for every single story/component.

and another JIT issue:

Uncaught (in promise) TypeError: n is not a function

The latter I think is linked to Zeplin addon

@nodro7
Copy link

nodro7 commented Dec 21, 2021

I'm getting the same JIT errors as @danielbater since the update to Angular 13.1 and Storybook 6.5.0-alpha.4 (also 6.4.9)

Errors during JIT compilation of template for [COMPONENT_NAME]: Opening tag "[OPENING_TAG]" not terminated.

This is happening for all 35 components in a library

There were no errors with Angular 12 & Storybook 6.3

It happens when building either with start-storybook or when using a builder in angular.json

@literalpie
Copy link
Contributor Author

It would be helpful if someone could link to a repo/branch that gets the JIT error, or instructions on how to change my repro to get the error.

@meriturva
Copy link

Thanks @literalpie ... just run:

  • ng new projectName
  • npx sb@next init
  • npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

@danielbater
Copy link

danielbater commented Dec 22, 2021

Thanks @literalpie ... just run:

  • ng new projectName
  • npx sb@next init
  • npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

@literalpie using @meriturva's steps you should see the error when running npm run storybook:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\projectName\src\stories\Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

If you update angular.json following here, and working through a few issues like staticDir and compodoc I end up with:

"storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "projectName:build",
      "port": 4400,
      "compodoc": false
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "browserTarget": "projectName:build"
    }
  }
}
...
"without-browser-target": {
      "root": "",
      "projectType": "library",
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        }
      }
    }

And run command ng run projectName:storybook, you should then have a build, but these steps do not produce any JIT errors in console. But do produce the lack of watch/rebuild as other's reported. But the components are not displayed how I would expect either:
image

Following on from this I wanted to create the simplist repo (here) with issue and seems once I added Angular Material is when it happened.

Errors during JIT compilation of template for DummyComponent: Opening tag "mat-slider" not terminated. ("export default "<p>dummy works!</p>\n<span>Material Slider</span>\n[ERROR ->]<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\"></mat-slider>\n";"): ng:///DummyComponent/template.html@0:67, Unexpected closing tag "mat-slider". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("works!</p>\n<span>Material Slider</span>\n<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\">[ERROR ->]</mat-slider>\n";"): ng:///DummyComponent/template.html@0:125
    at parseJitTemplate (compiler.mjs:20644)
    at CompilerFacadeImpl.compileComponent (compiler.mjs:20410)
    at Function.get (core.mjs:24221)
    at getComponentDef (core.mjs:1119)
    at verifyDeclarationsHaveDefinitions (core.mjs:23859)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23831)
    at core.mjs:23828
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23826)

Hope this helps.

I did have a few more examples in repo hoping to find a simplier way to demo the issue, but these only show the issue above where they do not look how I would expect.

@joewIST
Copy link

joewIST commented Dec 22, 2021

Thanks @literalpie ... just run:

  • ng new projectName
  • npx sb@next init
  • npm run storybook

secondly, watch files doesn't work anymore with angular.json as described: #17039 (comment)

@literalpie using @meriturva's steps you should see the error when running npm run storybook:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\projectName\src\stories\Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

If you update angular.json following here, and working through a few issues like staticDir and compodoc I end up with:

"storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "projectName:build",
      "port": 4400,
      "compodoc": false
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "browserTarget": "projectName:build"
    }
  }
}
...
"without-browser-target": {
      "root": "",
      "projectType": "library",
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "tsConfig": "src/tsconfig.app.json"
          }
        }
      }
    }

And run command ng run projectName:storybook, you should then have a build, but these steps do not produce any JIT errors in console. But do produce the lack of watch/rebuild as other's reported. But the components are not displayed how I would expect either: image

Following on from this I wanted to create the simplist repo (here) with issue and seems once I added Angular Material is when it happened.

Errors during JIT compilation of template for DummyComponent: Opening tag "mat-slider" not terminated. ("export default "<p>dummy works!</p>\n<span>Material Slider</span>\n[ERROR ->]<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\"></mat-slider>\n";"): ng:///DummyComponent/template.html@0:67, Unexpected closing tag "mat-slider". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("works!</p>\n<span>Material Slider</span>\n<mat-slider min=\"1\" max=\"100\" step=\"1\" value=\"50\">[ERROR ->]</mat-slider>\n";"): ng:///DummyComponent/template.html@0:125
    at parseJitTemplate (compiler.mjs:20644)
    at CompilerFacadeImpl.compileComponent (compiler.mjs:20410)
    at Function.get (core.mjs:24221)
    at getComponentDef (core.mjs:1119)
    at verifyDeclarationsHaveDefinitions (core.mjs:23859)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23831)
    at core.mjs:23828
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (core.mjs:23826)

Hope this helps.

I did have a few more examples in repo hoping to find a simplier way to demo the issue, but these only show the issue above where they do not look how I would expect.

I am having the same issue with missing styles. Has anyone found a workaround?

@markos-ag
Copy link

We actually have the same issue in our app and figured out that the problem comes from loading template files via templateUrl. If we have our template inline in the .ts file then storybook renders it properly but if we extract it to a different template (html) file and use it via templateUrl then rendering breaks with the JIT compilation error.

@nodro7
Copy link

nodro7 commented Dec 22, 2021

As @markos-ag points out, inlining the template solves the JIT error for me too.

@ankor-at-ccmath
Copy link

I think this needs to be solved. It's not a robust solution to inline all the templates. Good work on finding the issue though!

@danielbater
Copy link

I think this needs to be solved. It's not a robust solution to inline all the templates. Good work on finding the issue though!

Agree with @ankor-at-ccmath this needs a fix. I have updated my repo with a new branch containing with a new component WilmaComponent, this has inline template which does work.

@arufonsekun
Copy link

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:

image

then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.

I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

@danielbater
Copy link

danielbater commented Dec 23, 2021

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:

image

then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.

I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

I have not tested this but is interesting, should the .storybook/tsconfig.json not overwrite tsconfig.app.json? I myself would not want to start including my dev/test files in my app config though... will give it a test to see if it gets us up and running as a temporary measure.

@markos-ag
Copy link

I was facing the same issue here, and what I did was comment out this lines from tsconfig.app.json and add **/*.stories.* in my includes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "**/*.stories.*" // <- added
  ],
  // "exclude": [
  //   "**/*.stories.*"
  // ]
}

after that I get this error:
image
then I solved adding allowSyntheticDefaultImports: true to my angularCompilerOptions, after that npm run storybook worked pretty well.
I hope I can help someone with this solution, and please let me know if this solution is not the best 😊

I have not tested this but is interesting, should the .storybook/tsconfig.json not overwrite tsconfig.app.json? I myself would not want to start including my dev/test files in my app config though... will give it a test to see if it gets us up and running as a temporary measure.

it does not by default but you can add an extra entry for storybook in your angular.json that specifies the tsconfig file you want it to use as such :
image

I hope it helps!

@meriturva
Copy link

@danielbater Thanks for the repo: https://github.com/danielbater/storybook-a13-issue/tree/inline-template , i'm testing right now and I have found the same issue regarding also our project, what about the files watch feature? I mean, no recompile is run when file changes. is it the same on your side?

@shilman
Copy link
Member

shilman commented Jan 6, 2022

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.10 containing PR #17131 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Jan 6, 2022
@KirillMetrik
Copy link

@shilman is it possible to push this fix to 6.4? According to Storybook roadmap, 6.5 is expected only in March, such a long wait... I think everyone would appreciate if we could enjoy this fix without upgrading to unstable alpha version.

@shilman
Copy link
Member

shilman commented Jan 6, 2022

@KirillMetrik absolutely. If somebody can verify the fix with the alpha, I'll patch it back to the stable release

@iursevla
Copy link

iursevla commented Jan 6, 2022

@shilman I'll test it now.


Tested JIT error and live-reload and everything seems to work 👌

@rosostolato
Copy link

@shilman I have just updated to version 6.5.0-alpha.10 but I'm still getting "is missing from the TypeScript compilation" errors. I've already tried to clean node_modules folder and reinstall packages, but nothing changes.

@shilman
Copy link
Member

shilman commented Jan 6, 2022

@rosostolato do you have a reproduction or any information you can share to help narrow it down?

@rosostolato
Copy link

rosostolato commented Jan 6, 2022

@rosostolato do you have a reproduction or any information you can share to help narrow it down?

@shilman I'm trying to create a new repo to reproduce it. In the meatime, I can share the logs:

99% done plugins webpack-hot-middlewarewebpack built preview 34463d728a71ab4689d4 in 42641ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/Projects/apps/sabersimui/src/app/core/components/accordion/accordion.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/Projects/apps/sabersimui/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/Projects/apps/sabersimui/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/Projects/apps/sabersimui/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
...

storybook main.js:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    'storybook-dark-mode',
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-backgrounds',
    '@storybook/addon-storysource',
    {
      name: '@storybook/addon-essentials',
      options: {
        controls: false,
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
};

tsconfig.json:

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "node",
      "@types/resize-observer-browser"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../src/**/*.worker.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

I'm running on node v12.21.0 (npm v6.14.11)

@rosostolato
Copy link

rosostolato commented Jan 6, 2022

Simple step to reproduce with angular 13.1:

  • ng new projectName
  • npx sb@next init
  • npm run storybook

@shilman I reproduced it on a brand new project and I got the same error. Just need to run these steps above. Tested on node v12.21.0 (npm v6.14.11)... I'm updating the node version and will try again.


No luck. Here is the new app log running on node v17.3.0 (npm v8.3.0)

info @storybook/angular v6.5.0-alpha.10
info
info => Loading presets
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/home/rosostolato/testapp/.storybook/tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0.
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "testapp:build" for configuring Storybook
info => Using prebuilt manager
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
18% building 3/19 entries 1202/1264 dependencies 148/357 modules[BABEL] Note: The code generator has deoptimised the styling of /home/rosostolato/testapp/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
99% done plugins webpack-hot-middlewarewebpack built preview 57491abad7d79be2f9f8 in 19978ms
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Header.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /home/rosostolato/testapp/src/stories/Page.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/rosostolato/testapp/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/rosostolato/testapp/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/rosostolato/testapp/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

@shilman
Copy link
Member

shilman commented Jan 10, 2022

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.10 containing PR #17131 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

@flo-02-mu
Copy link

flo-02-mu commented Jan 10, 2022

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.10 containing PR #17131 that references this issue. Upgrade today to the @latest NPM tag to try it out!

It looks like only #17131 is included but #17032 is missing so that build step already fails. Would it be possible to release that fix in 6.4.x as well?

@artaommahe
Copy link

@shilman @ThibaudAV

  • just inited new angular app 13.1.2, storybook (6.4.12, via sb init). Got Error: /Users/drow/projects/tests/storybook-issues/src/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

  • tried 6.5.0-alpha.16, got Error: node_modules/@storybook/api/dist/ts3.9/lib/stories.d.ts:1:8 - error TS1259: Module '"/Users/drow/projects/tests/storybook-issues/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag.

  • added allowSyntheticDefaultImports to root tsconfig.json, worked fine.

  • renamed preview.js to preview.ts (like in our reall apps) - got Error: /Users/drow/projects/tests/storybook-issues/.storybook/preview.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

  • added ./*.ts to includes field of .storybook/tsconfig.json, got Error: .storybook/preview.ts:2:21 - error TS2732: Cannot find module '../documentation.json'. Consider using '--resolveJsonModule' to import module with '.json' extension..

  • added resolveJsonModule to root tsconfig.json, got Error: .storybook/preview.ts:3:17 - error TS2345: Argument of type '{ pipes: never[]; interfaces: { name: string; id: string; file: string; deprecated: boolean; deprecationMessage: string; type: string; sourceCode: string; properties: never[]; indexSignatures: never[]; methods: never[]; }[]; ... 9 more ...; coverage: { ...; }; }' is not assignable to parameter of type 'CompodocJson'.

  • mocked it with setCompodocJson(docJson as any);, worked fine

looks like too much broken stuff 😕

@gamov
Copy link

gamov commented Jan 19, 2022

I don't really understand why this issue is closed.. It is still broken for us on Angular 13.1 and storybook version 6.4.12.

@jasonhodges
Copy link

I can confirm there are some of these issues still happening.
Angular 13.1
Storybook 6.4.13

Reproduction Repo

  • run the storybook:ng script to utilize angular.json config
    • notice Errors during JIT compilation of template for AvatarListComponent: Opening tag "mat-list-item" not terminated when navigating to the Avatar List Default story.
    • notice Errors during JIT compilation of template for AvatarComponent: Opening tag "img" not terminated when navigating to the Avatar Default story.

Running the app via ng serve compiles and loads successfully.

@martijn19811
Copy link

Quick confirmation that these issues are still happening when using Angular 13.2.24 and Storybook 6.4.19. Both are the latest releases as of now. There's no storybook:build configuration present within angular.json. I was hoping this would be configured automatically, but alas,

@fasidOnGit
Copy link

try the following in .storybook/tsconfig.json. it helped me.

"include": ["../src/**/*.stories.ts"]

@martijn19811
Copy link

martijn19811 commented Mar 2, 2022

I did, but including the stories in the TSConfig caused other problems for me. At least, I assume they have to do with that step.

I'm currently implementing a lot of Angular custom form controls. The moment I change or touch an element in the preview iframe of Storybook, these errors keep popping up. So it's hard to see if the component actually works as intended.

image

@fasidOnGit
Copy link

fasidOnGit commented Mar 2, 2022

well, now that's out of the way. you can work on fixing this... did they work OK before?. it would be great if you could share your strories source code here

@martijn19811
Copy link

martijn19811 commented Mar 2, 2022

Thanks Fasid! But I'm not sure if including the /stories/ directory inside tsconfig.json is the solution. I think it'll only generate more unnecessary type errors. But I'm just guessing at this point :). Here's the code of one of my stories

import { moduleMetadata } from '@storybook/angular';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Meta, Story } from '@storybook/angular/types-6-0';
import { CheckboxComponent } from '../projects/<redacted>/src/lib/form-controls/components/checkbox/checkbox.component';

export default {
  title: 'Form Controls/Checkbox',
  component: CheckboxComponent,
  decorators: [
    moduleMetadata({
      declarations: [CheckboxComponent],
      imports: [CommonModule, ReactiveFormsModule],
    }),
  ],
} as Meta<CheckboxComponent>;

const FormControlTemplate: Story<CheckboxComponent> = (
  args: CheckboxComponent
) => {
  const formGroup = new FormGroup({
    isAPatient: new FormControl(true),
  });

  return {
    template: `
      <form [formGroup]="formGroup">
        <pp-checkbox [formControlName]="formControlName" [label]="label"></pp-checkbox>
      </form>
    `,
    props: {
      ...args,
      formGroup,
      formControlName: 'isAPatient',
    },
  };
};

export const Default = FormControlTemplate.bind({});
Default.args = {};

export const WithLabel = FormControlTemplate.bind({});
WithLabel.args = {
  label: 'Is a patient'
};

Oh and Im not sure if they ever worked before :). I got these errors right from the start.

@fasidOnGit
Copy link

I'm not sure if including the /stories/ directory inside tsconfig.json is the solution.

Not just tsconfig.json. I mean to .storybook/tsconfig.json. there is a seperate one for just storybook.,

@martijn19811
Copy link

I know :). And that's the one I included the directory in. Not the root tsconfig.

@fasidOnGit
Copy link

fasidOnGit commented Mar 2, 2022

here is my config. (i'm using Nx though).

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "apps/myapp/.storybook"
            },
            "projectBuildConfig": "myapp"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },
        "build-storybook": {
          "builder": "@nrwl/storybook:build",
          "options": {
            "uiFramework": "@storybook/angular",
            "outputPath": "target/storybook/myapp",
            "config": {
              "configFolder": "apps/myapp/.storybook"
            },
            "projectBuildConfig": "myapp",
            "stylePreprocessorOptions": {
              "includePaths": ["apps/myapp/src/app/styles", "libs/assets/src/lib"]
            }
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          },
          "outputs": ["{options.outputPath}"]
        },
// apps/myapp/.storybook/main.js
const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [...rootMain.stories, '../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...rootMain.addons],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

// apps/myapp/.storybook/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"],
  "include": ["../src/**/*.stories.ts", "../src/polyfills.ts"]
}

// apps/myapp/.storybook/preview.js
import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

storybook versions

"@angular/animations": "13.2.4",
"@angular/cdk": "13.2.4",
"@angular/common": "13.2.4",
"@angular/compiler": "13.2.4",
"@angular/core": "13.2.4",
"@angular/flex-layout": "13.0.0-beta.38",
"@angular/forms": "13.2.4",
"@angular/material": "13.2.4",

...
...
..




"@nrwl/storybook": "13.8.3",
"@nrwl/workspace": "13.8.3",
"@storybook/addon-actions": "^6.5.0-alpha.42",
"@storybook/addon-essentials": "^6.5.0-alpha.42",
"@storybook/addon-knobs": "^6.4.0-next.0",
"@storybook/addon-links": "^6.5.0-alpha.42",
"@storybook/addon-notes": "^6.0.0-alpha.6",
"@storybook/addons": "^6.5.0-alpha.42",
"@storybook/angular": "^6.5.0-alpha.42",
"@storybook/builder-webpack5": "^6.5.0-alpha.42",
"@storybook/manager-webpack5": "^6.5.0-alpha.42",

@martijn19811
Copy link

Thanks! This is the contents of my angular.json. Please note that all my errors are Reactive Forms related though. But perhaps something can be improved here?

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "medicom": {
      "projectType": "library",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "changeDetection": "OnPush"
        }
      },
      "root": "projects/<lib>",
      "sourceRoot": "projects/<lib>/src",
      "prefix": "pp",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/<lib>/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/<lib>/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/<lib>/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "projects/<lib>/tsconfig.spec.json"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "projects/<lib>/**/*.ts",
              "projects/<lib>/**/*.html"
            ]
          }
        },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "<lib>:build",
            "port": 6006
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "<lib>:build",
            "quiet": true
          }
        }
      }
    },
    "storybook": {
      "projectType": "application",
      "root": ".storybook",
      "sourceRoot": ".storybook",
      "prefix": "",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/storybook",
            "tsConfig": ".storybook/tsconfig.json",
            "assets": [],
            "styles": ["node_modules/bootstrap/scss/bootstrap.scss"],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "<lib>",
  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }
}

@fasidOnGit
Copy link

fasidOnGit commented Mar 2, 2022

do a version bump of storybook-related packages to 6.5.0-alpha.42 and then try again. with my configuration in mind

@martijn19811
Copy link

Thanks. I'd need more info on the rest of your angular.json file though. And how much it differs from mine.

@martijn19811
Copy link

Also, I think my problem has more to do with the way including the Reactive Forms module causes more type errors in the Storybook preview iframe. I'm not sure how to tackle that.

@martijn19811
Copy link

@fasidOnGit Hi Fasid, thanks for thinking along! I found the cause and it is.. quite random. Please check this comment: #14627 (comment) .

Turns out the spread operator used to insert the agrs was the cause of all the issues. I had to rewrite code like this:

    props: {
      **colors: args.colors,**
      formGroup,
      formControlName: 'isAPatient',
    },

It is a very random solution and I'm quite surprised the spread operator can't be used this way.

@oskrabella
Copy link

Re: JIT compilation errors -- it appears as though new lines within a template tag are causing the template to be parsed incorrectly by the Angular compiler. When the file template is compiled into the metadata for the Component, it is escaping the newlines, for example:

The parser then interprets the tag as <my-component\n\t instead of stripping the whitespace which leads to the "Opening tag not terminated" JIT error.

Since this is only happening for Storybook (dev and production builds compile and execute just fine), I'm leaning toward something in the Storybook setup may not be configured properly. That said, I'm also not sure if this is a problem that Angular parser itself should handle.

@nzacca
Hello, I've been facing this exact issue for several days now with none of my stories rendering as a result of the compiler escaping new lines.

None of the solutions in this thread have worked for me. Is there any package update or solution available to resolve this?

Here are my package.json and storybook/main.js for reference:

package.json-
{
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "npm run ci-build && build-storybook -o ./app-engine/dist",
"build-stencil": "lerna run ci-build --scope @wm-wd-ui/web-components",
"ng": "ng",
"lerna": "lerna",
"build": "lerna run build",
"test": "lerna run test",
"lint": "lerna run lint",
"clean": "lerna clean --yes && lerna exec rm -- -rf dist",
"ci-install-root": "npm ci --ignore-scripts && lerna exec npm ci -- --ignore-scripts",
"ci-setup": "lerna bootstrap --ignore-scripts",
"ci-build": "lerna run ci-build --concurrency 1",
"ci-test": "lerna run ci-test --concurrency 1",
"ci-lint": "lerna run ci-lint",
"ci-delta-build": "lerna run ci-build --since origin/master",
"ci-delta-test": "lerna run ci-test --since origin/master --concurrency 1",
"ci-delta-lint": "lerna run ci-lint --since origin/master"
},
"private": true,
"dependencies": {
"@ag-grid-community/core": "^23.2.1",
"@angular/animations": "12.2.17",
"@angular/cdk": "^12.2.13",
"@angular/common": "12.2.17",
"@angular/compiler": "12.2.17",
"@angular/core": "12.2.17",
"@angular/forms": "12.2.17",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "12.2.17",
"@angular/platform-browser-dynamic": "12.2.17",
"@angular/router": "12.2.17",
"@storybook/builder-webpack5": "^6.2.0-beta.7",
"@storybook/preset-html-webpack": "^7.0.0-alpha.0",
"rxjs": "~6.5.5",
"sass": "^1.54.4",
"style-loader": "^3.2.1",
"tslib": "^2.0.0",
"zone.js": "~0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.18",
"@angular/cli": "12.2.18",
"@angular/compiler-cli": "12.2.17",
"@angular/language-service": "12.2.17",
"@commitlint/cli": "^11.0.0",
"@storybook/addon-actions": "~6.4.22",
"@storybook/addon-backgrounds": "~6.4.22",
"@storybook/addon-controls": "~6.4.22",
"@storybook/addon-docs": "~6.4.22",
"@storybook/addon-links": "~6.4.22",
"@storybook/addon-notes": "~5.3.21",
"@storybook/addon-viewport": "~6.4.22",
"@storybook/angular": "6.4.22",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/preset-scss": "~1.0.3",
"@storybook/theming": "^6.1.21",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@wm-cdk/tslint-rules": "^2.0.1",
"@wm-wd-cdk/ci-scripts": "^1.3.5",
"@wm-wd-cdk/commit-cli": "^1.0.5",
"@wm/cz-git-commit-tool": "^2.0.2",
"codelyzer": "^6.0.0",
"commitizen": "^4.2.3",
"css-loader": "^5.2.0",
"husky": "^5.2.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lerna": "^4.0.0",
"ng-packagr": "^12.2.7",
"sass-loader": "^11.0.1",
"stylelint": "^13.12.0",
"stylelint-config-sass-guidelines": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.19.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "4.2.4",
"webpack": "^5.75.0"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"config": {
"commitizen": {
"path": "@wm/cz-git-commit-tool"
}
},
"resolutions": {
"@storybook/angular/webpack": "^5"
}
}

Main.js
module.exports = {
framework: '@storybook/angular',
core: {
builder: 'webpack5'
},
stories: [
'../sandboxes/storybook/src/app/docs/intro.stories.mdx',
'../sandboxes/storybook/src/app/docs//*.stories.@(mdx)',
'../sandboxes/storybook/src/app/cdk/
/.stories.@(mdx)',
'../sandboxes/storybook/**/
.stories.@(mdx)',
'../sandboxes/storybook/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-backgrounds',
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-viewport',
'@storybook/preset-scss',
'@storybook/preset-html-webpack'
],
staticDirs: ['./public']
};

Any help would be appreciated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests