feat!: migrate to ESM (#2092)

* feat!: migrate to kubo-rpc-client

currently testing esm module import errors with `npm run test:unit -- src/bundles/identity.test.js`

* tmp: revert me.. just showing work

* chore: set type=module

* chore: use react-app-rewired-esm

* chore: use esm import update rule

from https://gist.github.com/SgtPooki/65e189531f4a5366ef4f80825feb2e5f

* chore: run `npm run eslint -- --fix`

* chore: lint

* chore: getting tests working

* chore: fix pqueue constructor error

* fix: peer-locations.test.js

* tmp: trying to fix identity.test.js

* fix: AsyncRequestLoader.test.js

* chore: fix e2e/setup/ipfs-backend.js

* fix: npm start loads the webui

* fix: build,start,test succeeding

* fix: some e2e tests passing

* fix: e2e/files.test.js

* fix: e2e/ipns.test.js

* fix: e2e/peers.test.js

* fix: e2e/remote-api.test.js

* fix: e2e/settings.test.js

* fix: npm run build-storybook

* fix: storybook build & test

* fix(storybook): icons.stories.js

* fix: storybook and e2e tests both passing

* fix: lint

* fix: pull package-lock.json from main and npm i

* chore: use commit hash for react-app-rewired-esm

* chore: fix eslint error on github CI

see https://github.com/ipfs/ipfs-webui/actions/runs/4118899712/jobs/7111962669\#step:6:90

* chore: use published @sgtpooki/react-app-rewired-esm

* fix: npm run test:unit:coverage

* chore: fix github CI for e2e tests

* chore: clean up debugging code

* chore: address self-review PR comments

* chore: address PR comment

.eslintrc.js → .eslintrc.cjs

@@ -7,18 +7,20 @@ module.exports = {
     }
   },
   extends: ['react-app', 'standard', 'plugin:jsx-a11y/recommended'],
-  plugins: ['jsx-a11y', 'storybook'],
+  plugins: ['jsx-a11y', 'storybook', 'import'],
   // ignore .ts files because it fails to parse it.
   ignorePatterns: 'src/**/*.ts',
   rules: {
+    'import/esm-extensions': 'error',
     'react/prop-types': [0, { ignore: ['className'], customValidators: [], skipUndeclared: true }] // TODO: set this rule to error when all issues are resolved.
   },
   overrides: [
     {
       files: ['src/**/*.stories.js'],
       excludedFiles: '*.test.js',
       rules: {
-        'import/no-anonymous-default-export': 'off'
+        'import/no-anonymous-default-export': 'off',
+        'import/esm-extensions': 'error'
       }
     }
   ]

.github/workflows/test-e2e.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Install dependencies
         run: npm ci --prefer-offline --no-audit --progress=false --cache ${{ github.workspace }}/.cache/npm
 
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
       # This is required to ensure that our code is instrumented with coverage details
       - name: Run test build
         run: npm run test:build

.storybook/main.js → .storybook/main.cjs

@@ -1,19 +1,18 @@
+/* eslint-disable import/esm-extensions */
 /**
  * @file StoryBook configuration file
  * @see https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#from-version-52x-to-53x
  */
 
 const webpack = require('webpack')
 
-const { webpack: webpackOverride } = require('../config-overrides')
-
 /** @type {import('@storybook/core-common').StorybookConfig} */
 const storybookConfig = {
   core: {
     builder: 'webpack5'
   },
   reactOptions: {
-    legacyRootApi: true
+    legacyRootApi: false
   },
   stories: [
     '../src/**/*.stories.@(ts|js|tsx|jsx)'
@@ -35,11 +34,31 @@ const storybookConfig = {
   ],
   features: {
     postcss: false,
-    storyStoreV7: true
+    storyStoreV7: true,
+    babelModeV7: true
   },
   webpackFinal: async (config) => {
+    const { webpack: webpackOverride } = (await import('../config-overrides.js')).default
+
+    config.module.rules.push({
+      test: /\.(m?js)$/,
+      type: 'javascript/auto',
+      resolve: {
+        fullySpecified: false
+      }
+    })
     return webpackOverride({
       ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias
+        },
+        extensions: [
+          ...config.resolve.extensions,
+          'dist/esm/index.js'
+        ]
+      },
       // @see https://github.com/storybookjs/storybook/issues/18276#issuecomment-1137101774
       plugins: config.plugins.map(plugin => {
         if (plugin.constructor.name === 'IgnorePlugin') {

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

.storybook/preview.js

@@ -1,12 +1,13 @@
+import React from 'react'
 import { Provider } from 'redux-bundler-react'
 import { I18nextProvider } from 'react-i18next'
 import { DndProvider } from 'react-dnd'
 import 'react-virtualized/styles.css'
 import '../src/index.css'
 
-import getStore from '../src/bundles'
-import i18n from '../src/i18n'
-import DndBackend from '../src/lib/dnd-backend'
+import getStore from '../src/bundles/index.js'
+import i18n from '../src/i18n.js'
+import DndBackend from '../src/lib/dnd-backend.js'
 
 /**
  * @type {import('@storybook/addons').BaseAnnotations}

babel.config.cjs

@@ -0,0 +1,4 @@
+
+module.exports = {
+  presets: ['@babel/preset-react']
+}

config-overrides.js

@@ -4,7 +4,8 @@
  * @see https://github.com/facebook/create-react-app/issues/11756#issuecomment-1184657437
  * @see https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5
  */
-const webpack = require('webpack')
+import webpack from 'webpack'
+
 const PURE_ESM_MODULES = [
   'ipfs-geoip'
 ]
@@ -67,14 +68,13 @@ function modifyBabelLoaderRuleForTest (rules) {
   })
 }
 
-function webpackOverride(config) {
+function webpackOverride (config) {
   const fallback = config.resolve.fallback || {}
 
   Object.assign(fallback, {
-    assert: require.resolve('./src/webpack-fallbacks/assert'),
-    stream: require.resolve('./src/webpack-fallbacks/stream'),
-    os: require.resolve('./src/webpack-fallbacks/os'),
-    path: require.resolve('./src/webpack-fallbacks/path')
+    stream: 'stream-browserify',
+    os: 'os-browserify/browser',
+    path: 'path-browserify'
   })
 
   config.resolve.fallback = fallback
@@ -87,6 +87,20 @@ function webpackOverride(config) {
   ])
 
   config.module.rules = modifyBabelLoaderRuleForBuild(config.module.rules)
+  config.module.rules.push({
+    test: /\.jsx?$/,
+    exclude: /(node_modules|bower_components)/,
+    loader: 'babel-loader',
+    options: { presets: ['@babel/env', '@babel/preset-react'] }
+  })
+
+  config.module.rules.push({
+    test: /\.m?js$/,
+    type: 'javascript/auto',
+    resolve: {
+      fullySpecified: false
+    }
+  })
 
   // Instrument for code coverage in development mode
   const REACT_APP_ENV = process.env.REACT_APP_ENV ?? process.env.NODE_ENV ?? 'production'
@@ -97,7 +111,22 @@ function webpackOverride(config) {
   return config
 }
 
-module.exports = {
+const configOverride = {
   webpack: webpackOverride,
-  jest: (config) => config
+  jest: (config) => {
+    /**
+     * @type {import('jest').Config}
+     */
+    return ({
+      ...config,
+      setupFiles: [...config.setupFiles, 'fake-indexeddb/auto'],
+      moduleNameMapper: {
+        ...config.moduleNameMapper,
+        'multiformats/basics': '<rootDir>/node_modules/multiformats/cjs/src/basics.js',
+        'multiformats/bases/(.*)$': '<rootDir>/node_modules/multiformats/cjs/src/bases/$1.js'
+      }
+    })
+  }
 }
+
+export default configOverride