Storybook: "export 'ThemePalette' was not found in '@angular/material'

[HansCronau]

I would like Storybook to include components that use Angular Material. For a reason I have yet to discover, Storybook throws the following warnings:

"export 'ProgressSpinnerMode' was not found in '@angular/material'

and

"export 'ThemePalette' was not found in '@angular/material'

I have rebuilt the project from scratch and upgraded Angular and Storybook to the newest possible versions. (Note that due to a bug it's currently not possible for me to use higher than Angular 8.2.x.) The components are rendering both in the project and in Storybook, but the warnings remain.
I would expect Storybook to work without warnings out of the box, since it should mirror my project's settings.

I'm now using

• Angular CLI 8.2.0
• Angular Material 8.1.2
• Storybook 5.2.3

Since only Storybook throws the warnings and even in Storybook the components do render I'm not sure how to approach this warning from here.
Could it be Typescript types? Compiler versions? Differing Webpack configs? Am I missing something obvious?

[kroeder]

Can you share some details about your setup and how to reproduce this?

Kind of like this and then use a material component in e.g. app.component?

npx @angular/cli new test-app
ng add @angular/material
npx @storybook/cli init

Storybook currently tries to use the configuration of your default project but it's also possible to add a Storybook project in your angular.json with all the resources storybook would need in case you have a mono-repo with multiple apps

[HansCronau]

Hi. Sorry I can't get back on this right now. I'll close the ticket since you seem to have too little to go by.

[lundmikkel]

This is a problem with Storybook's webpack trying to find TypeScript interfaces after compile time; it simply isn't going to work.

The solution is to add a custom webpack.config.js in your .storybook folder:

// webpack.config.js
const IgnoreNotFoundExportPlugin = require("./ignore-not-found-export.plugin.js");

module.exports = async ({ config, mode }) => {
  config.plugins.push(
    new IgnoreNotFoundExportPlugin(["ThemePalette", "OtherInterfacesToIgnore"]);
  }

  return config;
};

Furthermore, you need to add the script ignore-not-found-export.plugin.js:

// ignore-not-found-export.plugin.js
const ModuleDependencyWarning = require("webpack/lib/ModuleDependencyWarning");

// ↓ Based on https://github.com/sindresorhus/escape-string-regexp
const escapeStringForRegExp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");

module.exports = class IgnoreNotFoundExportPlugin {
  constructor(exportsToIgnore) {
    this.exportsToIgnore = exportsToIgnore || [];
  }

  getMessageRegExp() {
    if (this.exportsToIgnore.length) {
      const exportsPattern = `(${this.exportsToIgnore.map(escapeStringForRegExp).join("|")})`;
      return new RegExp(`export '${exportsPattern}'( \\(reexported as '.*'\\))? was not found in`);
    }
    else {
      return /export '.*'( \(reexported as '.*'\))? was not found in/;
    }
  }

  apply(compiler) {
    const messageRegExp = this.getMessageRegExp();

    const afterCompile = (compilation) => {
      const stats = compilation.getStats();
      stats.compilation.warnings = stats.compilation.warnings.filter((warn) =>
        !(warn instanceof ModuleDependencyWarning) || !messageRegExp.test(warn.message)
      );
    };

    if (compiler.hooks) {
      compiler.hooks.afterCompile.tap("IgnoreNotFoundExportPlugin", afterCompile);
    }
    else {
      console.warn("Webpack compiler-hooks not supported!");
    }
  }
};

You can simply add to the array to filter out other warnings you might have. Hope this helps you.

[HansCronau]

@shilman Thanks for taking the time to respond to this issue.