build(deps): bump pyodide from 0.23.4 to 0.24.1 (#2094)

* build(deps): bump pyodide from 0.23.4 to 0.24.1

Bumps [pyodide](https://github.com/pyodide/pyodide) from 0.23.4 to 0.24.1.
- [Release notes](https://github.com/pyodide/pyodide/releases)
- [Commits](https://github.com/pyodide/pyodide/compare/0.23.4...0.24.1)

---
updated-dependencies:
- dependency-name: pyodide
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* updates for pyodide 0.24.0

- fix breaking file rename
- replace use of deprecated type

* use @pyodide/webpack-plugin

Pyodide 0.24 made some breaking changes that broke the way we were
integrating it with webpack manually. We can use the official webpack
plugin instead.

* webpack: add hack for pyodide

This works around "Critical dependency: the request of a dependency is an expression"

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Lechner <david@pybricks.com>

config/webpack.config.js

@@ -28,6 +28,7 @@ const ForkTsCheckerWebpackPlugin =
     ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { PyodidePlugin } = require('@pyodide/webpack-plugin');
 
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
@@ -587,13 +588,14 @@ module.exports = function (webpackEnv) {
           },
         ],
       }),
-      new CopyPlugin({
-        patterns: [
-          { from: require.resolve("pyodide/python_stdlib.zip"), to:pyodideStaticPath },
-          { from: require.resolve("pyodide/pyodide.asm.js"), to:pyodideStaticPath },
-          { from: require.resolve("pyodide/pyodide.asm.wasm"), to: pyodideStaticPath },
-        ],
+      new PyodidePlugin({
+        outDirectory: pyodideStaticPath,
+        packageIndexUrl: '',
       }),
+      // somehow, this magically fixes "Critical dependency: the request of a
+      // dependency is an expression" caused by unused dynamic imports in pyodide
+      // https://stackoverflow.com/a/59235546/1976323
+      new webpack.ContextReplacementPlugin(/pyodide/),
       new LicensePlugin(require('./licenses')),
       new MonacoWebpackPlugin({
         languages: ['python'],

package.json

@@ -18,6 +18,7 @@
         "@pybricks/mpy-cross-v5": "^2.0.0",
         "@pybricks/mpy-cross-v6": "^2.0.0",
         "@pybricks/python-program-analysis": "^2.0.0",
+        "@pyodide/webpack-plugin": "^1.2.0",
         "@reduxjs/toolkit": "^1.9.7",
         "@shopify/react-i18n": "^7.8.0",
         "@svgr/webpack": "^8.1.0",
@@ -85,7 +86,7 @@
         "postcss-preset-env": "^9.2.0",
         "prompts": "^2.4.2",
         "prop-types": "^15.8.1",
-        "pyodide": "0.23.4",
+        "pyodide": "0.24.1",
         "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-aria": "^3.29.0",

src/pybricksMicropython/python-worker.ts

@@ -6,7 +6,8 @@
 // NB: We need to be very careful about imports here since many libraries for
 // web aren't compatible with web workers!
 
-import { PyodideInterface, loadPyodide, version as pyodideVersion } from 'pyodide';
+import { loadPyodide, version as pyodideVersion } from 'pyodide';
+import type { PythonError } from 'pyodide/ffi';
 import { ensureError } from '../utils';
 import {
     pythonMessageComplete,
@@ -24,8 +25,6 @@ import {
     pythonMessageWriteUserFile,
 } from './python-message';
 
-type PythonError = InstanceType<PyodideInterface['PythonError']>;
-
 function isPythonError(err: Error): err is PythonError {
     return err.constructor.name === 'PythonError';
 }
@@ -71,11 +70,7 @@ print('preloading done.')
 async function init(): Promise<void> {
     console.log('starting Pyodide...');
 
-    const pyodide = await loadPyodide({
-        indexURL: `pyodide/${pyodideVersion}`,
-        // REVISIT: would make more sense provide our own
-        lockFileURL: new URL('pyodide/repodata.json', import.meta.url).toString(),
-    });
+    const pyodide = await loadPyodide({ indexURL: `pyodide/${pyodideVersion}` });
 
     // REVISIT: it would be nice if we could make a custom driver to mount
     // the custom Pybricks Code Dexie-based file system directly instead of

yarn.lock

@@ -2649,6 +2649,7 @@ __metadata:
     "@pybricks/mpy-cross-v5": ^2.0.0
     "@pybricks/mpy-cross-v6": ^2.0.0
     "@pybricks/python-program-analysis": ^2.0.0
+    "@pyodide/webpack-plugin": ^1.2.0
     "@reduxjs/toolkit": ^1.9.7
     "@shopify/react-i18n": ^7.8.0
     "@svgr/webpack": ^8.1.0
@@ -2729,7 +2730,7 @@ __metadata:
     prettier: ^3.0.3
     prompts: ^2.4.2
     prop-types: ^15.8.1
-    pyodide: 0.23.4
+    pyodide: 0.24.1
     react: ^18.2.0
     react-app-polyfill: ^3.0.0
     react-aria: ^3.29.0
@@ -2781,6 +2782,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pyodide/webpack-plugin@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@pyodide/webpack-plugin@npm:1.2.0"
+  dependencies:
+    copy-webpack-plugin: ^11.0.0
+  peerDependencies:
+    pyodide: ">=0.21.3"
+  checksum: 9d7e98f6702a05c54b61e1a10e89145b0096283ef3fa9bb17d79aa2bc377fe04a204eeb65ada0519d6f1464cf2da0d7285c3ca7c92b2fae31601dd1ddf5c89c0
+  languageName: node
+  linkType: hard
+
 "@react-aria/breadcrumbs@npm:^3.5.6":
   version: 3.5.6
   resolution: "@react-aria/breadcrumbs@npm:3.5.6"
@@ -12126,7 +12138,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.5":
+"node-fetch@npm:^2.6.5":
   version: 2.6.7
   resolution: "node-fetch@npm:2.6.7"
   dependencies:
@@ -13762,14 +13774,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pyodide@npm:0.23.4":
-  version: 0.23.4
-  resolution: "pyodide@npm:0.23.4"
+"pyodide@npm:0.24.1":
+  version: 0.24.1
+  resolution: "pyodide@npm:0.24.1"
   dependencies:
     base-64: ^1.0.0
-    node-fetch: ^2.6.1
     ws: ^8.5.0
-  checksum: 1de0d60b466db208ebbc09be19740b611e14d86c0ba67ef6c277c086e334784fc99afee19f3c17ab885a79f82d9ec7080e5fe9cb8b21d9fa6098de27732df823
+  checksum: ab18e5eed3195b919c0e70b39a81bab0449ab56e42f28e8635664e688dba732da060492505719c3cb477302979791dbcc1df09ff39dc9e0816064b69818f283d
   languageName: node
   linkType: hard