Skip to content
This repository was archived by the owner on Nov 20, 2020. It is now read-only.

Webpack configuration fails to build typescript. #24

Open
sztrzask opened this issue Aug 31, 2018 · 11 comments
Open

Webpack configuration fails to build typescript. #24

sztrzask opened this issue Aug 31, 2018 · 11 comments

Comments

@sztrzask
Copy link

sztrzask commented Aug 31, 2018

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
Copy link
Owner

strothj commented Sep 1, 2018

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
Copy link

woutervanvliet commented Sep 7, 2018

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
Copy link

woutervanvliet commented Sep 7, 2018

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
Copy link

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
Copy link

Redmega commented Sep 26, 2018

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

@strothj
Copy link
Owner

strothj commented Sep 26, 2018

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
Copy link
Owner

strothj commented Sep 26, 2018

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
Copy link

Redmega commented Sep 26, 2018

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
Copy link

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:
image

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
image

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

@Yorkey
Copy link

Yorkey commented Nov 28, 2018

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

@guzhongren
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants