Issue in transpiling .ts files
raphael10-collab opened this issue · comments
Current behavior
Expected behavior
Steps to reproduce the issue
Issue reproduction repository
Environment
- fork-ts-checker-webpack-plugin: [version from the
package.json] 6.0.1 - typescript: [version from the
package.json] ~4.5.4 - eslint: [version from the
package.json] 5.0.0 - webpack: [version from the
package.json] - os: [e.g. Ubuntu 19.04] Ubuntu 20.04 Desktop
You can reproduce the issue git cloning this simplified repo: https://github.com/raphael10-collab/ForgeTypescriptReactWebpack -> yarn -> yarn start
As described yesterday in Stackoverflow : https://stackoverflow.com/questions/72606205/how-to-compile-all-ts-and-tsx-files-with-webpack-and-tsconfig-json and in Discord Typescript Community : https://discord.com/channels/508357248330760243/985951952116531321/985952149299167283 I'm having issues in transpiling .ts files into .js files.
The issue I'm experiencing is at the crossroad among typescript, webpack, electron-forge ... so I'm may be wrong writing also here, but I would like to understand if my webpack configuration has to be improved regarding the typescript traspiling .
This is my tsconfig.json file :
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Node 16",
"compilerOptions": {
"allowJs": true,
"lib": ["es2021", "dom"],
"module": "commonjs",
"target": "es2021",
"skipLibCheck": true,
"esModuleInterop": true,
"jsx": "react",
"noImplicitAny": false,
"sourceMap": true,
"baseUrl": "./src",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"@app/*": ["app/*"],
"*": ["node_modules/*"]
}
},
"include": ["src/**/*"]
}
Based on what we read here: https://www.typescriptlang.org/tsconfig#include " If a glob pattern doesn’t include a file extension, then only files with supported extensions are included (e.g. .ts, .tsx, and .d.ts by default, with .js and .jsx if allowJs is set to true). "
all .ts files should be compiled
As indicated here: https://github.com/TypeStrong/ts-loader#installation I also specified the extensions in the webpack.config files:
webpack.renderer.config.js :
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
module.exports = {
module: {
rules,
},
plugins: plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
fallback: {
fs: false,
'stream': require.resolve('stream-browserify'),
'buffer': require.resolve('buffer'),
'util': require.resolve('util'),
'assert': require.resolve('assert'),
'http': require.resolve('stream-http'),
'url': require.resolve('url'),
'https': require.resolve('https-browserify'),
'os': require.resolve('os-browserify'),
'path': require.resolve('path-browserify')
},
},
};
webpack.main.config.js :
module.exports = {
/**
* This is the main entry point for your application, it's the first file
* that runs in the main process.
*/
entry: {
main: './src/main/index.ts'
},
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
fallback: {
fs: false,
'stream': require.resolve('stream-browserify'),
'buffer': require.resolve('buffer'),
'util': require.resolve('util'),
'assert': require.resolve('assert'),
'http': require.resolve('stream-http'),
'url': require.resolve('url'),
'https': require.resolve('https-browserify'),
'os': require.resolve('os-browserify'),
'path': require.resolve('path-browserify')
},
},
};
webpack.rules.js :
module.exports = [
// Add support for native node modules
{
// We're specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules\/.+\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
test: /\.ts?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
test: /\.jsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.pcss$/,
type: 'asset',
use: {
loader: 'postcss-loader',
options: {
plugins: [
"postcss-preset-env",
],
},
},
}
];
And this is my package.json file :
{
"name": "playground",
"productName": "Playground",
"version": "1.0.0",
"description": "Playground",
"main": ".webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts,.tsx ."
},
"keywords": [],
"author": "raphy",
"license": "UNLICENSED",
"config": {
"forge": {
"packagerConfig": {
"executableName": "playground"
},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "forgetypescriptreactwebpack"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {
"maintainer": "Raphael Stonehorse"
}
},
{
"name": "@electron-forge/maker-zip"
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
],
"plugins": [
[
"@electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/app/index.html",
"js": "./src/app/renderer.ts",
"preload": {
"js": "./src/main/preload/preload.ts"
},
"name": "main_window"
},
{
"html": "./src/app_A/index_A.html",
"js": "./src/app_A/renderer_A.ts",
"preload": {
"js": "./src/main/preload/preload.ts"
},
"name": "window_type_a"
}
]
}
}
]
]
}
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.17.12",
"@electron-forge/cli": "^6.0.0-beta.63",
"@electron-forge/maker-deb": "^6.0.0-beta.63",
"@electron-forge/maker-flatpak": "^6.0.0-beta.63",
"@electron-forge/maker-rpm": "^6.0.0-beta.63",
"@electron-forge/maker-snap": "^6.0.0-beta.63",
"@electron-forge/maker-squirrel": "^6.0.0-beta.63",
"@electron-forge/maker-zip": "^6.0.0-beta.63",
"@electron-forge/plugin-electronegativity": "^6.0.0-beta.63",
"@electron-forge/plugin-webpack": "6.0.0-beta.63",
"@types/better-sqlite3": "^7.5.0",
"@types/chrome": "^0.0.190",
"@types/lodash": "^4.14.182",
"@types/papaparse": "^5.3.2",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"@vercel/webpack-asset-relocator-loader": "1.7.0",
"babel-loader": "^8.2.5",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.0.0",
"electron": "17",
"electron-extensions": "^7.0.0-beta.3",
"eslint": "^8.0.1",
"eslint-plugin-import": "^2.25.0",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"node-loader": "^2.0.0",
"postcss": "^8.4.14",
"postcss-loader": "^7.0.0",
"style-loader": "^3.0.0",
"ts-loader": "^9.3.0",
"typescript": "~4.5.4"
},
"dependencies": {
"@zendeskgarden/react-tabs": "^8.52.0",
"@zendeskgarden/react-theming": "^8.52.0",
"assert": "^2.0.0",
"better-sqlite3": "^7.5.3",
"better-sqlite3-multiple-ciphers": "^7.5.2",
"buffer": "^6.0.3",
"classnames": "^2.3.1",
"electron-log": "^4.4.7",
"electron-squirrel-startup": "^1.0.0",
"https-browserify": "^1.0.0",
"lodash": "^4.17.21",
"node-ipc": "^11.1.0",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-select": "^5.3.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"styled-components": "^5.3.5",
"url": "^0.11.0",
"util": "^0.12.4",
"uuid": "^8.3.2"
}
}
But I do not see the compiled files of :
(base) raphy@pc:~/Playground/src/main/workers$ ls -lah
total 20K
drwxrwxr-x 2 raphy raphy 4.0K Jun 13 17:18 .
drwxrwxr-x 5 raphy raphy 4.0K Jun 13 17:25 ..
-rw-rw-r-- 1 raphy raphy 298 Jun 12 17:27 server-handlers.ts
-rw-rw-r-- 1 raphy raphy 888 Jun 12 17:39 server.ts
(base) raphy@pc:~/Playground/src/main/workers$
in the corresponding folder :
(base) raphy@pc:~/Playground/.webpack/main$ ls -lah
total 1.5M
drwxrwxr-x 3 raphy raphy 4.0K Jun 13 18:11 .
drwxrwxr-x 6 raphy raphy 4.0K Jun 13 18:11 ..
-rw-rw-r-- 1 raphy raphy 684K Jun 13 18:11 index.js
-rw-rw-r-- 1 raphy raphy 823K Jun 13 18:11 index.js.map
drwxrwxr-x 2 raphy raphy 4.0K Jun 13 18:11 native_modules
(base) raphy@pc:~/Playground/.webpack/main$
What's wrong with my webpack configuration or / and with my ts.config.json file ?
How to make the traspiling work?
That's not how webpack works - webpack is a bundler, which means that it merges together multiple source files. It creates a dependency graph and includes files based on this (so if file is not used, it will not end-up in the webpack output).
If you want to transpile each ts file into corresponding js file, you should use tsc directly :)