fix: 🐛 Fixed issue with displaying compile errors in overlay (#210)

* fix: 🐛 Fixed issue with displaying compile errors in overlay

* fix: 🐛 Fixed node18 support

package.json

@@ -56,71 +56,71 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@babel/preset-typescript": "^7.17.12",
+    "@commitlint/cli": "^17.0.1",
+    "@commitlint/config-conventional": "^17.0.0",
     "@fortawesome/fontawesome-free": "5.12.1",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
-    "autocannon": "^7.7.1",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "autocannon": "^7.9.0",
     "babel-jest": "^27.5.1",
     "bulma": "0.8.0",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
     "commitizen": "^4.2.4",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.21.1",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "del": "^6.0.0",
-    "eslint": "^8.11.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "del": "^6.1.1",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-jest": "^26.4.6",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
     "fs-extra": "^10.0.1",
-    "git-cz": "^4.8.0",
+    "git-cz": "^4.9.0",
     "gulp": "4.0.2",
     "gulp-change": "1.0.2",
     "gulp-rename": "2.0.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jsdoc-to-markdown": "5.0.3",
     "jsdom": "^19.0.0",
-    "lerna": "^4.0.0",
+    "lerna": "^5.0.0",
     "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "lint-staged": "^12.3.7",
+    "less-loader": "^11.0.0",
+    "lint-staged": "^12.4.3",
     "lunr": "^2.3.9",
     "map-stream": "0.0.7",
     "mini-css-extract-plugin": "^2.6.0",
     "postcss": "^8.4.12",
     "postcss-less": "6.0.0",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.0.0",
     "postcss-preset-env": "^7.4.3",
     "prettier": "^2.6.0",
-    "rollup": "^2.70.1",
+    "rollup": "^2.75.3",
     "rollup-plugin-jscc": "^2.0.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.6.0",
+    "stylelint": "^14.8.5",
     "stylelint-config-css-modules": "^4.1.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-block-no-ignored-properties": "2.5.0",
     "stylelint-order": "5.0.0",
     "to-mock": "1.6.2",
-    "turbo": "^1.2.1",
-    "typescript": "^4.6.2",
-    "verdaccio": "^5.8.0",
+    "turbo": "^1.2.14",
+    "typescript": "^4.7.2",
+    "verdaccio": "^5.10.3",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "yargs": "^17.5.0"

packages/cli/package.json

@@ -29,59 +29,59 @@
     "lint": "eslint './**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "7.16.7",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
     "@gatsbyjs/webpack-hot-middleware": "2.25.2",
     "@ima/dev-utils": "^18.0.0-rc.0",
     "@ima/error-overlay": "^18.0.0-rc.0",
     "@ima/hmr-client": "^18.0.0-rc.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
-    "@swc/core": "^1.2.179",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@swc/core": "^1.2.196",
     "ajv": "8.11.0",
     "babel-loader": "^8.2.5",
     "better-opn": "3.0.2",
     "bundle-stats-webpack-plugin": "^3.3.8",
     "chalk": "4.1.2",
-    "cli-progress": "^3.11.0",
-    "compression-webpack-plugin": "9.2.0",
-    "copy-webpack-plugin": "10.2.4",
-    "core-js": "^3.22.4",
+    "cli-progress": "^3.11.1",
+    "compression-webpack-plugin": "^10.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.22.7",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "3.4.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "ejs": "^3.1.7",
     "express": "^4.18.1",
-    "express-static-gzip": "^2.1.6",
+    "express-static-gzip": "^2.1.7",
     "globby": "11.1.0",
     "less": "4.1.2",
-    "less-loader": "10.2.0",
+    "less-loader": "^11.0.0",
     "messageformat": "2.3.0",
     "mini-css-extract-plugin": "2.6.0",
     "nodemon": "^2.0.16",
     "open-editor": "3.0.0",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "^7.5.0",
+    "postcss-loader": "^7.0.0",
+    "postcss-preset-env": "^7.6.0",
     "pretty-bytes": "5.6.0",
     "pretty-ms": "7.0.1",
     "react-refresh": "^0.13.0",
     "regenerator-runtime": "0.13.9",
     "schema-utils": "4.0.0",
-    "swc-loader": "^0.2.0",
-    "webpack": "^5.72.0",
+    "swc-loader": "^0.2.1",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-middleware": "5.3.1",
-    "yargs": "^17.4.1"
+    "webpack-dev-middleware": "^5.3.3",
+    "yargs": "^17.5.1"
   },
   "devDependencies": {
-    "@types/cli-progress": "3.9.2",
+    "@types/cli-progress": "^3.11.0",
     "@types/ejs": "^3.1.0",
     "@types/express": "4.17.13",
-    "@types/node": "^17.0.31",
+    "@types/node": "^17.0.36",
     "@types/nodemon": "1.19.1",
     "@types/webpack-bundle-analyzer": "4.4.1",
-    "@types/webpack-env": "^1.16.4",
+    "@types/webpack-env": "^1.17.0",
     "@types/webpack-hot-middleware": "2.25.6",
     "@types/yargs": "^17.0.10"
   },

packages/core/polyfill/runner.ejs

@@ -180,6 +180,11 @@
        */
       onError: function (error) {
         console.error('IMA Runner ERROR:', error);
+
+        // Show compile errors in error-overlay in $Debug
+        if (window.__IMA_HMR && window.$Debug) {
+          window.__IMA_HMR.emit('error', { error: error, type: 'compile' });
+        }
       },
     },
     root.$IMA.Runner || {}

packages/dev-utils/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "chalk": "^4.1.2",
     "cli-highlight": "^2.1.11",
-    "source-map": "^0.7.3",
+    "source-map": "0.8.0-beta.0",
     "stacktrace-parser": "^0.1.10",
     "strip-ansi": "^6.0.1"
   },

packages/dev-utils/src/ErrorOverlayEmitter.ts

@@ -6,29 +6,48 @@ export type ListenerData = {
   type: 'compile' | 'runtime';
 };
 export type Listener = (data?: ListenerData) => Promise<void>;
+export type PendingEvents = Record<EventName, (ListenerData | undefined)[]>;
 
 /**
  * Tiny event emitter used for communication between
  * application, hmr client and error overlay.
  */
 class ErrorOverlayEmitter {
   private _listeners: Map<EventName, Listener[]>;
+  private _pendingEvents: PendingEvents | Record<string, never>;
 
   constructor() {
     this._listeners = new Map();
+    this._pendingEvents = {};
   }
 
   on(eventName: EventName, listener: Listener): void {
     const listeners = this._listeners.get(eventName) ?? [];
 
     listeners.push(listener);
     this._listeners.set(eventName, listeners);
+
+    // Emit pending events
+    if (
+      Array.isArray(this._pendingEvents[eventName]) &&
+      this._pendingEvents[eventName].length
+    ) {
+      for (const pendingData of Object.values(this._pendingEvents[eventName])) {
+        this.emit(eventName, pendingData);
+      }
+    }
   }
 
   emit(eventName: EventName, data?: ListenerData): void {
     const listeners = this._listeners.get(eventName);
 
     if (!listeners) {
+      if (!Array.isArray(this._pendingEvents[eventName])) {
+        this._pendingEvents[eventName] = [];
+      }
+
+      this._pendingEvents[eventName].push(data);
+
       return;
     }
 

packages/error-overlay/package.json

@@ -28,14 +28,14 @@
   "devDependencies": {
     "@ima/dev-utils": "^18.0.0-rc.0",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "clsx": "^1.1.1",
-    "compression-webpack-plugin": "^9.2.0",
-    "prismjs": "^1.27.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "source-map": "^0.7.3",
+    "compression-webpack-plugin": "^10.0.0",
+    "prismjs": "^1.28.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "source-map": "0.8.0-beta.0",
     "stacktrace-parser": "^0.1.10"
   },
   "publishConfig": {

packages/error-overlay/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 import { OverlayContext, defaultOverlayContext } from './components';
@@ -13,27 +13,27 @@ class ImaErrorOverlay extends HTMLElement {
     this.attachShadow({ mode: 'open' });
 
     // Create app root element
-    const root = document.createElement('div');
-    root.setAttribute('data-ima-error-overlay', '');
+    const container = document.createElement('div');
+    container.setAttribute('data-ima-error-overlay', '');
+    const root = createRoot(container);
 
     // Append styles and root
     styles.use({ target: this.shadowRoot });
-    this.shadowRoot?.appendChild(root);
+    this.shadowRoot?.appendChild(container);
 
     // Get component attributes
     const publicUrl = this.getAttribute('public-url');
     const serverError = this.getAttribute('server-error');
 
     // Render App
-    ReactDOM.render(
+    root.render(
       <OverlayContext.Provider
         value={{
           publicUrl: publicUrl ?? defaultOverlayContext.publicUrl,
         }}
       >
         <App serverError={serverError} />
-      </OverlayContext.Provider>,
-      root
+      </OverlayContext.Provider>
     );
   }
 }

packages/error-overlay/webpack.config.js

@@ -5,22 +5,21 @@ const CopyPlugin = require('copy-webpack-plugin');
 
 const { createWebpackConfig } = require('../../createWebpackConfig');
 
-module.exports = createWebpackConfig((baseConfig, { isProduction }) => {
+module.exports = createWebpackConfig(baseConfig => {
   const config = {
     ...baseConfig,
     entry: { overlay: './src/index.tsx' },
     plugins: [
-      isProduction &&
-        new CompressionPlugin({
-          algorithm: 'brotliCompress',
-          filename: `[path][base].br`,
-          test: /\.(js|css|html|svg)$/,
-          compressionOptions: {
-            level: 9,
-          },
-          threshold: 0,
-          minRatio: 0.95,
-        }),
+      new CompressionPlugin({
+        algorithm: 'brotliCompress',
+        filename: `[path][base].br`,
+        test: /\.(js|css|html|svg)$/,
+        compressionOptions: {
+          level: 9,
+        },
+        threshold: 0,
+        minRatio: 0.95,
+      }),
       new CopyPlugin({
         patterns: [
           {

utils/scripts/utils/utils.js

@@ -218,7 +218,7 @@ function initApp(destDir, pkgDirs, cliArgs) {
     `${path.resolve(
       __dirname,
       '../../../packages/create-ima-app/bin/create-ima-app.js'
-    )} ${destDir} --example=hello`
+    )} ${destDir}`
   );
 
   // Build, pack and install packages in the target directory.
@@ -234,7 +234,8 @@ function initApp(destDir, pkgDirs, cliArgs) {
       const packFileName = `ima-${name}-${pkgJson.version}.tgz`;
       const packFilePath = path.join(pkgDir, packFileName);
 
-      shell(`npm install ${packFilePath}`, destDir);
+      // TODO IMA@18 - remove when ima works without legacy peer deps
+      shell(`npm install ${packFilePath} --legacy-peer-deps`, destDir);
       fs.rmSync(packFilePath);
     });
   }