fix(app): display app version again (#14844)

When we switched to vite, we had to switch all the stuff we'd been
injecting at pack time via webpack environment/define plugins to vite's
`define` config functionality. The biggest thing we specify that way is
the app version, which is used across the stack for display and for
logic.

In the commit that switched to vite, we added that injection for the
app-shell vite configs but did not add it for the app vite configs. That
meant that at runtime, the version value was undefined, which breaks
robot update notifications and causes the app version in the general
settings tab to not display (it also makes the logo wrong on internal
releases but that's a bit less important).

The fix is to inject the version into the app build again. This is made
a little more complicated because if you're doing stuff to the app vite
config, it has to work in both the vite devserver and the vite offline
packaging environments, and the vite devserver doesn't allow commonjs,
and the git-version script that gives us the version is commonjs. For
the purposes of vite's devserver, "doesn't work with cjs" actually just
means "doesn't support require()", so you can use a hybrid syntax that
uses import-statements but still module.export instead of export
statements.

Unfortunately, the git-version script is also used in the
electron-builder config for the app-shell and the app-shell-odd, and the
electron-builder config is run via node, and to import an ESM from a
node CJS script - which electron-builder.config.js is - you need to
change your import syntax to dynamic import and you need to make the
import target explicitly (to node) an ESM, aka change its extension, and
you need to use full ESM syntax including exports. This also goes for
the create-release script.

So that means that
- git-version.js becomes git-version.mjs and uses full ESM syntax
- that means that everywhere it's imported we need to import it by full
path with extension instead of module name
- also we need to import it dynamically in the electron config
- oh and we need to actually add the define configs so we get the
version in the app

And then finally we show the version again.

Also, remove some old webpack.config.js files that aren't used anymore.

Closes EXEC-385

app-shell-odd/vite.config.ts

@@ -1,13 +1,14 @@
-import { versionForProject } from '../scripts/git-version'
+import { versionForProject } from '../scripts/git-version.mjs'
 import pkg from './package.json'
 import path from 'path'
-import { UserConfig, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import postCssImport from 'postcss-import'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
+import type {UserConfig} from 'vite'
 
 export default defineConfig(
   async (): Promise<UserConfig> => {

app-shell/electron-builder.config.js

@@ -1,6 +1,5 @@
 'use strict'
 const path = require('path')
-const { versionForProject } = require('../scripts/git-version')
 
 const {
   OT_APP_DEPLOY_BUCKET,
@@ -45,7 +44,9 @@ module.exports = async () => ({
     },
   ],
   extraMetadata: {
-    version: await versionForProject(project),
+    version: await (
+      await import('../scripts/git-version.mjs')
+    ).versionForProject(project),
     productName: project === 'robot-stack' ? 'Opentrons' : 'Opentrons-OT3',
   },
   extraResources: USE_PYTHON ? ['python'] : [],

app-shell/vite.config.ts

@@ -1,7 +1,8 @@
-import { versionForProject } from '../scripts/git-version'
+import { versionForProject } from '../scripts/git-version.mjs'
 import pkg from './package.json'
 import path from 'path'
-import { UserConfig, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
+import type { UserConfig } from 'vite'
 
 export default defineConfig(
   async (): Promise<UserConfig> => {

app/vite.config.ts

@@ -6,57 +6,66 @@ import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
+import { versionForProject } from '../scripts/git-version.mjs'
+import type { UserConfig } from 'vite'
 
-export default defineConfig({
-  // this makes imports relative rather than absolute
-  base: '',
-  build: {
-    // Relative to the root
-    outDir: 'dist',
-  },
-  plugins: [
-    react({
-      include: '**/*.tsx',
-      babel: {
-        // Use babel.config.js files
-        configFile: true,
+export default defineConfig(
+  async(): Promise<UserConfig> => {
+    const project = process.env.OPENTRONS_PROJECT ?? 'robot-stack'
+    const version = await versionForProject(project)
+    return {
+      // this makes imports relative rather than absolute
+      base: '',
+      build: {
+        // Relative to the root
+        outDir: 'dist',
       },
-    }),
-  ],
-  optimizeDeps: {
-    esbuildOptions: {
-      target: 'es2020',
-    },
-  },
-  css: {
-    postcss: {
       plugins: [
-        postCssImport({ root: 'src/' }),
-        postCssApply(),
-        postColorModFunction(),
-        postCssPresetEnv({ stage: 0 }),
-        lostCss(),
+        react({
+          include: '**/*.tsx',
+          babel: {
+            // Use babel.config.js files
+            configFile: true,
+          },
+        }),
       ],
-    },
-  },
-  define: {
-    'process.env': process.env,
-    global: 'globalThis',
-  },
-  resolve: {
-    alias: {
-      '@opentrons/components/styles': path.resolve(
-        '../components/src/index.module.css'
-      ),
-      '@opentrons/components': path.resolve('../components/src/index.ts'),
-      '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
-      '@opentrons/step-generation': path.resolve(
-        '../step-generation/src/index.ts'
-      ),
-      '@opentrons/api-client': path.resolve('../api-client/src/index.ts'),
-      '@opentrons/react-api-client': path.resolve(
-        '../react-api-client/src/index.ts'
-      ),
-    },
-  },
-})
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'es2020',
+        },
+      },
+      css: {
+        postcss: {
+          plugins: [
+            postCssImport({ root: 'src/' }),
+            postCssApply(),
+            postColorModFunction(),
+            postCssPresetEnv({ stage: 0 }),
+            lostCss(),
+          ],
+        },
+      },
+      define: {
+        'process.env': process.env,
+        global: 'globalThis',
+        _PKG_VERSION_: JSON.stringify(version),
+        _OPENTRONS_PROJECT_: JSON.stringify(project),
+      },
+      resolve: {
+        alias: {
+          '@opentrons/components/styles': path.resolve(
+            '../components/src/index.module.css'
+          ),
+          '@opentrons/components': path.resolve('../components/src/index.ts'),
+          '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
+          '@opentrons/step-generation': path.resolve(
+            '../step-generation/src/index.ts'
+          ),
+          '@opentrons/api-client': path.resolve('../api-client/src/index.ts'),
+          '@opentrons/react-api-client': path.resolve(
+            '../react-api-client/src/index.ts'
+          ),
+        },
+      },
+    }
+  })

discovery-client/vite.config.ts

@@ -1,14 +1,15 @@
-import { versionForProject } from '../scripts/git-version'
+import { versionForProject } from '../scripts/git-version.mjs'
 import pkg from './package.json'
 import path from 'path'
-import { UserConfig, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import postCssImport from 'postcss-import'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
-
+import type { UserConfig } from 'vite
+'
 export default defineConfig(
   async (): Promise<UserConfig> => {
     const project = process.env.OPENTRONS_PROJECT ?? 'robot-stack'

protocol-designer/vite.config.ts

@@ -1,12 +1,13 @@
 import path from 'path'
-import { UserConfig, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import postCssImport from 'postcss-import'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
-import { versionForProject } from '../scripts/git-version'
+import { versionForProject } from '../scripts/git-version.mjs'
+import type { UserConfig } from 'vite'
 
 const testAliases: {} | { 'file-saver': string } =
   process.env.CYPRESS === '1'