Field 'browser' doesn't contain a valid alias configuration for storybook in react

Question

The project is nextjs. align written in jsconfig.json file and it is working when i run the project. the problam is when i run yarn storybook

.storybook/main.js file

module.exports = {
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: {
      name: "webpack5",
      options: {
        fsCache: true,
      },
    },
  },
  stories: ["../src/**/*.stories.@(js|mdx)"],
};

Answer 1

I use a module resolver, like the following line of code, to fix the problem.

webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@hooks": path.resolve(__dirname, "../src/hooks"),
      .
      .
      .
   }   
}