Can't use decorators in the main process file (`background.ts`)

[garyking]

I'm trying to use Nextron to create an Electron app, where I import TypeORM files into background.ts, which is the main process file for Electron. TypeORM uses TypeScript decorators, which are experimental.

When importing TypeORM files into /api pages, the decorators compile fine, since I have the following as my .babelrc file:

{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ]
}

However, when I import TypeORM files in the background.ts main process file, I get the following error:

[
  './renderer/database/entities/Video.ts 10:0\n' +
    "Module parse failed: Unexpected character '@' (10:0)\n" +
    'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
    "| } from 'typeorm';\n" +
    '| \n' +
    "> @Entity('videos')\n" +
    '| export default class Video extends BaseEntity {\n'
]

Clearly, the @ in this error refers to the @Entity decorator.

How can I make Electron (via Nextron), be able to parse TypeScript decorators?

[garyking]

Okay, so I figured it out with the following nextron.config.js file in the project root dir:

const path = require('path');

const cwd = process.cwd();

module.exports = {
  webpack: (defaultConfig) =>
    Object.assign(defaultConfig, {
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                presets: ['@babel/preset-typescript'],
                plugins: [
                  ['@babel/plugin-proposal-decorators', { legacy: true }],
                  ['@babel/plugin-proposal-class-properties', { loose: true }],
                ],
              },
            },
            exclude: [/node_modules/, path.join(cwd, 'renderer')],
          },
        ],
      },
    }),
};

[lacymorrow]

Thanks for leaving these comments @garyking! This will hopefully help someone else and there may be some room for improvements to the Typescript handling.

[codetheweb]

I'm using the same stack, but had to add an additional plugin to nextron.config.js:

const path = require('path');

const cwd = process.cwd();

module.exports = {
  webpack: (defaultConfig) =>
    Object.assign(defaultConfig, {
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                presets: ['@babel/preset-typescript'],
                plugins: [
                  "babel-plugin-transform-typescript-metadata",
                  ['@babel/plugin-proposal-decorators', { legacy: true }],
                  ['@babel/plugin-proposal-class-properties', { loose: true }],
                ],
              },
            },
            exclude: [/node_modules/, path.join(cwd, 'renderer')],
          },
        ],
      },
    }),
};

[airtonix]

this doesn't work anymore