Webpack configuration fails to build typescript.

[sztrzask]

Proposed webpack configuration fails to build typescript.

Random number of tsx files are reported with error TS1005: ';' expected. during storybok's build.

This is my tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": ["src"],
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*.test.tsx"
  ]
}

I am using create-react-app-ts and if I use the storybook's webpack configuration from storybook (https://storybook.js.org/configurations/typescript-config/) the code compiles and storybook starts, however it's using the older plugin instead of loader

Any ideas?

[strothj]

Hello,

Can you post the contents of one of the files that is being reported as having a missing ;?

Can you try surrounding the affected code block in a try - catch and suppress the error?

[woutervanvliet]

Hi,

We're running into the same problem and managed to narrow it down to tsx files that contain a - character in the filename.

[woutervanvliet]

More specifically; the issue happens when using export default syntax in files with kebab-case filenames. The generated code will look like:

hyphen-in-filename.displayName = "hyphen-in-filename";

[woutervanvliet]

Done a bit more digging, and the cause seems to be that react-docgen-typescript sets docComment.displayName to it's best guess, which sometimes is just the filename, and react-docgen-typescript-loader uses this displayName as it's best guess for the symbol it attaches the displayname and docinfo properties to.

Somehow I feel that react-docgen-typescript should be able to figure out the actual class or function name of the React component regardless of how it exports - and thus figure out the proper display name. That's the one part.

But regardless of what react-docgen-typescript thinks about the displayName, the loader should not just blindly trust it to be a valid javascript variable name.

Would a fix that assumes display name to be in kebab case, if it contains a hyphen be a good idea?

I might find some time to work on a PR for that but I could do with some input about what a good fix would be.

@sztrzask Can you confirm that the hyphen problem indeed also is the cause of the error you're getting?

[Redmega]

Can confirm that kebab case totally breaks stuff. Facing the same issue in my repo.

[strothj]

Hello, thank you for the reports.

The loader has an option to disable attaching displayName automatically. The purpose of attaching displayName is to prevent the component name from disappearing when the bundle has been minified/mangled in production. The info addon uses the display name to match the story description with one of the rendered components. You can try disabling the option and seeing if there is any change there.

Right now I have a couple of client projects eating up my time but I intend to get this sorted out when I can. I'd be happy to accept a pull request if anyone feels adventurous.

[strothj]

One thing that might be worth checking is seeing if Styleguidist with react-docgen-typescript has any similar issues.

Would a fix that assumes display name to be in kebab case, if it contains a hyphen be a good idea?

This sounds reasonable.

[Redmega]

Using the loader with the following config:

{
  loader: require.resolve('babel-loader')
},
{
  loader: require.resolve('react-docgen-typescript-loader'),
  options: { setDisplayName: false },
}

It did not change a thing. Well, it did actually -- instead of Storybook loading up and then erroring, it instead gave me errors in the console, which is nice. Before I would get a blank Storybook (with the plugin). With the loader, I get the following console error (I've replaced the path to the file with ##PATH##)

SyntaxError: ##PATH##/with-responsive.tsx: 'with' in strict mode (72:4)

with-responsive.__docgenInfo = { "description": "Give a child element responsive capabilities", "displayName": "with-responsive", "props": {} };

So it appears it's definitely grabbing the docgenInfo correctly, it just gets confused when naming the variable.

[guzhongren]

hey!, i hava some issuse about TS1005: ';' expected. when

 config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      require.resolve('awesome-typescript-loader'),
      require.resolve('react-docgen-typescript-loader')
    ]
  },

result:

year,i searched solution i can; but no useful; when i change my webpack.config.js to

config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  }

there are no props like this

dou you have any idea to resolve this problem ,my repo; thx

[Yorkey]

Hi, update "react-docgen-typescript" to last version(1.12.2 ) will solve this issue

[guzhongren]

@Yorkey thx for you solution, but it does not work; at the same times, i user 1.9.0 , it's behave likes before