file-loader and url-loader are deprecated

[andrealit]

Describe the bug
file-loader and url-loader are deprecated; per notes in Webpack v6 Asset Modules documentation. Therefore, to mitigate any future issues we need to switch over to Asset Modules within Synectic.

This issue has appeared because using css-loader in conjunction with Webpack v6 results in new URL(...) syntax being generated which requires the use of Asset Modules for handling type: 'asset' on all calls to url(). Otherwise, errors are thrown on compilation. Additionally, warnings have begun to appear whenever related packages are updated via yarn.

Parts that need to be addressed:

• Remove url-loader dependency
• Remove file-loader dependency

Relevant issues/PR being tracked for resolution:

• Remove file-loader from webpack-resolver ajaxorg/ace-builds#221
• Add esm resolver for bundlers ajaxorg/ace#5070
• Top-level ESM support for Electron applications #659
• Vite conveyor migration #1307

Versions (please complete the following information):

• OS: MacOS, Windows, Linux
• Synectic Version: 1.0.0-beta

Additional context
Found in #479.

[nelsonni]

Current usage of file-loader is in webpack.rules.js:

...
{
    test: /\.(png|jpe?g|gif|svg|ico|icns)$/i,
    use: [{
      loader: 'file-loader',
      options: {
        // Electron-Forge requires these options for packaging static assets with correct paths, solution found here:
        // https://github.com/electron-userland/electron-forge/issues/1196
        name: '[path][name].[ext]',
        publicPath: '..', // move up from 'main_window'
        context: 'src' // set relative working folder to src
      }
    }]
  }

[nelsonni]

#500 switches the webpack.rules.js configuration to use asset modules, but does not remove the file-loader dependency since ace-builds/webpack-resolver still requires it for dynamically loading language mode files in the Editor.

[nelsonni]

ajaxorg/ace#4744 includes a suggestion to switch from:

ace.config.setModuleUrl('ace/mode/javascript_worker', require('file-loader?esModule=false!./src-noconflict/worker-javascript.js'))

to:

ace.config.setModuleUrl('ace/mode/javascript_worker', new URL('ace-builds/src-noconflict/worker-javascript.js', import.meta.url))

However, this format switch would only be useful in setupTests.ts, where we explicitly set the paths for dynamically loading modes and themes. The other occurrences (in Diff.tsx and Editor.tsx) rely on importing the ace-builds/webpack-resolver and allowing the file-loader module to handle copying over the mode and theme files into the build target directory so that they are available for dynamic loading at runtime.

[nelsonni]

We can resolve this issue once ajaxorg/ace-builds#221 is merged and pulled into securingsincity/react-ace, after which we will no longer have any dependencies on file-loader.

[nelsonni]

Due to the inclusion of ESM loaders via ajaxorg/ace#5070, this issue is also likely dependent on #659. Additionally, we should investigate whether the samples provided in https://github.com/mkslanc/ace-samples are helpful for updating our Webpack config files to be compatible with ESM loading through ace, ace-builds, and/or react-ace.