Image experimental layout="raw" support

Describe the bug

I’m using the experimental “raw” layout but with storybook I get the following error:

The “raw” layout is currently experimental and may be subject to breaking changes. To use layout=“raw”, include experimental: { images: { layoutRaw: true } } in your next.config.js file.

I do have allowed this experimental feature in next.config.js, and also configured storybook main.js to use the next.config.js file (“nextConfigPath”). However it doesn’t seem to work.

Are experimental features not supported, or is there anything I could do to make this work?

Your minimal, reproducible example

not yet…

Steps to reproduce

Create a storybook with an Image component with props layout="raw".

Expected behavior

If the experimental images: { layoutRaw: true, } is available in next.config.js, the Image component should load.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

Ubuntu 20.04 (WSL2) Next.js 12.1.4 Storybook 6.4.19 storybook-addon-next 1.6.2

storybook-addon-next version

1.6.2

Additional context

No response

[RyanClementsHax]

After looking into this further, I have a working solution on the image-config branch.

The problem I’m working through now is how I’m going to deal with how the addon already unoptimizes images (that was the poor man’s way of getting next/image working in storybook). Injecting image config seems to be a more robust and “correct” way of dealing with images.

It seems to me like I should remove the automatic unoptimization and publish this as v2.

I’ll have to do more research into this, but because of these new findings, this is actually intended behavior so I’ll remove the bug label.

[supposedlysam-bb]

(FYI) I tried the latest 12.1.5 Next.js and the workaround I linked above does not work anymore.

FWIF, I was able to get the workaround working with 12.1.5.

I first needed to use the npx sb@next upgrade --prerelease command to upgrade my Storybook from webpack 4 to webpack 5. Then I was able to add the following to my .storybook.main.js file

const path = require("path");
const webpack = require("webpack");

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    // Mocking out next/config until the storybook addon next fixes a bug to pull in image loaders
    // Source: https://stackoverflow.com/questions/64622746/how-to-mock-next-js-image-component-in-storybook
    // Related issues:
    //   - https://github.com/RyanClementsHax/storybook-addon-next/issues/67
    //   - https://github.com/RyanClementsHax/storybook-addon-next/issues/70

    const nextConfigPath = path.resolve(__dirname, "../next.config.js");
    const nextConfig = require(nextConfigPath);

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env.__NEXT_IMAGE_OPTS": JSON.stringify({
          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
          domains: [],
          ...nextConfig.images,
        }),
      })
    ); // Return the altered config

    return config;
  },
  core: {
    builder: "webpack5", // This gets added when running sb@next upgrade
  },
};

We already had the correct code in the preview.js like they describe in the link so I didn’t need to update that.