How to replace typescript with javascript?

[mietekrmd]

It seems to me that I have done everything necessary to remove TypeScript from the project and replace it with JavaScript. I changed .tsx to .jsx, .ts to .js, converted the components' syntax from TypeScript to JavaScript, added babel-loader, and included the appropriate rule in webpack for loading .js and .jsx files, but something is still not working. Could you take a look at it?

My repo link: https://github.com/mietekrmd/electron-js

Errors below:

An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: asset app_window/preload.js 1.74 MiB [emitted] (name: app_window)
runtime modules 28.7 KiB 14 modules
modules by path ./node_modules/.pnpm/core-js-pure@3.33.3/node_modules/core-js-pure/ 131 KiB 124 modules
modules by path ./node_modules/.pnpm/@pmmmwh+react-refresh-webpack-plugin@0.5.11_react-refresh@0...(truncated) 53 KiB 23 modules
modules by path ./node_modules/.pnpm/webpack-dev-server@4.15.1_debug@4.3.4_webpack@5.89.0/node_m...(truncated) 78.4 KiB 16 modules
modules by path ./node_modules/.pnpm/webpack@5.89.0/node_modules/webpack/hot/*.js 5.34 KiB 4 modules
modules by path ./node_modules/.pnpm/html-entities@2.4.0/node_modules/html-entities/lib/*.js 115 KiB
  ./node_modules/.pnpm/html-entities@2.4.0/node_modules/html-entities/lib/index.js 6.94 KiB [built] [code generated]
  + 3 modules
modules by path ./node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/ 22.5 KiB
  ./node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/runtime.js 221 bytes [built] [code generated]
  ./node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/cjs/react-r...(truncated) 22.3 KiB [built] [code generated]
modules by path ./misc/window/*.js 4.15 KiB
  ./misc/window/windowPreload.js 1.23 KiB [built] [code generated]
  ./misc/window/titlebarContext.js 2.92 KiB [built] [code generated]
+ 6 modules
webpack 5.89.0 compiled successfully in 6809 ms

assets by path native_modules/dist/locales/*.pak 34.7 MiB 55 assets
assets by path native_modules/dist/*.dll 21 MiB
  asset native_modules/dist/libGLESv2.dll 7.26 MiB [emitted] (auxiliary name: app_window)
  + 5 assets
assets by path native_modules/dist/*.pak 5.55 MiB
  asset native_modules/dist/resources.pak 5.23 MiB [emitted] (auxiliary name: app_window)
  + 2 assets
assets by path app_window/ 5.7 MiB
  asset app_window/index.js 5.7 MiB [emitted] (name: app_window)
  asset app_window/index.html 209 bytes [emitted]
assets by path native_modules/dist/*.bin 873 KiB
  asset native_modules/dist/v8_context_snapshot.bin 612 KiB [emitted] (auxiliary name: app_window)
  asset native_modules/dist/snapshot_blob.bin 261 KiB [emitted] (auxiliary name: app_window)
+ 9 assets
runtime modules 28.8 KiB 16 modules
modules by path ./node_modules/.pnpm/ 1.41 MiB 198 modules
modules by path ./misc/window/ 38.6 KiB
  modules by path ./misc/window/components/ 31.1 KiB 6 modules
  modules by path ./misc/window/*.js 7.47 KiB 3 modules
asset modules 22.9 KiB (javascript) 8.14 KiB (asset)
  ./assets/images/logo.png 4.53 KiB [built] [code generated]
  ./assets/icons/chrome.png 1.78 KiB [built] [code generated]
  ./assets/icons/react.png 1.41 KiB [built] [code generated]
  + 6 modules
modules by path ./src/renderer/ 40.7 KiB
  modules by path ./src/renderer/components/*.jsx 10 KiB 2 modules
  modules by path ./src/renderer/components/*.scss 29.1 KiB 2 modules
  ./src/renderer/appRenderer.jsx 1.58 KiB [built] [code generated]

WARNING in ./node_modules/.pnpm/electron@27.1.2/node_modules/electron/index.js
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/electron@27.1.2/node_modules/electron/dist/LICENSE"
 * "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/electron@27.1.2/node_modules/electron/dist/LICENSES.chromium.html"
 * "C:/Users/user/Downloads/folder/electron-react-webpack-typescript-2023-master/node_modules/.pnpm/electron@27.1.2/node_modules/electron/dist/chrome_100_percent.pak"
 * and more ...
 @ ./misc/window/titlebarContext.js 15:0-39 18:4-22 21:4-22 24:4-22 27:4-22 30:4-22 33:4-22 36:4-22 39:4-22 42:4-22 45:4-22 48:4-22 51:4-22 54:4-22 57:4-22 60:4-22 63:4-22 66:4-22 69:4-22
 @ ./misc/window/titlebarContextApi.js 15:0-58
 @ ./misc/window/components/Titlebar.jsx 25:0-44 108:12-19
 @ ./misc/window/components/WindowFrame.jsx 16:0-34 41:39-47
 @ ./src/renderer/appRenderer.jsx 5:0-66 12:43-54

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/.pnpm/electron@27.1.2/node_modules/electron/index.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron'
resolve 'fs' in 'C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron'
  Parsed request is a module
  using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules
        single file module
          using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\package.json (relative path: ./node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules\fs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules\fs.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules\fs.jsx doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules\fs.css doesn't exist
        C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\electron\node_modules\fs doesn't exist
      C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules
        single file module
          using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/.pnpm/electron@27.1.2/node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\fs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\fs.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\fs.jsx doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\fs.css doesn't exist
        C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\electron@27.1.2\node_modules\fs doesn't exist
      looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules
        single file module
          using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/.pnpm/node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.jsx doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs.css doesn't exist
        C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\node_modules\fs doesn't exist
      C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules
        single file module
          using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.jsx doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.css doesn't exist
        existing directory C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs
          using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: .)
            using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\package.json (relative path: ./node_modules/fs)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs is not a file
              .js
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.jsx doesn't exist
              .css
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs.css doesn't exist
              as directory
                existing directory C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs
                  using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: .)
                    use ./index.js from main in package.json
                      using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: ./index.js)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.js doesn't exist
                        .jsx
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.jsx doesn't exist
                        .css
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js.css doesn't exist
                        as directory
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
                    using path: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index
                      using description file: C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.js doesn't exist
                        .jsx
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.jsx doesn't exist
                        .css
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\fs\index.css doesn't exist
      C:\Users\user\Downloads\folder\node_modules doesn't exist or is not a directory
      C:\Users\user\Downloads\node_modules doesn't exist or is not a directory
      C:\Users\user\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
 @ ./misc/window/titlebarContext.js 15:0-39 18:4-22 21:4-22 24:4-22 27:4-22 30:4-22 33:4-22 36:4-22 39:4-22 42:4-22 45:4-22 48:4-22 51:4-22 54:4-22 57:4-22 60:4-22 63:4-22 66:4-22 69:4-22
 @ ./misc/window/titlebarContextApi.js 15:0-58
 @ ./misc/window/components/Titlebar.jsx 25:0-44 108:12-19
 @ ./misc/window/components/WindowFrame.jsx 16:0-34 41:39-47
 @ ./src/renderer/appRenderer.jsx 5:0-66 12:43-54

webpack 5.89.0 compiled with 1 error and 1 warning in 8329 ms
at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\@electron-forge+plugin-webpack@7.1.0\node_modules\@electron-forge\plugin-webpack\dist\WebpackPlugin.js:209:43
    at Hook.eval [as call] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\Hook.js:14:14)
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\MultiCompiler.js:97:22
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Watching.js:299:28)
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Watching.js:213:21
    at Compiler.emitRecords (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Compiler.js:919:5)
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Watching.js:191:22
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack@5.89.0\node_modules\webpack\lib\Compiler.js:882:27
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:3522:9)
    at eval (eval at create (C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\tapable@2.2.1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\webpack-dev-middleware@5.3.3_webpack@5.89.0\node_modules\webpack-dev-middleware\dist\utils\setupWriteToDisk.js:101:20
    at C:\Users\user\Downloads\folder\electron-react-webpack-typescript-2023-master\node_modules\.pnpm\graceful-fs@4.2.11\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:192:23)

[codesbiome]

Hello @mietekrmd, thank you for reaching out. Been taking a look at the (forked) repository you mentioned, following changes can be used in these files:

---

misc\window\components\Titlebar.jsx

Replace :

const activeMenuIndex = useRef<number | null>(null);

with:

const activeMenuIndex = useRef(null);

---

misc\window\components\WindowFrame.jsx

Replace :

const itsRef = useRef<HTMLDivElement>(null);

With:

const itsRef = useRef(null);

---

misc\window\titlebarContextApi.js

Remove unnecessary import:

import { TitlebarContextApi } from './titlebarContext.js';

---

tools\webpack\webpack.plugins.js

Remove unnecessary plugin import & declaration:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

new ForkTsCheckerWebpackPlugin(),

[mietekrmd]

Thank you for noticing those incorrect lines, as I wasn't able to myself.

[codesbiome]

You're welcome! With using "javascript only" approach to convert most parts of this project, you're already done well 👍🏻

Have a nice Christmas Eve!

[codesbiome]

Also, there is already a repo for javascript version based on this project if someone needs: https://github.com/codesbiome/electron-react-webpack-boilerplate

[mietekrmd]

Have a wonderful Christmas Eve as well!

Also, there is already a repo for javascript version based on this project if someone needs: https://github.com/codesbiome/electron-react-webpack-boilerplate

I didn't notice earlier. In any case, thanks to your suggestions, everything is now working properly on my end.