Errors in tsx since upgrading to 1.0.0

[stephanpelikan]

Since upgrading to 1.0.0 (using Eclipse 4.25.0) I see these errors in my React tsx files:

In one file of my project, after working on other issues, this error is permanently gone without following the advice to add the import. All other tsx files I open show that error.

How can I get rid of this?

I see also other errors which were also suddenly highlighted after upgrading to 1.0.0. Some of them are right and need to be resolved. But why they were not highlighted before?

Additionally, the production build does not highlight those "new" errors.

I'm using
"typescript": "^4.7.4"
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-jsx": "^1.0.0",
and this is my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "src/",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

[mickaelistria]

Some of them are right and need to be resolved. But why they were not highlighted before?

Wild Web Developer uses the typescript-language-server to provide analysis. And this (and its transitive dependencies) gets updates frequently. Some updates bring new features.

[stephanpelikan]

Ok, were I can find the from which to what version of language-server this 1.0.0 upgrade brings in?
I found a similar issue there (typescript-language-server/typescript-language-server#150) and they ask for detail informtion: Where can I found what is used in case wildwebdevelopers?

[mickaelistria]

Ok, were I can find the from which to what version of language-server this 1.0.0 upgrade brings in?

in the install location, eclipse/plugins/org.eclipse.wildwebdeveloper_*/package-lock.json.

I found a similar issue there (typescript-language-server/typescript-language-server#150) and they ask for detail informtion

Thanks, this is very relevant! Indeed "client doesn't set languageId correctly". this needs to be fixed in Wild Web Developer. The fix would be similar to 1ed945d#diff-39186773eb7c359cf334445a924d91bdb589ea566a6eba995f06cdf7af1e7d18 but applied to the jsts language server binding. Would you be interested in trying to submit a fix as a PR?

[stephanpelikan]

I can try, but I don't have a setup for this - so someone has to review und test the changes.

By-the-way: In the error-log I found this line

org.eclipse.lsp4e
Info
Wed Nov 30 12:52:40 CET 2022
[Info]	[lspserver] Using Typescript version (bundled) 4.8.4 from path "/home/dev/Development/ides/eclipse/plugins/org.eclipse.wildwebdeveloper_1.0.0.202211030226/node_modules/typescript/lib/tsserver.js"

Might it be, that this is the reason for the new errors I see? As far as I could figure out previously typescript 4.6.4 was bundled and I'm using 4.7.4 in my package.json. If the new version 4.8.4 used by WWD 1.0.0 shows stuff as an error which wasn't an error before would be a possible explaination.

So, I asked myself why is the bundled version of typescript used and not the version of my project. Typescript is evolving fast and it is a common situation on customers projects to fix bugs or implement minor features without upgrading the entire code base due to a newer typescript version. I do Java/Maven-based projects and I use maven-frontend-plugin to avoid this situation at build-time. It would be great to avoid this also at edit-time!

For example: If the project's tsserver.js could be used by scanning the right path-hierarchy of a ts-file opened until the next package.json is found (e.g. {projectRoot}/src/components/MyAwesomeComponent.ts> {projectRoot}/package.json or for Java/Maven-based projects as I do {projectRoot}/src/main/webapp/src/components/MyAwesomeComponent.ts > {projectRoot}/src/main/webapp/package.json).

[mickaelistria]

I can try, but I don't have a setup for this - so someone has to review und test the changes.

Please submit a PR, I'll try to test it.

[stephanpelikan]

As far as I understand, this is already in place:

https://github.com/eclipse/wildwebdeveloper/blob/1ed945dde0501136c5be7e2aabd65c908afd39c5/org.eclipse.wildwebdeveloper/plugin.xml#L553

Sorry, if I'm wrong and didn't get it. Since this is already fixed in 1.0.1 I updated but now I get other errors:

Unfortunately, the previous problems were solveable by just adding an import. This one I need to investigate what that means and how to workaround. I guess, I will try to downgrade the WWD because all that stuff blocks me. I tried to upgrade typescript in my package.json but it compiles well - no errors. If this new error is caused by the next typescript upgrade to 4.9.4 according to he Changelog, then I really vote for project-specific typescript versions.

[stephanpelikan]

I googled for this error and 90% is about "rename file from .ts to .tsx" but in my case it is already .tsx and it worked with WWD 1.0.0

[sinhote]

I have the same issue. I guess not so many people is using Eclipse for tsx development :S

As far as I understand, this is already in place:

https://github.com/eclipse/wildwebdeveloper/blob/1ed945dde0501136c5be7e2aabd65c908afd39c5/org.eclipse.wildwebdeveloper/plugin.xml#L553

Sorry, if I'm wrong and didn't get it. Since this is already fixed in 1.0.1 I updated but now I get other errors:

Unfortunately, the previous problems were solveable by just adding an import. This one I need to investigate what that means and how to workaround. I guess, I will try to downgrade the WWD because all that stuff blocks me. I tried to upgrade typescript in my package.json but it compiles well - no errors. If this new error is caused by the next typescript upgrade to 4.9.4 according to he Changelog, then I really vote for project-specific typescript versions.

The same is happening for me with Eclipse 2022-09 and Wild Web Developer with the following versions:

@stephanpelikan did you find a workaround?

[stephanpelikan]

Unfortunately not. I downgraded the plugin. Meanwhile I had a bunch of updates and my current version is

which is working fine. Since I need a running IDE without worries I do not update any more. Maybe in future I will give it another try.

Independent from this, Wild Web Developer uses that bundled typescript version instead of the version given in each project's package.json. As long as your projects do fine with this its OK, but especially maintaining older code is a problem. So, at the moment the setup and the projects I'm working on are matching fine, but yes I'm worried about the future.

[sinhote]

Unfortunately not. I downgraded the plugin. Meanwhile I had a bunch of updates and my current version is

which is working fine. Since I need a running IDE without worries I do not update any more. Maybe in future I will give it another try.

Independent from this, Wild Web Developer uses that bundled typescript version instead of the version given in each project's package.json. As long as your projects do fine with this its OK, but especially maintaining older code is a problem. So, at the moment the setup and the projects I'm working on are matching fine, but yes I'm worried about the future.

Hey! Thanks! Sorry to ask too many questions, but how did you downgrade? I'm trying to find version 1.0.0 in the repos and I cannot find it. Just 1.3.0 and 1.4.0, which has the same problems.

Thanks in advance!

[stephanpelikan]

@sinhote : No problem. I removed WWW manually. To do so, got to Help->Install New Software->Already Installed search for "Wild" and remove it.

Afterwards I added this repo

https://download.eclipse.org/wildwebdeveloper/releases/1.0.0

at Help->Install New Software and installed all packages. That workes in November. Please make a backup of your Eclipse- and your workspace-folder before doing the patch. There is no guarantee that it will work with current plugins or with your plugins installed in particular.

[sinhote]

@stephanpelikan Thanks! It worked! I actually had to provide a manual solution because there were conflicts with the dependencies and other installed components. Fortunately, it all boiled down to an m2e dependency, and since I don't use Maven at all, I could simply uninstall it.

Thanks again for the help. I hope they can sort this issue out in the next releases.

[mickaelistria]

Thanks again for the help. I hope they can sort this issue out in the next releases.

If people who face the issue roll back to older versions instead of contributing to its resolution, then it's even less likely to be fixed.

[sinhote]

Thanks again for the help. I hope they can sort this issue out in the next releases.

If people who face the issue roll back to older versions instead of contributing to its resolution, then it's even less likely to be fixed.

I meant no disrespect here. I'm glad that this plugin exists and it's great we can use it for free, but I'd be more glad if it worked well when that can be fixed. I don't think I came here demanding that someone fixed it for me, I just came looking to find a workaround. This was not a complaint.

Not everybody has the time and not everybody who has the ability and knowledge to use a piece of software has the ability to improve it. I know this is obvious but I was not the one who started posting platitudes.

I wish I could support other projects, but I don't have the time and, frankly, I don't think I need to justify that to anybody that is so quick to draw conclusions.

Thanks for your work as a contributor but that does not give your the right to have that attitude.

Have a nice day.

[mickaelistria]

@stephanpelikan you may want to try setting the languageId also for the contentTypeBinding that are related to the eslint language server.

[stephanpelikan]

@mickaelistria: I tried that but at the moment my workspace is broken. I developed a React app and everything was fine. I needed to duplicate this app as a template for a second app. This messed up everything. I don't see any typescript errors or warnings any more, code completion is not working and error log shows:

Do you have an idea how to get this work again? I also tried to open these projects mutual exclusive since there are a lot of ts/tsx files having the same path and name. But nothing helps. I also tried a clean eclipse installation which gives me this error instead I also cannot get rid of:

Any ideas?

[stephanpelikan]

I tried to get insides by enable logging to console and get this:

[2023-03-28T17:12:15.238843569+02:00] LSP4E to org.eclipse.wildwebdeveloper.jsts:
[B@24dd76ed

[2023-03-28T17:12:15.257483383+02:00] LSP4E to org.eclipse.wildwebdeveloper.jsts:
[B@4223c686

Unfortunately, logging to file shows the same 😞

[mickaelistria]

Please install latest release or latest snapshot of LSP4E to get proper logging.

[stephanpelikan]

I updated and that changed the behavior: A lot of tsx files are now treated fine (code-completion, hovers, etc.) but there are still some files which seem not to be recognized as a tsx file showing the error above. Then I enabled log to console and after restart none of the tsx file where recognized any more. Disabling logs brought back tsx-recognition only for a couple of files, but the majority is not treated as a tsx any more. Would could cause that unpredictable behavior?

[stephanpelikan]

Every time I restart Eclipse other files are recognized: I have a file open and hovers, code-completion, etc. works fine. I restart Eclipse without closing the file. After coming back errors are shown ('XXX' refers to a value, but is being used as a type.). Restarting again but the file still shows errors.

[stephanpelikan]

Since the current version of WWW and LSP4J does not work I retried to use my old Eclipse (having WWW 1.0.0 installed) and on importing the second project (which is a copy of a previous project, so having the same directory structure and also same and similar files) into a new workspace every works fine. Does that give you a hint?

[MikeTuffy]

I've been encountering the same issues described here, where editing React Typescript tsx files is effectively broken in current versions. I had a dig around in the code and config for the plugin and its dependencies to try and identify the cause but I ultimately had to roll back to version 1.0.0 as stephanpelikan described.

[mickaelistria]

Can someone please share a very minimal project that reproduces the issue?

[stephanpelikan]

Yes, I'm working on that. I use Java Maven multi-module projects, so there is a hierarchy of projects:

root

• sub-module-a
  • sub-sub-module-b
    package.json
    src/test.tsx

I experienced that in the files were found multiple times:

1. project sub-sub-module-b: src/test.tsx
2. project sub-module-a: sub-sub-module-b/src/test.tsx
3. project root: sub-module-a/sub-sub-module-b/src/test.tsx

When I do CTRL-left-mouse-click in ts/tsx files to follow code-references I always jumps to the root project, regardsless in which sub-project I opened the file. So, in my option this has at least some effect. I'm currently heavy under work-load but I will do my very best.

Thank you for hanging on!

[stephanpelikan]

OK, I have now a manual for all the problems I'm facing. I refers to a Open-Source project I'm currently working on:

Preparation:

1. Download https://www.eclipse.org/downloads/packages/release/2023-03/r/eclipse-ide-enterprise-java-and-web-developers
2. Run Eclipse using Java 17
3. Clone GitHub project https://github.com/vanillabp/business-cockpit.git and switch to branch support/wildwebdeveloper-issues
4. The project builds libraries as well as applications. The libraries needs to be published to a repo to be available to the applications. So I use Verdaccio as a local repo for this. You can run

   cd development
   docker-compose up -d verdaccio

   to get a preconfigured local repo. The libraries are also npm link-ed into the applications because otherwise npm install fails since the libraries are listed as dependencies in the applications package.json files.
   By-the-way: It is really hard to develop npm packages. I totally miss the concept of SNAPSHOT-dependencies as given in Maven: Republishing a version is OK since it is marked as "SNAPSHOT". With npm once published it needs to be unpublished but this breaks the sha512 stored in package-lock.json. If there is a good way to do this you can recommend I would be glad to learn about it.
5. Disable npm builds driven by Maven: Set content of lifecycle-mapping-metadata.xml (Preferences -> Maven -> Lifecycle Mappings -> Open workspace lifecycle mappings metadata):

   <lifecycleMappingMetadata>
     <pluginExecutions>
       <pluginExecution>
         <pluginExecutionFilter>
           <groupId>com.github.eirslett</groupId>
           <artifactId>frontend-maven-plugin</artifactId>
           <versionRange>[1.12.1,)</versionRange>
           <goals>
             <goal>install-node-and-npm</goal>
             <goal>npm</goal>
           </goals>
         </pluginExecutionFilter>
         <action>
           <ignore />
         </action>
       </pluginExecution>
     </pluginExecutions>
   </lifecycleMappingMetadata>

   and restart Eclipse.
6. Import projekt: Menu File -> Import... -> Maven -> Existing Maven Projects
   1. Browse: the directory of the git clone
   2. Advanced -> Name template: [artifactId]
7. After import, if you see Java-errors (due to race conditions on Maven import), simple do
   1. Right-click Parent project
   2. Choose Maven -> Update Project...
   3. Hit OK button
   4. Wait until an job in progress view is gone
8. Run Maven goal package to do a npm install and npm link in all libraries and applications.
9. Afterwards the packages should be ready for development:
   1. apis/official-gui-api/client (library)
   2. react-shared (library; uses apis/official-gui-api/client)
   3. business-cockpit/src/main/webapp (application; uses apis/official-gui-api/client and react-shared)
   4. development/dev-shell (library; uses apis/official-gui-api/client and react-shared)
   5. development/simulation/src/main/webapp (application; uses apis/official-gui-api/client and react-shared and development/dev-shell)

Problems:

1. Open business-cockpit/src/main/webapp/src/app/App.tsx gives
   
   but other files also refering to grommet don't show errors.
2. Another example of the same error is react-shared/src/components/CircleButton.tsx but react-shared/src/components/Badge.tsx is fine
3. Open business-cockpit/src/main/webapp/src/app/Login.tsx gives
   
   which can be solved by adding import "React" which is marked as unused. But this error is not shown in every tsx, only sometimes.
4. Open development/dev-shell/src/dev-shell/DevShellAppContext.tsx gives
   
5. Open development/simulator/src/main/webapp/src/Test/TestForm2/Form.tsx gives
   

All these errors I don't get using Eclipse 2022-09 (4.25.0) using WWW 1.0.0!

But there are other problems I'm facing because I need to stick to an old version of WWW:

1. With WWW 1.0.0 when I open in project business-cockpit /src/main/webapp/src/usertask-app/Main.tsx -> CRTL + mouse click on useFederationModule points to project business-cockpit-parent business-cockpit/src/main/webapp/src/utils/module-federation.ts. But this seems to be fixed in WWW 1.0.2
2. Typically I use the same structure for my applications and often there are files having the same name (e.g. ´App.tsx´). The first time I was facing issues was when I created another project in the same workspace having same file names. Now I used different workspaces for each project but thats always a problem because I often copy/paste code of projects I've done in the past or I'm working in parallel. So I would prefer to open all projects in the same workspace. Maybe this is already fixed as well - I didn't test this again using WWW 1.0.2

Another issue I'm facing but for which no solution may be developed yet: On using Maven all pom.xml files are analysed and it is checked if there is a project in the open projects which implements a given dependency of another project. The effect of this is that I can do CRTL + mouse click on a component and it redirects to the source file of that component instead of the type-definition found in node_modules. An example:

1. business-cockpit/src/main/webapp/package.json has a dependeny @vanillabp/bc-shared@0.0.1-SNAPSHOT
2. react-shared/package.json has name @vanillabp/bc-shared and version 0.0.1-SNAPSHOT
3. in project business-cockpit in file src/main/webapp/src/app/App.tsx do CRTL + mouse click on LoadingIndicator
4. react-shared/dist/components/LoadingIndicator.d.ts is opened which is totally understandable
5. in case of Maven if would open react-shared/src/components/LoadingIndicator.tsx instead which is a better developer experience.

I hope you can reproduce all the thing I reported! Thank you for your support! 😃

By-the-way: The title of the issue may be a little-bit missleading. Should we create another issue for all this or is it OK to stick to this issue?

[mickaelistria]

This example is fairly complicated to reproduce and ideally automate as a test case as it involves unrelated components (m2e, JDT...). Would it be possible to trim it to a plain typescript example?

[stephanpelikan]

As the problems can not be found on every ts or tsx file I don't want to build a random application hoping to get all the errors I find in the project given. Maybe the structure is the reason for those errors? In that case I wouldn't be able to reproduce those errors. As a user of WWW I do not know what causes the errors. I even cannot copy/paste the existing code because as mentioned the applications relies on the libraries part of it and even the libraries rely on other libraries part of it.

I totally understand that it would be easier have a simple test scenario but what I provide is the way people use WWW to develop UIs and the errors are reproducable. I guess if a simple project would bring the same errors you would have found it before releasing 1.0.2 !?

[mickaelistria]

I guess if a simple project would bring the same errors you would have found it before releasing 1.0.2 !?

That's too optimistic, reality is different: most of the main contributors only rarely do typescript development so it's easy for issues to be missed ;)

[kascaks]

I managed to track that down. This worked for me.

change languageId from typescript to typescriptreact in eclipse\plugins\org.eclipse.wildwebdeveloper\plugin.xml for contentType tsx

<contentTypeMapping
  languageId="typescriptreact"
  contentType="org.eclipse.wildwebdeveloper.tsx"
  id="org.eclipse.wildwebdeveloper.jsts">
</contentTypeMapping>

Also I had to delete this folder as somehow it is caching the original value: eclipse\configuration\org.eclipse.core.runtime

[mickaelistria]

@kascaks great! would you mind submitting a PR with this change?

[houston3]

I managed to track that down. This worked for me.

change languageId from typescript to typescriptreact in eclipse\plugins\org.eclipse.wildwebdeveloper\plugin.xml for contentType tsx

<contentTypeMapping
  languageId="typescriptreact"
  contentType="org.eclipse.wildwebdeveloper.tsx"
  id="org.eclipse.wildwebdeveloper.jsts">
</contentTypeMapping>

Also I had to delete this folder as somehow it is caching the original value: eclipse\configuration\org.eclipse.core.runtime

Works for me too.