strothj / react-docgen-typescript-loader

Webpack loader to generate docgen information from Typescript React components.
Other
360 stars 47 forks source link

"No propTypes defined!" with react-redux connect #45

Open RunIfYouCan opened 5 years ago

RunIfYouCan commented 5 years ago

This doesn't work

export class ExampleModule extends Component<IProps> {
  componentDidMount() {
    this.props.initApp();
  }

  render() {
    const { appName = 'app' } = this.props;
    return (
      <div>Hello!!11 {appName}</div>
    )
  }
}

const mapStateToProps = ({ example }: AppState) => ({
  appName: example.app,
});

export default connect(mapStateToProps, { initApp })(ExampleModule);

But this one works fine

export class ExampleModule extends Component<IProps> {
  componentDidMount() {
    this.props.initApp();
  }

  render() {
    const { appName = 'app' } = this.props;
    return (
      <div>Hello!!11 {appName}</div>
    )
  }
}
export default ExampleModule;

Package.json

{
  "name": "tst",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf ./dist",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.js",
    "watch": "webpack --watch",
    "dev": "NODE_ENV=development node server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "NODE_ENV=development start-storybook -p 6006"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{ts,tsx}": [
        "prettier --single-quote --parser typescript --write",
        "git add"
      ],
      "*.{css, json}": [
        "prettier --write",
        "git add"
      ]
    }
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime": "^7.3.1",
    "@storybook/addon-actions": "^5.0.10",
    "axios": "^0.18.0",
    "history": "^4.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-redux": "^6.0.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.2",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@storybook/addon-info": "^5.0.10",
    "@storybook/react": "^5.0.10",
    "@types/history": "^4.7.2",
    "@types/react": "^16.8.4",
    "@types/react-dom": "^16.8.2",
    "@types/react-redux": "^7.0.1",
    "@types/react-router": "^4.4.4",
    "@types/react-router-dom": "^4.3.1",
    "@types/redux-thunk": "^2.1.0",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__react": "^4.0.1",
    "@typescript-eslint/eslint-plugin": "^1.4.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.0.0",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.15.0",
    "eslint-plugin-jest": "^22.1.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.3.1",
    "jest-cli": "^24.0.0",
    "lint-staged": "^8.1.4",
    "node-sass": "^4.11.0",
    "prettier": "^1.16.4",
    "react-docgen-typescript-loader": "^3.1.0",
    "redux-devtools": "^3.5.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "stylelint": "^9.10.1",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-scss": "^3.5.4",
    "typescript": "^3.3.3333",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.storybook/webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json')
        }
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

config.ts

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);
mmahalwy commented 4 years ago

@RunIfYouCan any luck with this? same problem with hocs