Preact-cli: TypeError: Cannot read property 'flags' of undefined

[igorsheg-wix]

Do you want to request a _feature_ or report a _bug_?
A Bug

What is the current behaviour?
Running yarn run build when installing @types modules breaks the build.

After installing the Typescript template, I'm trying to install styled-components, all goes fine until I install @types/styled-components.

If the current behaviour is a bug, please provide the steps to reproduce.

1. preact create typescript my-project
2. yarn add styled-components
3. yarn add -D @types/styled-components
4. yarn run build
5. INTERNAL ERROR: Cannot read property 'flags' of undefined

What is the expected behaviour?
Being able to install @types packages.

OS: macOS 10.15.3
Terminal: Hyper 3.1.0
Shell: zsh
Node: v13.8.0
npm: 6.13.7
preact-cli: 2.2.1

[reznord]

It seems to be an issue with typescript itself. There is an open issue in typescript for the same.

Reference link: https://github.com/microsoft/TypeScript/issues/37165

[SimonKlausLudwig]

Same problem for me with a fresh installed "preact create typescript my-project"

[SimonKlausLudwig]

I build a small Dockerfile which builds my project inside a container which works fine:

FROM node:13
WORKDIR /usr/adminui
COPY . .
CMD npm install && npm run build && mv build output

and run it with:

docker build --rm -t imagetest .
docker run -v build:/usr/src/app/output:rw imagetest

[robinst]

Commenting out the lines in src/declaration.d.ts made the error go away. But removing the lines might break something else.

[mdziekon]

Does anyone know if the declaration.d.ts file is still needed? According to the TypeScript's documentation, TS is able to pick the right JSX declaration from the factory function in use (https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions), so when using h it will automatically look for h.JSX which is defined in preact's type definitions (similar story with createElement in compat mode).

As far as I can tell, removing this from a newly created project does not break anything, so unless there's any other reason for having these re-declarations, could this simply be removed to get rid of the tssserver problem?

[rschristian]

Does anyone know if the declaration.d.ts file is still needed? According to the TypeScript's documentation, TS is able to pick the right JSX declaration from the factory function in use (https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions), so when using h it will automatically look for h.JSX which is defined in preact's type definitions (similar story with createElement in compat mode).

As far as I can tell, removing this from a newly created project does not break anything, so unless there's any other reason for having these re-declarations, could this simply be removed to get rid of the tssserver problem?

I added that, and it was just to allow the test lib to run. Nothing more. Definitely get rid of it. It was a temporary hack so all parts of the template "worked".

[mdziekon]

@RyanChristian4427 thanks for confirming that. Already removed in PR https://github.com/preactjs-templates/typescript/pull/25 which is now awaiting review.

[rschristian]

Glad to hear it.

[cj]

commenting out the declaration.d.ts brings in new errors:

[rschristian]

commenting out the declaration.d.ts brings in new errors:

It's definitely going to depend on the libraries you add to the project, but declaration.d.ts exists in the Typescript template for Preact to satisfy Jest Render Spy. As @mdziekon is removing Jest Render Spy, it is fine for that (declaration.d.ts) to be removed from the template.

I definitely don't recommend keeping that there, as it is incredibly finicky (as it can cause the TS language server to crash entirely), but find a better solution that works for your situation. Whatever CacheProvider and ThemeProvider are, they're not included with the Typescript template, so maybe open an issue where others can see what libs you're using that causes this.

[cj]

@RyanChristian4427 It's from emotion and chakra-ui https://gist.github.com/cj/361253bae01789100f58caf064538d62

(there are no type errors when using react)

[rschristian]

@RyanChristian4427 It's from emotion and chakra-ui https://gist.github.com/cj/361253bae01789100f58caf064538d62

(there are no type errors when using react)

I know nothing about either of those, but your best bet will be to just create a new issue for this. This issue thread is specifically for the bug/s caused by declaration.d.ts, as it is in template, existing, so I don't think this is the right place.

[mdziekon]

@RyanChristian4427 wrote:

As @mdziekon is removing Jest, it is fine for that to be removed from the template.

My PR does not remove Jest, but it replaces outdated render spy with Enzyme integration. Just wanted to clarify that to prevent any false assumptions.

[rschristian]

@RyanChristian4427 wrote:

As @mdziekon is removing Jest, it is fine for that to be removed from the template.

My PR does not remove Jest, but it replaces outdated render spy with Enzyme integration. Just wanted to clarify that to prevent any false assumptions.

My bad. Late night. Was trying to do that by memory.

[cj]

@RyanChristian4427 sounds good :)

[ForsakenHarmony]

The template should no longer cause the error