chore: switch to ESM

cosmos-policy.json

@@ -0,0 +1,12 @@
+{
+  "dependencies": true,
+  "scopes": {
+    "": {
+      "cascade": true,
+      "integrity": true,
+      "dependencies": {
+        "react": "./node_modules/preact/compat/dist/compat.mjs"
+      }
+    }
+  }
+}

cosmos.config.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "http://json.schemastore.org/cosmos-config",
+  "plugins": ["react-cosmos-plugin-webpack"]
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": "Look up words and stuff",
   "main": "src/main.tsx",
+  "type": "module",
   "devDependencies": {
     "@babel/core": "7.23.7",
     "@fullhuman/postcss-purgecss": "5.0.0",
@@ -21,7 +22,8 @@
     "postcss-import": "16.0.0",
     "postcss-loader": "7.3.4",
     "prettier": "3.1.1",
-    "react-cosmos": "^5.7.2",
+    "react-cosmos": "6.0.0-beta.10",
+    "react-cosmos-plugin-webpack": "6.0.0-beta.10",
     "style-loader": "3.3.3",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
@@ -33,8 +35,8 @@
   "scripts": {
     "build": "webpack --define-process-env-node-env production",
     "build:stats": "webpack --json --define-process-env-node-env production > webpack-stats.json",
-    "cosmos": "cosmos --port 5001",
-    "build:cosmos": "cosmos-export",
+    "cosmos": "node --experimental-policy=cosmos-policy.json node_modules/react-cosmos/bin/cosmos.js --port 5001",
+    "build:cosmos": "node --experimental-policy=cosmos-policy.json node_modules/react-cosmos/bin/cosmos-export.js",
     "postinstall": "husky install",
     "start": "webpack serve"
   },

webpack.config.js

@@ -1,13 +1,16 @@
-const path = require('path');
-const crypto = require('crypto');
+import * as crypto from 'crypto';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
 
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
-const { InjectManifest } = require('workbox-webpack-plugin');
-const webpack = require('webpack');
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { RelativeCiAgentWebpackPlugin } from '@relative-ci/agent';
+import { InjectManifest } from 'workbox-webpack-plugin';
+import webpack from 'webpack';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const mode = process.env.NODE_ENV || 'development';
 const prod = mode === 'production';
@@ -47,7 +50,7 @@ if (process.env.RELATIVE_CI_KEY) {
   plugins.push(new RelativeCiAgentWebpackPlugin());
 }
 
-module.exports = {
+export default {
   entry: {
     hikibiki: ['./src/main.tsx'],
   },