Migrate off neutrino to webpack

[michellemounde]

Fixes #3039

[gabrielBusta]

@michellemounde I fixed the issues with the webpack config. The JSON dump eliminated the test: selectors on the module rules. Causing issues with the loaders. Also, the evaluated paths to the modules needed to be replaced with relative __dirname paths and plain module names.

[gabrielBusta]

For the record, I generated a starting point for this configuration using the hack below to dump the configuration neutrino is generating when webpack compiles the application. That generated a decent starting point.

diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index c0e8e719..c2e11463 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -3,4 +3,25 @@
 // Neutrino's inspect feature can be used to view/export the generated configuration.
 const neutrino = require('neutrino');

+const fs = require('fs');
+const path = require('path');
+
+// Generate webpack configuration using Neutrino
+const webpackConfig = neutrino().webpack();
+
+// Convert the configuration object to a JSON string
+const configString = JSON.stringify(webpackConfig, null, 2);
+
+// Specify the path and filename of the output file
+const outputFile = path.join(__dirname, 'webpack.config.output.json');
+
+// Write the configuration string to the file
+fs.writeFile(outputFile, configString, (err) => {
+  if (err) {
+    console.error('Error writing webpack configuration to file:', err);
+  } else {
+    console.log('Webpack configuration successfully written to:', outputFile);
+  }
+});
+
 module.exports = neutrino().webpack();

That generated JSON data was copy-pasted into webpack.config.js and formatted as JavaScript in a text editor. There was the above mentioned path/loader issues with it. In addition, there was another issue with the plugins: key. The JSON data there had to be replaced with instances of Plugin objects. I found the object types using this other webpack.config.js hack:

const neutrino = require('neutrino');
const fs = require('fs');
const path = require('path');

// Generate webpack configuration using Neutrino
const webpackConfig = neutrino().webpack();

// Extract types of plugins
const pluginTypes = webpackConfig.plugins.map(plugin => plugin.constructor.name);

// Convert the types array to a JSON string
const typesString = JSON.stringify(pluginTypes, null, 2);

// Specify the path and filename for the plugins types output file
const pluginsTypesOutputFile = path.join(__dirname, 'webpack.plugins.types.json');

// Write the types string to the file
fs.writeFile(pluginsTypesOutputFile, typesString, (err) => {
  if (err) {
    console.error('Error writing webpack plugins types to file:', err);
  } else {
    console.log('Webpack plugins types successfully written to:', pluginsTypesOutputFile);
  }
});

module.exports = webpackConfig;

In addition to that, I made adjustments to make the configuration equivalent to the one in ui/.neutrinorc.js (for example I copied this default environment setting behavior.)

@michellemounde the next step is to give the same treatment to the other configuration files relying on neutrino. That is .eslintrc.js and jest.config.js

Then we can try uninstalling packages like neutrino, @neutrinojs/jest, and @neutrinojs/react

Once we do that we can remove .neutrinorc.js and any references to it (eg. in Dockerfiles)

[gabrielBusta]

We should also remove @mozilla-frontend-infra/react-lint (which assumes we are running a neutrino project)

[michellemounde]

For reference, I got the jest config by dumping the configuration object being created by Neutrino, similar to the webpack config dump in the comment above. Then I modified the paths to be relative.

[gabrielBusta]

Thanks @michellemounde lgtm

[gabrielBusta]

Here goes nothing :)

[michellemounde]

😂

[gabrielBusta]

This was followed by #3103