Cannot use React Hooks in my stories after adding storybook-addon-next-router

danielmarcano commented 2 years ago

Hello there!

I've been having issues with my Storybook stories that use React hooks ever since I added storybook-addon-next-router to the project.

This is the issue: it's thrown with any React hook, including useState.

This is my .storybook/main.js file (which is the file where the issue is originating from):

const svgLoader = require('../scripts/webpack/svgLoader.js');

function overrideDefaultSvgLoaderBehaviour(config) {
  const fileLoaderRule = config.module.rules.find(
    (rule) => rule.test && rule.test.test('.svg'),
  );

  fileLoaderRule.exclude = /\.svg$/;
}

module.exports = {
  stories: ['../src/**/stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-react-i18next',
    'storybook-addon-designs',
    'storybook-addon-next-router', // If I remove this line, my story works perfectly
  ],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'next-i18next': 'react-i18next',
    };

    overrideDefaultSvgLoaderBehaviour(config);

    svgLoader(config);

    return config;
  },
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

This is my .storybook/preview.js file:

import { addDecorator } from '@storybook/react';
import { RouterContext } from 'next/dist/shared/lib/router-context';
import { ThemeProvider } from 'styled-components';

import i18n from './i18next.js';

import GlobalStyle from '$/styles/global';
import appThemes from '$/styles/themes';
import '$/styles/font.css';
import './styles.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  i18n,
  locale: 'en-US',
  locales: {
    'en-US': { title: 'English', left: '🇺🇸' },
    'es-MX': { title: 'Español', left: '🇲🇽' },
  },
  nextRouter: {
    Provider: RouterContext.Provider,
  },
};

const Wrapper = ({ children }) => (
  <ThemeProvider theme={appThemes.light}>
    <GlobalStyle />
    {children}
  </ThemeProvider>
);

addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>);

This is my package.json:

{
  "name": "tipz-web",
  "version": "0.1.0",
  "private": true,
  "author": "z1digitalstudio <hola@z1.digital>",
  "license": "unlicensed",
  "engines": {
    "node": ">=14.17 <=16.x",
    "yarn": ">=3.1.1"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings=0 --fix",
    "lint:fix": "yarn lint --fix",
    "lint:css": "stylelint './src/**/styles.{ts,tsx}'",
    "install-git-hooks": "./scripts/git-hooks/install.sh",
    "postinstall": "yarn install-git-hooks",
    "storybook": "start-storybook -p 6006",
    "build:storybook": "build-storybook",
    "plop": "plop --plopfile scripts/plop/plopfile.js",
    "tsc": "tsc --noEmit",
    "build-storybook": "build-storybook"
  },
  "resolutions": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "dependencies": {
    "$": "link:./src",
    "@hookform/resolvers": "2.8.8",
    "@stylelint/postcss-css-in-js": "^0.38.0",
    "i18next": "^21.8.4",
    "i18next-browser-languagedetector": "^6.1.4",
    "inflection": "^1.13.2",
    "inquirer-directory": "^2.2.0",
    "next": "12.1.6",
    "next-i18next": "^11.0.0",
    "plop": "^3.1.0",
    "postcss": "^8.4.14",
    "postcss-scss": "^4.0.4",
    "postcss-syntax": "^0.36.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-hook-form": "^7.31.2",
    "react-i18next": "^11.16.9",
    "styled-components": "^5.3.5",
    "styled-normalize": "^8.0.7",
    "stylelint": "^14.8.4",
    "stylelint-a11y": "^1.2.3",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended": "^7.0.0",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-order": "^5.0.0",
    "stylelint-use-logical": "^1.1.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.5",
    "@storybook/addon-docs": "^6.5.5",
    "@storybook/addon-essentials": "^6.5.5",
    "@storybook/addon-interactions": "^6.5.5",
    "@storybook/addon-links": "^6.5.5",
    "@storybook/builder-webpack5": "^6.5.5",
    "@storybook/manager-webpack5": "^6.5.5",
    "@storybook/react": "^6.5.5",
    "@storybook/testing-library": "^0.0.11",
    "@svgr/webpack": "5.5.0",
    "@types/babel__core": "^7",
    "@types/inflection": "^1",
    "@types/node": "17.0.35",
    "@types/prettier": "^2",
    "@types/react": "^18.0.9",
    "@types/react-dom": "18.0.4",
    "@types/sharp": "^0.30.2",
    "@types/styled-components": "^5",
    "@types/yup": "^0.29.14",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "@z1digitalstudio/eslint-config-imports": "^1.0.0",
    "babel-loader": "^8.2.5",
    "babel-plugin-styled-components": "^2.0.7",
    "eslint": "^8.16.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "12.1.6",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "eslint-plugin-storybook": "^0.5.12",
    "lint-staged": "^12.4.1",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.8.4",
    "prettier": "^2.6.2",
    "responsive-loader": "^2.3.0",
    "sharp": "^0.30.5",
    "storybook-addon-designs": "^6.2.1",
    "storybook-addon-next-router": "^4.0.0",
    "storybook-react-i18next": "^1.0.20",
    "typescript": "^4.6.4"
  },
  "packageManager": "yarn@3.1.1"
}

Do you know if this error comes from something that I'm not configuring the right way?

eoinpayne commented 2 years ago

I have pretty much the same setup, though a slightly different error, my router won't mock and remains null.

lifeiscontent commented 2 years ago

@danielmarcano @eoinpayne I'd be willing to be that one of these addons is using the wrong hooks.

    'storybook-react-i18next',
    'storybook-addon-designs',

if you can create an example app of this issue, I can help debug if I have some free time later but it works fine in literally all of the projects I use it in.

if you want to see a working example, please look at this project: https://github.com/lifeiscontent/realworld

lifeiscontent / storybook-addon-next-router

Cannot use React Hooks in my stories after adding storybook-addon-next-router #60