GithubHelp home page GithubHelp logo

Comments (6)

gregoryBernard avatar gregoryBernard commented on June 12, 2024 1

Addon docs is working well with this webpack configuration if some need

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-typescript',
            '@babel/preset-react',
          ]
        }
      },
      'react-docgen-typescript-loader'
    ]
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

from react-docgen-typescript-loader.

mgambati avatar mgambati commented on June 12, 2024

Same, even with @storybook/typescript-preset.

from react-docgen-typescript-loader.

gregoryBernard avatar gregoryBernard commented on June 12, 2024

Same here; even using babel-loader. Did anyone manage to make it work?
Not using CRA here. Using latest React and Typscript.

from react-docgen-typescript-loader.

gal1419 avatar gal1419 commented on June 12, 2024

I'm having the exact same problem. I'm using the latest versions of TS, Storybook (+ relevant plugins), React. I've tried with babel-loader, ts-loader, and awesome-typescript-loader. That was working before and was started in 5.1 if I'm not mistaken.

from react-docgen-typescript-loader.

gregoryBernard avatar gregoryBernard commented on June 12, 2024

@gal1419 I also seen when you don't export component directly I say this error. Cau you try this:

import React from "react";

import './Button.scss';

interface FancyButtonProps {
  /**
   * onPress function handler
   */
  click?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /**
   * Set disabled button
   */
  disabled: boolean;

  /**
   * Text displayed in button
   */
  text: string;

  /**
   * CSS properties to apply to button
   */
  style?: React.CSSProperties;
}

/**
 * The world's most beautiful button 
 */
export const FancyButton = ({disabled = false, text = 'Click me', style, click}: FancyButtonProps) => (
  <button disabled={disabled} style={style} className='fancy-button' onClick={click}>
    {text}
  </button>
);

export default FancyButton;

With config I mentionned previously

from react-docgen-typescript-loader.

gal1419 avatar gal1419 commented on June 12, 2024

@gregoryBernard thanks for the info, however, we don't use default exports, so that is not an option for us.

from react-docgen-typescript-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.