Next.js: next/Image component not working inside Storybook

[weyert]

Bug report

If you want to use a storybook to assist in the development of components and one of the components happens to use the new Image-component than storybook will return an error.

Describe the bug

A runtime error is thrown when trying to navigate to a story of a component using Next's Image-component:

>

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone https://github.com/weyert/next10-storybook
2. Run npm run storybook
3. Notice that the WidgetCard story isn't loading due to errors

Expected behavior

I would expect to be able to use the Image-component without the error being shown:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `WidgetCard `.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `WidgetCard`.
    at createFiberFromTypeAndProps (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:111604:21)
    at createFiberFromElement (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:111632:15)
    at createChild (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:99997:28)
    at reconcileChildrenArray (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:100270:25)
    at reconcileChildFibers (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:100676:14)
    at reconcileChildren (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:103541:28)
    at updateHostComponent (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:104183:3)
    at beginWork (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:105631:14)
    at HTMLUnknownElement.callCallback (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:90496:14)
    at Object.invokeGuardedCallbackDev (http://192.168.1.98:6006/vendors~main.5a8c431dbe2b51c237cc.bundle.js:90545:16)

If I remove the Image-component the story loads without errors.

I have made a repo which reproduces the problem of storybook not working as expected I am not getting the exactly same error as above but it behaves similarly by not showing the WidgetCard story at all

Screenshots

N/A

System information

• OS: macOS
• Browser (if applies) chrome
• Version of Next.js: 10.0.0
• Version of Node.js: 14.8..0

Additional context

I am using the following storybook main.js file:

const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  stories: ['../**/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-viewport', '@storybook/addon-knobs'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Ensure the `paths`-defined in tsconfig.json are correctly resolved by webpack
    config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ]

    // Return the altered config
    return config
  },
}

[styfle]

This looks like a duplicate of #18393

[weyert]

Hmm, duplicate indeed, but what is suggested there seems to be to use a next plugin which Vercel says shouldn't be used:

This package is still very experimental and should not be used at this point

[aippili-asp]

Is there any solution for this one?