Error: Cannot find module 'eslint-config-react-app' when running yarn docz dev

[molebox]

Bug Report

Error: Cannot find module 'eslint-config-react-app' when running yarn docz dev

Expected behavior
It should load and work

Environment

• docz version: 2.0.0-rc.52
• OS: Windows 10
• Node: 10.16.3

Additional context/Screenshots

doczrc.js

export default {
  typescript: true,
  title: 'Docz Typescript',
  menu: ['Getting Started', 'Components'],
  filterComponents: (files) => files.filter((filepath) => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)),
};

package.json

{
  "name": "incenter-webui",
  "version": "0.1.0",
  "description": "InCenter Web User Interface",
  "main": "none",
  "private": true,
  "scripts": {
    "test": "yarn run license-check && yarn typecheck && cross-env CONFIG_ENV=test jest --coverage && yarn line-coverage",
    "update-snapshot": "cross-env CONFIG_ENV=test jest -u",
    "lint": "./node_modules/.bin/eslint \"src/**/*.less.d.ts\" \"src/**/*.{ts,tsx,js}\" \"__tests__/**/*.{ts,tsx,js}\" && stylelint \"src/**/*.{less,css}\" \"assets/**/*.{less,css,config,variables,overrides}\" --syntax=less",
    "fix-src": "./node_modules/.bin/eslint \"src/**/*.{ts,tsx,js}\" --fix",
    "fix-less": "./node_modules/.bin/eslint \"src/**/*.less.d.ts\" --fix",
    "fix-tests": "./node_modules/.bin/eslint \"__tests__/**/*.{ts,tsx,js}\" --fix",
    "line-coverage": "node ./node_modules/check-line-coverage \"coverage/clover.xml\" \"80\"",
    "bamboo-lint": "./node_modules/.bin/eslint \"src/**/*.less.d.ts\" \"src/**/*.{ts,tsx,js}\" \"__tests__/**/*.{ts,tsx,js}\" -f node_modules/eslint-bamboo-formatter/reporter.js && stylelint \"src/**/*.{less,css}\" \"assets/**/*.{less,css,config,variables,overrides}\" --syntax=less --custom-formatter node_modules/stylelint-mocha-formatter/index.js > stylelint.json || true",
    "dev": "cross-env OEM=incenter webpack-dev-server --inline -d",
    "dev-production": "cross-env NODE_ENV=production webpack-dev-server --inline --mode=production --devtool 'source-map' --progress",
    "build": "cross-env NODE_ENV=production webpack -p",
    "build-dev": "cross-env NODE_ENV=development webpack --mode=production --devtool 'source-map' --progress",
    "build-watch": "webpack --watch --devtool 'source-map' --mode=production --progress",
    "test:watch": "jest --watchAll",
    "typecheck": "tsc --noEmit -p .",
    "license-check": "node ./node_modules/@clavister/license-check/licenseCheck.js --verify --paths=. -o=missingLicenses.json",
    "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack -p",
    "eslint-check-rules": "./node_modules/.bin/eslint --print-config . | eslint-config-prettier-check",
    "pretty-check": "prettier --check \"src/**/*.less.d.ts\" \"src/**/*.{ts,tsx,js}\" \"__tests__/**/*.{ts,tsx,js}\"",
    "pretty": "prettier --write \"src/**/*.less.d.ts\" \"src/**/*.{ts,tsx,js}\" \"__tests__/**/*.{ts,tsx,js}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": [
      "yarn pretty",
      "git add"
    ],
    "src/**/*.{less,css}": [
      "stylelint --fix",
      "git add"
    ]
  },
  "repository": {
    "type": "git",
    "url": "ssh://git@bitbucket.clavister.com:7999/ems/webui.git"
  },
  "keywords": [
    "incenter",
    "webui"
  ],
  "author": "Clavister",
  "license": "CLAVISTER",
  "dependencies": {
    "@clavister/configuration-categories": "^1.0.0",
    "@clavister/globalObjectsWhitelist": "^1.0.2",
    "@clavister/socketEvent": "^2.0.4",
    "@types/enzyme": "^3.1.6",
    "@types/file-saver": "^1.3.0",
    "@types/jest": "^21.1.3",
    "@types/jsonwebtoken": "^8.3.0",
    "@types/memoize-one": "^4.1.0",
    "@types/mousetrap": "^1.5.34",
    "@types/node": "^11.10.4",
    "@types/query-string": "^6.1.0",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-grid-layout": "^0.14.3",
    "@types/react-redux": "^6.0.6",
    "@types/react-router-dom": "^4.0.7",
    "@types/react-virtualized": "^9.7.4",
    "@types/redux-mock-store": "^1.0.0",
    "@types/rison": "^0.0.6",
    "@types/shallowequal": "^1.1.1",
    "@types/webpack-env": "^1.13.7",
    "fast-deep-equal": "^2.0.1",
    "file-saver": "^1.3.8",
    "focus-trap-react": "^3.1.2",
    "js-logger": "^1.4.1",
    "jsonwebtoken": "^8.0.1",
    "memoize-one": "^5.0.0",
    "mousetrap": "^1.6.1",
    "prop-types": "^15.6.2",
    "query-string": "^6.1.0",
    "react": "~16.9.0 ",
    "react-cookie": "2.2.0",
    "react-dom": "~16.9.0",
    "react-grid-layout": "^0.15.3",
    "react-markdown": "^4.0.6",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-sizeme": "^2.5.2",
    "react-virtualized": "^9.10.1",
    "redux": "^4.0.0",
    "redux-store-observer": "^1.0.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1",
    "rison": "^0.1.1",
    "semantic-ui-less": "^2.3.3",
    "semantic-ui-react": "^0.83.0",
    "shallowequal": "^1.1.0",
    "toml": "^3.0.0",
    "tslib": "^1.9.3",
    "typeface-open-sans": "^0.0.54"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@clavister/license-check": "^1.0.0",
    "@svgr/webpack": "^4.1.0",
    "@typescript-eslint/eslint-plugin": "^1.7.0",
    "@typescript-eslint/parser": "^1.7.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.0",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-js-logger": "^1.0.16",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "check-line-coverage": "file:tools/check-line-coverage",
    "cross-env": "^3.2.4",
    "css-loader": "^1.0.0",
    "docz": "^2.0.0-rc.52",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.0",
    "eslint": "^5.16.0",
    "eslint-bamboo-formatter": "^0.1.0",
    "eslint-config-prettier": "^4.2.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsdoc": "^4.8.3",
    "eslint-plugin-no-null": "^1.0.2",
    "eslint-plugin-prefer-arrow": "^1.1.5",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.0.1",
    "file-loader": "^2.0.0",
    "fork-ts-checker-webpack-plugin": "^0.5.2",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.1.0",
    "jest-bamboo-formatter": "^1.0.1",
    "jest-enzyme": "^7.0.1",
    "jest-fetch-mock": "^1.6.6",
    "jest-localstorage-mock": "^2.2.0",
    "json-loader": "^0.5.4",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lint-staged": "^8.1.5",
    "mini-css-extract-plugin": "^0.5.0",
    "mock-socket": "^8.0.4",
    "nock": "^9.0.14",
    "prettier": "^1.17.0",
    "redux-mock-store": "^1.5.3",
    "style-loader": "^0.23.0",
    "stylelint": "^9.10.1",
    "stylelint-mocha-formatter": "file:tools/stylelint-mocha-formatter",
    "svgo": "^1.2.0",
    "svgo-loader": "^2.2.0",
    "ts-jest": "^24.0.0",
    "ts-loader": "^5.3.3",
    "typescript": "~3.4.3",
    "typings-for-css-modules-loader": "^1.5.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.20.2",
    "webpack-bundle-analyzer": "^3.0.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.11",
    "yml-loader": "^2.1.0"
  },
  "jest": {
    "moduleNameMapper": {
      "app.yml": "<rootDir>/__mocks__/appConfigMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "^.+[\\\\|\\/]assets[\\\\|\\/]icons[\\\\|\\/].+\\.svg$": "<rootDir>/__transforms__/iconFileTransform.js",
      "^.+\\.(svg|jpg|jpeg|png)$": "<rootDir>/__transforms__/filePathTransform.js"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules"
    ],
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>"
    ],
    "testMatch": [
      "**/__tests__/**/*.(spec|test).(js|jsx|ts|tsx)"
    ],
    "collectCoverageFrom": [
      "**/src/**/*.{js,jsx,ts,tsx}",
      "!**/src/**/*.d.ts",
      "!**/node_modules/**",
      "!**/src/domain/gateway/mockGateways.ts"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx",
      "ts",
      "tsx"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jestSetup.js"
    ],
    "collectCoverage": false,
    "testResultsProcessor": "<rootDir>/node_modules/jest-bamboo-formatter",
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "jest-localstorage-mock",
      "raf/polyfill"
    ],
    "preset": "ts-jest/presets/js-with-ts"
  }
}

Button.tsx Component

import * as React from 'react';
import {IconName, Icon} from './Icon';
import {Loader} from './Loader';

import styles from './Button.less';
import {Link, LinkProps as LinkElementProps} from 'react-router-dom';

/**
 * Roles that needs the aria-checked to be set.
 */
const CHECKBOX_LIKE_ROLES = ['checkbox', 'option', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio', 'treeitem'];

interface AdditionalProp {
  /**
   * An icon the should be shown in the button.
   */
  icon?: IconName;

  /**
   * Positions the icon, spinner or other label in the button.
   */
  labelPosition?: 'left' | 'right';

  /**
   * Sets the button to be a primary button.
   */
  primary?: boolean;

  /**
   * Indicate that a related process is loading.
   */
  loading?: boolean;

  /**
   * Display the button as selected, as if it is a radio button.
   */
  selected?: boolean;

  /**
   * Sets the size of the button.
   */
  size?: ButtonSize;

  /**
   * Makes the button fill the horizontal space of its container.
   */
  fluid?: boolean;

  outline?: boolean;

  /**
   * Use `children` instead.
   */
  content?: never;
}

export interface DefaultProps extends AdditionalProp, React.ButtonHTMLAttributes<HTMLButtonElement> {
  as?: 'button';
}

export interface AnchorProps extends AdditionalProp, React.AnchorHTMLAttributes<HTMLAnchorElement> {
  as: 'a';
}

export interface LinkProps extends AdditionalProp, LinkElementProps {
  as: typeof Link;
}

/**
 * Button properties.
 */
export type Props = DefaultProps | AnchorProps | LinkProps;

/**
 * The available button sizes.
 */
export type ButtonSize = 'small' | 'medium' | 'large';

/**
 * The available button styles.
 */
export type ButtonStyle = 'regular' | 'outline';

type RefType = HTMLButtonElement | HTMLAnchorElement | Link;

/**
 * Makes it easier for typescript to know what the ref type is going to be.
 */
type CombinedProps =
  | (DefaultProps & React.RefAttributes<HTMLButtonElement>)
  | (AnchorProps & React.RefAttributes<HTMLAnchorElement>)
  | (LinkProps & React.RefAttributes<Link>);

/**
 * A regular button that can be clicked.
 */
export const Button = React.forwardRef<RefType, Props>(function Button(props, ref) {
  const {
    id,
    className,
    icon,
    primary,
    loading,
    selected,
    size,
    fluid,
    labelPosition,
    children,
    role,
    outline,
    ...remainingProps
  } = props;

  const classNames = [styles.button];
  if (className) {
    classNames.push(className);
  }

  let label;
  const labelClass = labelPosition === 'right' ? styles.labelRight : styles.labelLeft;
  if (icon) {
    label = <Icon className={labelClass} name={icon} />;
  }

  let loader;
  if (loading) {
    loader = <Loader className={styles.loader} style="absolute" size="font" color="font" />;
    classNames.push(styles.loading);
  }

  let leftLabel;
  let rightLabel;
  if (labelPosition === 'right') {
    rightLabel = label;
  } else {
    leftLabel = label;
  }

  if (primary) {
    classNames.push(styles.primary);
  }

  switch (size) {
    case 'small':
      classNames.push(styles.small);
      break;
    case 'large':
      classNames.push(styles.large);
      break;
    default:
      break;
  }

  if (outline) {
    classNames.push(styles.outline);
  }

  if (fluid) {
    classNames.push(styles.fluid);
  }

  const isCheckboxLike = role && CHECKBOX_LIKE_ROLES.includes(role);

  const commonProps = {
    id: id,
    className: classNames.join(' '),
    'aria-checked': isCheckboxLike ? selected : undefined,
    'aria-pressed': !isCheckboxLike ? selected : undefined,
    role: role,
  } as const;

  const buttonChildren = (
    <>
      {leftLabel}
      <span>{children}</span>
      {rightLabel}
      {loader}
    </>
  );

  switch (remainingProps.as) {
    case undefined:
    case 'button':
      const {as: _button, ...buttonProps} = remainingProps;

      return (
        <button ref={ref as React.Ref<HTMLButtonElement>} {...commonProps} {...buttonProps}>
          {buttonChildren}
        </button>
      );
    case 'a':
      const {as: _a, ...anchorProps} = remainingProps;

      return (
        <a ref={ref as React.Ref<HTMLAnchorElement>} {...commonProps} {...anchorProps}>
          {buttonChildren}
        </a>
      );
    default:
      const {as: _Link, ...linkProps} = remainingProps;

      return (
        <Link ref={ref as React.Ref<Link>} {...commonProps} {...linkProps}>
          {buttonChildren}
        </Link>
      );
  }
}) as React.ForwardRefExoticComponent<CombinedProps>;

// Instead of ForwardRef(Button)
Button.displayName = 'Button';

Button.mdx

---
name: Button
menu: Components
---

import { Playground, Props } from 'docz'
import { Button } from './Button.tsx'


# Button

Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.

## Properties

<Props of={Button} />

## Basic usage

<Playground>
  <Button>Click me</Button>
</Playground>

[jesperorb]

I think both eslint-loader (which is giving the error) and eslint-config-react-app belongs to gatsby. It's not a dependency in docz itself.

Saw that you hade a lot of eslint-related packages and scripts in your package.json. How are you using eslint, how does your config look for example?

[molebox]

I think both eslint-loader (which is giving the error) and eslint-config-react-app belongs to gatsby. It's not a dependency in docz itself.

Saw that you hade a lot of eslint-related packages and scripts in your package.json. How are you using eslint, how does your config look for example?

Yes i thought it might be related to Gatsby but i guess it must have something to do with docz integration of Gatsby as i use Gatsby in lots of other projects and have never seen this error before.

eslint was/is working fine in the project. Here is our eslintrc.js:

module.exports = {
  env: {
    "browser": true,
    "es6": true
  },
  extends: ["plugin:import/typescript", "prettier/@typescript-eslint", "plugin:prettier/recommended", "prettier", "prettier/react"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
    process: true,
    logger: true
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module",
    project: "./tsconfig.json"
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  plugins: ["react", "react-hooks", "@typescript-eslint", "prefer-arrow", "promise", "no-null", "jsdoc", "import", "prettier"],
  rules: {
    "prettier/prettier": "error",
    "@typescript-eslint/ban-types": [
      "warn",
      {
        "types": {
          "Object": "Use {} instead",
          "String": {
            "message": "Use string instead",
            "fixWith": "string"
          }
        }
      }
    ],
    "@typescript-eslint/prefer-for-of": "error",
    "@typescript-eslint/explicit-member-accessibility": ["error", { "accessibility": "no-public" }],
    "@typescript-eslint/no-inferrable-types": ["error", { "ignoreParameters": true, "ignoreProperties": true }],
    "no-param-reassign": 0,
    "@typescript-eslint/no-var-requires": 0,
    "prefer-arrow/prefer-arrow-functions": 0,
    "@typescript-eslint/promise-function-async": 0,
    "@typescript-eslint/unified-signatures": "error",
    "@typescript-eslint/await-thenable": "error",
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "semantic-ui-react",
            "importNames": ["Button", "Tab", "Modal", "TextArea", "Input", "Loader"],
            "message": "This component has been replaced by our own implementation."
          }
        ]
      }
    ],
    "no-new-wrappers": "error",
    "@typescript-eslint/no-for-in-array": "error",
    "no-template-curly-in-string": "error",
    "@typescript-eslint/no-object-literal-type-assertion": "error",
    "no-return-await": "error",
    "no-throw-literal": "error",
    "@typescript-eslint/no-this-alias": 0,
    "@typescript-eslint/no-extraneous-class": "error",
    "prefer-object-spread": "error",
    "@typescript-eslint/no-require-imports": 0,
    "@typescript-eslint/array-type": ["error", "array-simple"],
    "@typescript-eslint/prefer-function-type": "error",
    "@typescript-eslint/explicit-function-return-type": 0,
    "no-undef-init": "error",
    "@typescript-eslint/no-unnecessary-qualifier": "warn",
    "jsx-quotes": ["error", "prefer-double"],
    "jsx-alignment": true,
    "jsx-boolean-value": [true, "never"],
    "jsx-curly-spacing": [true, "never"],
    "jsx-equals-spacing": [true, "never"],
    "jsx-key": true,
    "jsx-no-bind": true,
    "jsx-no-lambda": true,
    "jsx-no-string-ref": true,
    "jsx-use-translation-function": false, // May be useful when internationalization is in
    "jsx-self-close": true,
    "jsx-space-before-trailing-slash": true,
    "jsx-wrap-multiline": [
      true,
      {
        "declaration": "parens",
        "assignment": "parens",
        "return": "parens",
        "arrow": "parens-new-line",
        "condition": "ignore",
        "logical": "ignore",
        "prop": "ignore"
      }
    ],
    "import/no-cycle": ["error", { "maxDepth": 1 }],
    "import/no-self-import": "error",
    "object-curly-spacing": ["error", "never"],
    "react-hooks/rules-of-hooks": "error"
  }
}

[jesperorb]

Seems like tsdx used in docz-components is also using that config and needed to updates som deps, which has been done but not been released. Could that be the problem?

[nullhook]

Not sure if this will help but I had a similar issue with eslint 6, so I downgraded to 5.12.1

docz need to upgrade gatsby package to the latest one as their deps uses an older version of eslint-config-react-app which doesn't support eslint 6.

PS - check if you have any unmet peer deps

[csywweb]

maybe i has a same problem #1180

[molebox]

New error using 2.0.0-rc.63

riha@riha-pc MINGW64 ~/Documents/webui (webui-docs)
$ yarn docz dev
yarn run v1.17.3
$ C:\Users\riha\Documents\webui\node_modules\.bin\docz dev

Building app
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
success open and validate gatsby-configs - 1.249s
success load plugins - 0.526s
success onPreInit - 0.005s
success initialize cache - 0.021s
success copy gatsby files - 0.130s
success onPreBootstrap - 0.336s
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
⠸ source and transform nodes
‼  warning   Any cache was found with your props definitions
‼  warning   We'll parse your components to get props from them

 ERROR 

Failed to process data server


 ERROR 

TypeError: Cannot read property 'filter' of undefined
    at getTextValueOfClassMember (C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\lib\parser.js:571:10)
    at computeComponentName (C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:927:5)
    at Parser.getComponentInfo (C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:262:32)
    at C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:1047:20
    at Array.map (<anonymous>)
    at C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:1046:12
    at Array.reduce (<anonymous>)
    at parseWithProgramProvider (C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:1035:6)
    at Object.parseWithProgramProvider (C:\Users\riha\Documents\webui\node_modules\react-docgen-typescript\src\parser.ts:176:14)
    at files.map.filepath (C:\Users\riha\Documents\webui\node_modules\docz-core\dist\index.js:2058:19)
    at Array.map (<anonymous>)
    at parseFiles (C:\Users\riha\Documents\webui\node_modules\docz-core\dist\index.js:2056:16)
    at tsParser (C:\Users\riha\Documents\webui\node_modules\docz-core\dist\index.js:2067:16)
    at docgen (C:\Users\riha\Documents\webui\node_modules\docz-core\dist\index.js:2082:30)

⠸ source and transform nodes

[molebox]

Looks like this might be the problem: styleguidist/react-docgen-typescript#213

There is a PR up but it hasent been merged yet

[molebox]

The above Pr fixes the TypeError: Cannot read property 'filter' of undefined error but we still see the original error of this issue with eslint-config-react-app :-(

[molebox]

Is there any movement on this? I tried a clean install of docz and am still getting this error so it appears that the problem is not only isolated to my repo and the others that have commented here...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.