-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@HotkeysTarget TypeError: class constructors must be invoked with |new| #3604
Comments
Can you reproduce this in a code sandbox? |
I have created an exampe project: https://github.com/nagylzs/bug3604 You can recreate the problem by:
|
Also tried to create a code sandbox example. It does not throw an error! https://codesandbox.io/s/blueprint-sandbox-tkrkk But the bug3604 project is really buggy. I'm not sure what is the difference between them. It might be an incompatibility between a create-react-app dependency and blueprintjs? But I doubt it. |
I have tried the same example project on a different computer. I got a sightly different error message:
This is the transpiled line that is causing an error:
It seems that _super is a class, and it cannot be "applied" without the new keyword. I have no idea why this problem is not coming out on code sandbox, but it surely does not work with a default "create-react-app --typescript" project. |
@nagylzs I think I have a problem like you |
I have the same issue, even if set compilerOptions.target to es5 : hotkeysTarget.js:32 Uncaught TypeError: Class constructor HotKeyRoot cannot be invoked without 'new' I also use create-react-app --typescript for this project. |
@sgaloux I second you. Used Also having es5 as target. |
experiencing same issue with cra 3 and typescript changing target to es5 doesn't help. Here is the repo with failing decorator https://github.com/kresli/cra3-bp3-decorator-error |
I met the same error (but I dont use TS, just ES6 + webpack + babel).
This is a tanspiled to ES5 I solved it by using
|
Thanks @alxmiron it took my a while to find your workaround (which is working so far) |
Easy. Change default
But be careful, it will look for |
This was fixed by #3230. Also @alxmiron it can be safe to add |
An alternative solution to #3230 would be to create something like a hook or a higher order component that gives you the same functionality as |
…king the class annotations work.
I started suddenly to have the same problem. The strange thing is that I cannot reproduce it when I build the application (CRA + typescript) myself, but the CI build has the issue. I tried several versions of typescript / blueprint / react (I first thought that bumping to the latest version caused the problem but it didn't). Maybe this has to do with node version. I'm using 13.7.0 locally (no issue) but CI uses older versions (one env uses 8.x, the other I'm not sure). Edit: I applied the same workaround as in commit just above and it did the trick 👍 |
I'm having exactly this problem as well. I'm not really a JS developer, I'm a Java developer who is muddling my way though some react code and I don't really understand how any of this stuff works. I am just using plain JS (no typescript) and the app was originally created with create-react-app so there is a package.json file but no webpack config. |
create-react-app does use a webpack config, its just not editable unless you "eject". Would recommend trying this workaround right now if you don't feel comfortable diving into js build tooling right now: pmclachlan/blink-mind@79511a5 |
Thankyou @maclockard - that worked for me. |
I have same error using Babel + Webpack without ts. Is there any ways to fix it? |
@Kupstas This is a solution: #3604 (comment) if you are unable to do that, then this could also work: pmclachlan/blink-mind@79511a5 |
@adidahiya is there an official fix coming for this? Both of the two solutions mentioned above are really workarounds not true fixes. Also I've tried both and neither is working for me unfortunately :( Does anyone know what caused this issue to start showing up? What changed exactly, the blueprintjs code or babel or webpack? Thanks! |
@tnrich if you are curious, the reason why this started happening is that more people starting using es6, which has native classes. The underlying issue is that typescript's shim for classes when targeting es5 are not fully compatible with es6 classes (specifically instantiating es6 classes from an es5 shim class). Also, if neither solution above didn't work for you, it wouldn't surprise me if you are running into a different issue preventing HotkeysTarget form working than the es5/es6 incompatibility. mind posting some error information? |
@maclockard none of these 2 solutions work for me =( |
Actually I see a very strange error log
|
@Kupstas could you include a code snippet showing how you are importing and using |
@maclockard here's what I see when I tried:
I got similar looking webpack errors when trying the "mainFields" solution. |
I added like in example. But I have got an error. Something like Also I had the same errors like @tnrich by using first solution |
…rts to not show submenu in certain cases
@tnrich the issue you are seeing there is due to the fact something in you loader chain can't handle the optional chain operator being used by blueprint when targeting There's a chance that create react app by default is babeling upstream deps already for you, if that's the case then all you need to do is fix what version of babel is being resolved. For webpack, to babel dependencies/blueprint just change the include/exclude option of the relevant rule config for the babel loader. @Kupstas you could try using require instead of import, since it sounds like you don't have es modules or typescript setup. Also, a third possible solution here instead of using the esnext target version of blueprint is to make it so that your build targets es5 or change your browserlist such that it makes babel polyfill classes instead of using native classes. In my personal opinion, I think that an ideal fix would be HOC versions of |
Also, I might be wrong about babel being the thing that's failing to parse the optional chain operator, its just usually been the culprit in the past. If its still giving that error after making sure that blueprint is being babel and making sure that babel is at least 7.8.0, the parse error could be a different loader in your loader chain. In that case, try bumping the versions of these loaders and/or of webpack to see if later versions support optional chaining. |
This seems like the best solution to me as well. I use nwb on top of webpack and don't feel like digging into the babel stuff right now so just downgraded nwb to a previous version where everything was working. This is fine for the time being but it would be great to have a simple HOC solution. |
Why we cannot just render HotKey inside of view? |
Any movement on this one @adidahiya @maclockard ? Thanks! |
Some thoughts on this: Create React App does not support decorators by default, see here. I propose just moving away from decorators for now, as many libraries (e.g. MobX) have done, or at least adding another option for users to declare HotKeys, maybe a React hook. |
This issue has been plaguing me for quite a while now. I fully support what @alexkreidler suggests which is to provide another option for this functionality that doesn't require decorators support which can be quite finicky to get tooling to support. In my case it works when using blueprint as a regular requirement but not when I try to link blueprint locally as a webpack alias (helpful for local development https://medium.com/@tnrich_29519/a-better-alternative-to-npm-yarn-link-for-the-front-end-667f03d497a6). |
I'm working on this as part of Blueprint v4.0 changes, it's the next thing on my list, should be able to prototype something later this week. |
Environment
Steps to reproduce
Actual behavior
The component cannot be rendered. I get an error that starts with this:
Full traceback available, but probably not needed.
Expected behavior
The component should be rendered and the hotkey should be working.
The text was updated successfully, but these errors were encountered: