whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 44 forks source link

Cannot find module './dist/preset.cjs' #118

Closed rlebascle closed 6 months ago

rlebascle commented 7 months ago

Hello

It look like the "preset.js" file in the bundle is pointing to "./dist/preset.cjs" that doesn't exist.

module.exports = require("./dist/preset.cjs");

Giving me the following error :

WARN Failed to load preset: {"name":"/xxx/node_modules/@whitespace/storybook-addon-html/preset.js"} on level 2 Error: Cannot find module './dist/preset.cjs' Require stack: /xxx/node_modules/@whitespace/storybook-addon-html/preset.js

jeanfredrik commented 7 months ago

This addon doesn't have a preset anymore. What is your config?

rlebascle commented 7 months ago

Hello,

Thanks for answering so quickly. A bit more details: I am using Storybook 8.0.5 in a monorepo one package is using @storybook/html and @storybook/html-vite.

Here is my full config:

import { join, dirname } from "path";
import { mergeConfig } from "vite";
import postcssPresetEnv from "postcss-preset-env";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

/** @type { import('@storybook/html-vite').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@whitespace/storybook-addon-html"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/html-vite"),
    options: {},
  },
  async viteFinal(config, options) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      // Add dependencies to pre-optimization
      css: {
        postcss: {
          plugins: [
            postcssPresetEnv({
              features: {
                "custom-media-queries": true,
                "logical-properties-and-values": false,
              },
            }),
          ],
        },
      },
    });
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["../public"],
};
export default config;
rlebascle commented 7 months ago

I did a very quick and dirty try and removed the preset.js file from my node_modules and its works.

rlebascle commented 7 months ago

This addon doesn't have a preset anymore. What is your config?

The preset.js seem to be still in the repo.

https://github.com/whitespace-se/storybook-addon-html/blob/main/preset.js

jeanfredrik commented 6 months ago

The file has been removed now in v6.0.5

rlebascle commented 6 months ago

Thanks a lot !