[CRA][React][TSX][WebPack] webpack loader js don't load stories with unexpected

[c0ncentus]

Describe the bug Work fine the first time, and then when you do and undo you cannot making things work.

To Reproduce Don't know if it will be happen but that's the way i triggered it : => Config CRA app with "react": "^16.14.0", "@storybook/addon-actions": "^6.1.11" (all storybook dependencied required in 6.1.11)

1. Get the install version
2. Change on custom components
3. try to make things not work (well it's weird ^^ ) => make sure you run the storybook server
4. remake the basic exemple and see => make webpack error

Expected behavior Do not have webpack crap

Screenshots

Code snippets => Custom Component

interface ItemArgsState {
    isActive: boolean,
    isOpen: boolean
}
export interface ItemArgsPropsSimple {
    title: string, titleHover: string, desc: string, img: string, backgroundPositionX?: number, backgroundPositionY?: number,
}
interface ItemArgsProps {
    title: string,
    titleHover: string,
    desc: string,
    i: number,
    img: string,
    onCross: any
    backgroundPositionX?: number,
    backgroundPositionY?: number
}
export class ItemArgs extends Component<ItemArgsProps, ItemArgsState> {
    constructor(props: any) {
        super(props)
        this.state = { isActive: false, isOpen: false }
    }

    setS(bool: boolean) {
        this.setState({ isActive: bool })
    }
    render() {
        const { desc, i, title, titleHover, img, backgroundPositionX, backgroundPositionY } = this.props;
        return <div
            className={`el${this.state.isActive ? " s--active" : ""}`}
            onClick={(() => {
                if (this.state.isOpen) { } else {
                    this.setState({ isActive: true, isOpen: true })
                }
            })}>
            <div className="el__overflow">
                <div className="el__inner">
                    <div className="el__bg" style={{ backgroundImage: `url(${img})`, backgroundSize: "cover", backgroundPositionX: `${backgroundPositionX}px`, backgroundPositionY: `${backgroundPositionY}px` }} />
                    <div className="el__preview-cont">
                        <h2 className="el__heading">{title}</h2>
                    </div>
                    <div className="el__content">
                        <div className="el__text">{titleHover}</div>
                        <div style={{ width: 400 }}><div className="el__desc">{desc}</div></div>
                        <div className="el__close-btn" onClick={(() => {
                            this.setState({ isActive: false, isOpen: false });
                            this.props.onCross();
                        })} />
                    </div>
                </div>
            </div>
            <div className="el__index">
                <div className="el__index-back">{i}</div>
                <div className="el__index-front">
                    <div className="el__index-overlay" data-index={i}>{i}</div>
                </div>
            </div>
        </div>
    }
}

interface SlideArgsProps {
    args: [ItemArgsPropsSimple, ItemArgsPropsSimple, ItemArgsPropsSimple, ItemArgsPropsSimple, ItemArgsPropsSimple],
    startCount: number
}
export class SlideArgs extends Component<SlideArgsProps, SlideArgsState> {
    constructor(props: any) {
        super(props)
        this.state = { isInactive: true }
        this.setIF = this.setIF.bind(this)
        this.setIV = this.setIV.bind(this)
        this.crossEvent = this.crossEvent.bind(this);
    }
    setIV() {
        this.setState(({ isInactive: true }))
    }
    setIF() {
        this.setState(({ isInactive: false }))
    }
    crossEvent(event: any) {
        this.setState(({ isInactive: true }));
    };
    render() {
        const { args, startCount } = this.props;
        return <div className={`cont`}>
            <div className="cont__inner" onClick={(() => { this.setIF() })}>
                {args.map((el, i) => {
                    const { desc, title, titleHover, img, backgroundPositionX, backgroundPositionY } = el;
                    return <ItemArgs
                        onCross={this.crossEvent}
                        title={title}
                        desc={desc}
                        i={i + 1 + this.props.startCount}
                        titleHover={titleHover}
                        img={img}
                        backgroundPositionX={backgroundPositionX}
                        backgroundPositionY={backgroundPositionY}
                    />
                })}
            </div>
        </div>
    }
}

===> the story

const initia: SlideArgsProps = {
        startCount: 0,
        args: [
            {
                desc: "Le mélange des palettes émotives apportent plus de douceur et d'humanité.",
                img: "https://1.bp.blogspot.com/-s6U4X17WCww/VlK_g5pBvSI/AAAAAAAAB80/kENokMx4VD4/s1600/Luca%2BGiordano_El%2Bsue%25C3%25B1o%2Bde%2BSalom%25C3%25B3n%2B%25281694-1695%2529.jpg",
                title: "Emotivité",
                titleHover: "Cadeau",
                backgroundPositionX: -189,
                backgroundPositionY: -412,
            }, {
                desc: "Nous transporte dans une autre réalité, et donc nous sommes prompt à un instant de rêver d'un autre monde.",
                img: "https://images.unsplash.com/photo-1542743409-dbca5afa7dd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1000&q=80",
                title: "Signe",
                titleHover: "Rêve",

            }, {
                desc: "Les siècles avec les réformes du Monde, des sociétés et les quantités enorme de perte de documents, nous oblige à rester humble au vue de nos connaissances.",
                img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Rembrandt-Belsazar.jpg/965px-Rembrandt-Belsazar.jpg",
                title: "Richesse",
                titleHover: "Savoir",
                backgroundPositionY: -200,
                backgroundPositionX: -100,
            }, {
                desc: "C'est cette catégorie de musique qui met l'humain le plus en avant. L'interprète est presque plus important que le compositeur: il donne vie à la partition écrite. De même qu'Un titre de musique peut 'sonner' d'une infini de facettes selon les musiciens et leurs façon de jouer.",
                img: "https://upload.wikimedia.org/wikipedia/commons/d/d3/Leighton-God_Speed%21.jpg",
                title: "Rencontre",
                backgroundPositionY: -412,
                backgroundPositionX: -100,
                titleHover: "Humain++",
            }, {
                desc: "Permet de mettre de l'ordre dans les émotions et de calmer physiquement.",
                img: "https://i.pinimg.com/originals/ce/69/40/ce69400731686716e174ea31ebe938ec.jpg",
                title: "Paix",
                titleHover: "Thérapie",
            }],

}

export default {
    title: 'SlideArgs',
    component: SlideArgs,
} as Meta;

const Template: Story<SlideArgsProps> = (args: SlideArgsProps) => <SlideArgs {...args} />;

export const FirstStory = Template.bind({});

FirstStory.args = { ...initia };

System Environment Info:

System: OS: Windows 10 10.0.17134 CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz Binaries: Node: 14.10.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.10 - C:\WORKBRENCH\FENEARO\Feanaro_React\node_modules.bin\npm.CMD Browsers: Edge: Spartan (42.17134.1098.0) npmPackages: @storybook/addon-actions: ^6.1.11 => 6.1.11 @storybook/addon-essentials: ^6.1.11 => 6.1.11 @storybook/addon-links: ^6.1.11 => 6.1.11 @storybook/node-logger: ^6.1.11 => 6.1.11 @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 @storybook/react: ^6.1.11 => 6.1.11

  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}```
**Additional context**
 I already watch other similar issues, please make simple as possible.

I will try to uninstall and install and do it carefully my stories, i think it's work but that's not I want (stability).

[6akcuk]

We're experiencing similar error with Storybook:

ERROR in ./packages/rest/src/resources/customerInvoices/endpoints/postCustomerDraftInvoice.ts 9:5
Module parse failed: Unexpected token (9:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from '../types'
| 
> type PostCustomerDraftInvoiceRequestParams = VoidArgument
| interface PostCustomerDraftInvoiceRequestBodyLine {
|   concept: string
 @ ./packages/rest/src/resources/customerInvoices/endpoints.ts 9:0-52 9:0-52

This packages file connected as local packages through package.json file.

Content of main.js:

const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve.plugins = [new TsConfigPathsPlugin()];
    return config;
  }
}

Content of preview.js:

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { theme } from '@playtomic/manager/theme/globalStyle'
import '@playtomic/manager/styles/style.scss'

const Wrapper = styled.div``

const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Wrapper>
        <Story />
      </Wrapper>
    </ThemeProvider>
  )
]

const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

export { decorators, parameters }

[c0ncentus]

Content of preview.js is require ? I already dowload a package cra in react 16.9 with storybook it work for now ...

Maybe this will help when i have similar issue 👍
Don't know about that possibilities, thanks

 webpackFinal: async (config, { configType }) => {
    config.resolve.plugins = [new TsConfigPathsPlugin()];
    return config;
  }

[c0ncentus]

thanks I have an other issue and then learn more about how webpack is hell, I understand more what really you do 👍