Electron 28 breaks build: ERR_UNKNOWN_FILE_EXTENSION – Unknown file extension ".ts" for … #3568
Comments
|
@slhck same here. Did you find a solution meanwhile? |
|
No, I don't know enough about the internals... I will post a solution should I find one, but in the meantime I'll stay on the last 27 release. |
|
So the only thing I know is that the error comes from Electron itself, but I can't find any issue with the Electron package referencing that error. It's as if it wasn't passed a compiled JS file, instead trying to load a TS file, and, obviously, failing. So perhaps it's the webpack step that doesn't finish properly? I would think that this is due to the underlying @amilajack Any ideas? |
|
Hope this will help somebody until the fix is released, because I've spent more time on this than I expected... This is how I managed to configure the boilerplate with Electron 28 Prerequisites: Dependencies: Steps:
|
|
Thanks for providing these steps. When I apply them to this repo, I get: Maybe you are running on an older version of Node? |
|
That said, applying your suggested changes I still get: |
|
Yes, as I specified before, I'm using older version of Node.js - Also I noticed that your |
|
I can confirm that your suggestions work with older versions of Node, where one has to use And once I use Curiously, when I switch to Node v18.19.0, and use the old Electron version (v26.2.1) as shipped with this repo, and I try to use the I am a bit lost here; I don't know enough about Node's internals, e.g. how hooks work. |
|
Same issue here. Have to stay at v27 for now |
|
@slhck, it looks like If you want to test it and let me know if that resolves your issues, I could open a PR on this repo with the changes. |
|
@dsanders11 Awesome, that works great! I didn't know about I should add that it prints a warning:
Would be great if you could open a PR! |
|
The fix with esbuild-register is not working for me. I am using typeorm and there is an error with decorators not being supported yet. I am stuck with electron 27 for now. |
|
Following the great contribution of dsanders11 I had to change more things in the scripts section of the "package.json" file to get everything to work correctly: |
|
Be aware that I found some inconsistencies with how So, at the moment I cannot recommend using Note that this only applies to library versions before ES2022. So the change made here a few months ago should make |
That was an oversight by me -
That sounds like a potential issue to open upstream on Given that, not sure switching to I don't have time to look into the above, but that might be a better long-term solution for the ESM issue starting with E28 since it would sidestep the upstream |
|
Thanks for the reference. Indeed the breakage I am observing has to do with the class field semantics. So it's not a bug. I agree that simply using webpack to trigger transpilation would be the best way going forward. |
|
Hi, First, thanks all for sharing your experience for setuping this repository with the new electron version. Is there any plan to merge/PR something on the main branch on this project so everyone can have a stable, battle tested config up to date? |
|
No, there is no reliable solution. The best path forward, it seems, would be this:
I am not sure when I will have time to look into this. Unfortunately no word from the maintainer yet, either. (I am a bit tired of providing PRs without an indication of them being merged … the last commit to this repo was 5 months ago.) |
|
Thanks for the insight. I hope you will be able to find some time to share a solution. Are there any other repo that provide end to end integration like this one? I hope the maintainer will react on this topic quickly as the 26 version will be unsupported soon and 27 in few months. |
|
@slhck |
|
I ran into this issue yesterday and I was able to get it working with the following changes:
Here is what the updated version of these scripts look like:
I haven't exhaustively checked for the side-effects but the development environment is working fine i.e. the files are getting transpiled and on code change, the latest changes are loaded automatically. A few points to note:
My EnvironmentNode version : v20.5.0 I hope this helps developers who stumble onto this thread in future. |
|
Hey, I managed to get it working with Electron 28 using "scripts": {
"build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
"build:dll": "cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.ts",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
"postinstall": "node -r esbuild-register .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
"lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
"package": "node -r esbuild-register ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never && npm run build:dll",
"start": "node -r esbuild-register ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
"start:main": "cross-env NODE_ENV=development NODE_OPTIONS=\"--loader esbuild-register/loader -r esbuild-register\" electronmon .",
"start:preload": "cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
"test": "jest",
"publish": "npm run build && electron-builder -c.win.certificateSha1=842a817a51e2a1d360fcd62f54bf5f9193e919e1 --publish always --win --x64"
},
|
Because One more thing, it seems that node will no longer support the use of custom ESM Loader(you will get this warning):
As mentioned here, after
"start:main": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.dev.ts && electronmon .",(If you care about the time-consuming compilation, you can use I've tried this solution myself and everything works fine. But when I fully migrated to So eventually I started to give up (This comment does not in any way imply that electron-react-boilerplate is obsolete. In fact, all this has nothing to do with |
|
Thanks for your comment!
That sounds reasonable, although it was far from obvious to me how that would look like. I played around a little, and what I did was the following. Create a file /**
* Webpack config for production electron main process
*/
import path from 'path';
import webpack from 'webpack';
import { merge } from 'webpack-merge';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import baseConfig from './webpack.config.base';
import webpackPaths from './webpack.paths';
import checkNodeEnv from '../scripts/check-node-env';
import { getContentScriptEntries } from './getContentScriptEntries';
// When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
// at the dev webpack config is not accidentally run in a production environment
if (process.env.NODE_ENV === 'production') {
checkNodeEnv('development');
}
const configuration: webpack.Configuration = {
devtool: 'inline-source-map',
mode: 'development',
target: 'electron-main',
entry: {
...getContentScriptEntries(),
main: path.join(webpackPaths.srcMainPath, 'main.ts'),
// preload: path.join(webpackPaths.srcMainPath, 'preload.ts'),
// TODO merge this with the preload-file ...
},
output: {
path: webpackPaths.dllPath,
filename: '[name].bundle.dev.js',
library: {
type: 'umd',
},
},
plugins: [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
new BundleAnalyzerPlugin({
analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
analyzerPort: 8888,
}),
new webpack.DefinePlugin({
'process.type': '"browser"',
}),
],
/**
* Disables webpack processing of __dirname and __filename.
* If you run the bundle in node.js it falls back to these values of node.js.
* https://github.com/webpack/webpack/issues/2010
*/
node: {
__dirname: false,
__filename: false,
},
};
export default merge(baseConfig, configuration);Now change diff --git a/package.json b/package.json
index 893ca68..d3dbe0f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"version": "0.9.0",
- "main": "./src/main/main.ts",
+ "main": "./.erb/dll/main.bundle.dev.js",
"private": true,
"scripts": {
"build": "concurrently \"yarn run build:main\" \"yarn run build:renderer\"",
@@ -24,7 +24,7 @@
"package:all": "yarn run prepackage && yarn run package:linux && yarn run package:mac && yarn run package:win",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
"start": "ts-node ./.erb/scripts/check-port-in-use.js && yarn run start:renderer",
- "start:main": "cross-env NODE_ENV=development electronmon --inspect=5858 -r ts-node/register/transpile-only .",
+ "start:main": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.dev.ts && electronmon .",
"start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
"start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
"test": "yarn run test:unit && yarn run test:e2e",I also had to change a few places in my application that looked like this — due to outputting the bundle in diff --git a/src/main/helpers/paths.ts b/src/main/helpers/paths.ts
index 80b9b34..db33e96 100644
--- a/src/main/helpers/paths.ts
+++ b/src/main/helpers/paths.ts
@@ -3,7 +3,7 @@ import path from 'path';
export const RESOURCES_PATH = app.isPackaged
? path.join(process.resourcesPath, 'assets')
- : path.join(__dirname, '../../../assets');
+ : path.join(__dirname, '../../assets');
export function getAssetPath(...paths: string[]) {
return path.join(RESOURCES_PATH, ...paths);This works, even with hot-reloading, and I have had no issues launching the app with Electron 29 and Node v18.19.0.
The only thing that irks me is that there is no official comment from the maintainers yet. The package is lagging behind and v27 will be unsupported as of April 16, 2024. Of course, I understand it's free, open-source software and there's no guarantee to receive any support whatsoever. But given the various solutions proposed here, an official comment regarding what would be the recommended solution would be good. |
|
@slhck first, thanks for working on this. I tried your solution in your last post, but it's not working for me because of a native dependency (keytar) of my Electron app. At start I get : And it cannot be installed in main package, the dependency is only installed in the |
|
I am thinking about making the jump to electron's new official tool for a lot of this Does anyone see potential issues with converting to a electron-forge + webpackge + typescript setup? If not, I will probably give it a try soon. |
|
For what is worth, I did that migration recently, to the |
thanks for the push! I used your repo to help get things working... thanks. Also my dev environment feels much quickier and more snappy. For everyone else, I'll tag my PR here so y'all can see the file changes |
Your solution worked for me too. The only thing I want to adopt is to make a hot reload of
I also have a native dependency ( As you see, the boilerplate already has a script: https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/.erb/scripts/link-modules.ts that links So, the following changes worked for me:
import fs from 'fs';
import webpackPaths from '../configs/webpack.paths';
const { srcNodeModulesPath, appNodeModulesPath, erbNodeModulesPath } = webpackPaths;
if (!fs.existsSync(srcNodeModulesPath) && fs.existsSync(appNodeModulesPath)) {
fs.symlinkSync(appNodeModulesPath, srcNodeModulesPath, 'junction');
}
if (!fs.existsSync(erbNodeModulesPath) && fs.existsSync(appNodeModulesPath)) {
fs.symlinkSync(appNodeModulesPath, erbNodeModulesPath, 'junction');
}
const path = require('path');
const rootPath = path.join(__dirname, '../..');
const erbPath = path.join(__dirname, '..');
const erbNodeModulesPath = path.join(erbPath, 'node_modules');
const dllPath = path.join(__dirname, '../dll');
const srcPath = path.join(rootPath, 'src');
const srcMainPath = path.join(srcPath, 'main');
const srcRendererPath = path.join(srcPath, 'renderer');
const releasePath = path.join(rootPath, 'release');
const appPath = path.join(releasePath, 'app');
const appPackagePath = path.join(appPath, 'package.json');
const appNodeModulesPath = path.join(appPath, 'node_modules');
const srcNodeModulesPath = path.join(srcPath, 'node_modules');
const distPath = path.join(appPath, 'dist');
const distMainPath = path.join(distPath, 'main');
const distRendererPath = path.join(distPath, 'renderer');
const buildPath = path.join(releasePath, 'build');
export default {
rootPath,
erbNodeModulesPath,
dllPath,
srcPath,
srcMainPath,
srcRendererPath,
releasePath,
appPath,
appPackagePath,
appNodeModulesPath,
srcNodeModulesPath,
distPath,
distMainPath,
distRendererPath,
buildPath,
};I tried to play around with Also tried to play around with The bad thing is that there's no good solution at the moment, it is time to invent your own wheels! 🚴 |
|
fyi, if it helps, here is my PR NiceNode/nice-node#536 I agree, it does take a week+ to fully migrate. I suggest wait as long as you can until you have to switch. |
@ifree92 You can check out the documentation here for support for the Or you can use tsup as the build tool to compile your code ( Hope it helps. 😄 |
@ifree92 Did you found how to fix this? It reloads renderer process only, no matter what main/ or renderer/ file was changed |
This works well for me.Thanks, |
|
I don't have that 'getContentScriptEntries' file, and I can find no reference to it on google, where are people getting it from? |
Hey, I managed to reload main process too. I'm sure it's not the best solution but at least it works for me. I run webpack in watch mode, continuously monitoring source files for changes and re-bundling the output. @@ -24,7 +24,7 @@
"package:all": "yarn run prepackage && yarn run package:linux && yarn run package:mac && yarn run package:win",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
"start": "ts-node ./.erb/scripts/check-port-in-use.js && yarn run start:renderer",
- "start:main": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.dev.ts && electronmon .",
+ "start:main": "concurrently -k \"cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --watch --config ./.erb/configs/webpack.config.main.dev.ts\" \"electronmon .\"",
"start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
"start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
"test": "yarn run test:unit && yarn run test:e2e",And update electronmon pattern to check bundle "electronmon": {
"patterns": [
"!**/**",
- "src/main/**"
+ "src/main/**",
+ ".erb/dll/**"
],
"logLevel": "quiet"
}I'm still investigating a better way to do it. Open to any suggestions about it. |
|
Thanks @Maks19, that worked great for me! |
Can confirm this PR working for me @Maks19 using Node 20 and Electron 31.3.0 |
…3633) * update Electron to the latest version * update start script and entry point to make them usable for the latest Electron version * update comment in webpack config * refactor: cleanup link-modules conditions * fix: bump deps --------- Co-authored-by: Maksym Abramian <[email protected]> Co-authored-by: Amila Welihinda <[email protected]>
|
Given that the PR was merged, I'm going to close this issue. |
|
If I include build:dll
whitout this package it works |
|
I get an error when running the newest version: [webpack-dev-server] Project is running at: Has this to do with the new main bundle scripts? BR Peter |
and others
Prerequisites
mainbranchDEBUG_PROD=true npm run build && npm startExpected Behavior
Updating electron should make the app start.
Current Behavior
I updated Electron to 28.0.0, then ran
npm install. Now:Steps to Reproduce
See above.
Possible Solution (Not obligatory)
Not sure what the issue is. I know that Node v18.19.0 broke
ts-nodewith a similar error message, see TypeStrong/ts-node#1997Latest known good version for Electron is 27.1.3.
Context
N/A
Your Environment
The text was updated successfully, but these errors were encountered: