No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.



Webpack


Certain Webpack configuration settings are required for correct functionality of some components and features.


These can be easily added to .storybook/main.mjs with the named export webpackFinal:


// .storybook/main.mjs
import webpackFinal from "@idesigncode/storybook-tools/webpackFinal.cjs";

export default {
  webpackFinal,
  // ...main.mjs configuration
};


Using webpackFinal with custom configuration settings
You can alternatively use the imported webpackFinal async function with your own custom configuration settings:
// .storybook/main.mjs
import webpackFinal from "@idesigncode/storybook-tools/webpackFinal.cjs";

export default {
  webpackFinal: async (config) => {
    const updatedConfig = await webpackFinal(config);
    // ...Apply your custom configuration settings here to `updatedConfig`
    return updatedConfig;
  },
  // ...main.mjs configuration
};


The imported webpackFinal async function will set the following configuration:


// @idesigncode/storybook-tools/webpackFinal.cjs
const webpackFinal = async (config) => {
  // Enable 'raw imports' for all files
  config.module.rules.map((rule) => {
    if (!rule.type || rule.type !== "asset/source") {
      rule.resourceQuery = { not: [/raw/] };
    }
    return rule;
  });

  return config;
};

module.exports = webpackFinal;


Raw Imports


Once Webpack is configured, you can import the raw source code of any file with the ?raw import suffix (a.k.a. "Webpack resource query"):


// Component.stories.mjs
import ComponentExampleRaw from "./Component.example.mjs?raw";




See also:


    

  • PropsTable - a component to automatically document static & "live-updating" props details.
    • 

  • Source - a component to display a block of source code.
    •