Plugin can't resolve some functions when working with electron (typescript)

[Treverix]

The following screenshot shows a case where the plugin fails to find dependencies. This is, to be fair a nasty special case.

Here I use svelte for electron browser windows. It's like usual scripts, only that we need to require the electron libraries that we need on the client side scipts. This require is not the common NodeJS require but an electron require function that is placed on windows. The syntax though looks exactly like commonjs.

Now when we import a svelte file on the main script (App.ts), it works fine and the plugin understands the required ipcRenderer function. But it fails after that level. For every svelte file imported by any other svelte file, it does not work anymore (see screenshot).

There is a simple workaround: when we just import all svelte files on App.ts also, the errors disappear from the editors.

App.ts

import App from './App.svelte';

// import it here to solve the 'error' on that component
// import ImportedComponent from './ImportedComponent.svelte';

export default new App({target: document.body});

App.svelte

<script lang:ts>
    const {ipcRenderer} = require('electron');  // this require is in fact windows.require, a function placed on windows by electron
    import ImportedComponent from './ImportedComponent.svelte';

    // works at this level
    ipcRenderer.invoke('some-channel');
</script>

<ImportedComponent/>

ImportedComponent.svelte

<script lang="ts">
  const {ipcRenderer} = require('electron');  // this require is in fact windows.require, a function placed on windows by electron

  // shows an error here although it works
  ipcRenderer.invoke('some-channel');

</script>

Environment

Webstorm: 2021.1.2 OS: Windows 10 Typescript: 4.3.2 Svelte: 3.38.2

[r00t3g]

@Treverix does the same happen if you use it like this? I don't have such an issue...

import { ipcRenderer } from 'electron/renderer';

According to Electron's type declarations, the ipcRendered is located under the renderer namespace:

[Treverix]

Yes - it does. Nothing changes. I still have that error reported on the editor.

And it's not limited to the electron library and independent from import or require:

Applying the workaround removes all three errors and it works as expected:

[Treverix]

@r00t3g BTW - when I import ipcRenderer from electron/renderer then webstorm compiles and rollup does not crash on the build - but it fails at runtime with an error on the devtools console: "ReferenceError: renderer is not defined"

I remember that I always failed 'importing' from electron and therefore I use require where needed which just works...

But that's out of scope for this ticket. Just for info :)

[Treverix]

Update on the workaround: it seems that the plugin currently requires the svelte file being imported by any typescript file. It doesn't even have to be a script that is used in the code, any does. So for the time being, I simply drop in some dummy typescript file that imports those svelte files and is not used elsewhere, like

dummy-imports.ts

import './ImportedComponent.svelte';
import './app/components/SomeOtherComponent.svelte';

[tomblachut]

plugin currently requires the svelte file being imported by any typescript file.

That seems to be the case. Apologies, I'm not sure but it looks like a regression.

[Treverix]

Probably a duplicate of/linked to https://youtrack.jetbrains.com/issue/WEB-51050

I had the same issue with arrays also and adding the files to my dummy-imports.ts as a workaround also solved it.

[tomblachut]

Should be fixed at the same time as every recent TS-related ticked (https://youtrack.jetbrains.com/issue/WEB-50851)

[tomblachut]

Hi @Treverix , could you check if this not-so-secret-anymore attachment fixes the problem? (2021.2 required) svelte-intellij-0.21.0-alpha.zip

(same file as in #222)

[tomblachut]

No response. Should work already in 2023.2. If the issue still persist please open another issue on YouTrack.