CRUNCHParadise/tgui/rspack.config-dev.cjs at master · CRUNCH-Borg/CRUNCHParadise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
const { defineConfig } = require('@rspack/cli');
const { rspack } = require('@rspack/core');

const createStats = (verbose) => ({
  assets: verbose,
  builtAt: verbose,
  cached: false,
  children: false,
  chunks: false,
  colors: true,
  entrypoints: true,
  hash: false,
  modules: false,
  performance: false,
  timings: verbose,
  version: verbose,
});

/**
 * 04/25/2025
 * There is a bug in rspack, possibly only ours, with the experimental css
 * feature that throws an error in tgui-dev. This prevents hot reloading from
 * working properly and there doesn't seem to be any way to fix it.
 *
 * This config exists to switch to the old css loader during development.
 *
 * `TypeError: Cannot read properties of null (reading 'removeChild')`
 */
module.exports = (env = {}, argv) => {
  /** @type {import('@rspack/core').Configuration} */
  const config = defineConfig({
    cache: false,
    experiments: undefined,
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.([tj]s(x)?|cjs)$/,
          use: [
            {
              loader: 'builtin:swc-loader',
              options: {
                isModule: 'unknown',
                jsc: {
                  parser: {
                    syntax: 'typescript',
                    tsx: true,
                  },
                  transform: {
                    react: {
                      runtime: 'automatic',
                    },
                  },
                },
              },
            },
          ],
          type: 'javascript/auto',
        },
        {
          test: /\.(s)?css$/,
          use: [
            {
              loader: rspack.CssExtractRspackPlugin.loader,
            },
            {
              loader: require.resolve('css-loader'),
            },
            {
              loader: require.resolve('sass-loader'),
              options: {
                api: 'modern-compiler',
                implementation: 'sass-embedded',
              },
            },
          ],
          type: 'javascript/auto',
        },
        {
          test: /\.(png|jpg)$/,
          type: 'asset/resource',
        },
        {
          test: /\.svg$/,
          oneOf: [
            {
              issuer: /\.(s)?css$/,
              type: 'asset/inline',
            },
            {
              type: 'asset/resource',
            },
          ],
        },
      ],
    },
    plugins: [
      new rspack.EnvironmentPlugin({
        NODE_ENV: 'development',
        WEBPACK_HMR_ENABLED: env.WEBPACK_HMR_ENABLED || argv.hot || false,
        DEV_SERVER_IP: env.DEV_SERVER_IP || null,
      }),
      new rspack.CssExtractRspackPlugin({
        filename: '[name].bundle.css',
        chunkFilename: '[name].bundle.css',
      }),
    ],
  });
  config.devtool = 'cheap-module-source-map';
  config.devServer = {
    progress: false,
    quiet: false,
    noInfo: false,
    clientLogLevel: 'silent',
    stats: createStats(false),
  };

  return config;
};