Upgrade store example to react-scripts 5.0.0

examples/README.md

@@ -4,7 +4,7 @@ Here is the list of the code examples and the features they demonstrate:
 
 - [Web Chat App](web-chat): Group chat, React/TypeScript, Relay, Store.
 - [Ethereum Private Message Web App](eth-pm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
-- [Relay ReactJS Chat App](relay-reactjs-chat):
+- [Minimal ReactJS Waku Relay App](relay-reactjs-chat):
   Group chat,
   React/JavaScript,
   `create-react-app`/`react-scripts` 5.0.0,

examples/relay-reactjs-chat/README.md

@@ -1,4 +1,4 @@
-# Relay ReactJS Chat Example App
+# Minimal ReactJS Waku Relay App
 
 **Demonstrates**:
 

examples/store-reactjs-chat/.env

@@ -1,3 +0,0 @@
-# Remove ReactJS warning about webpack
-# because this is not a monorepo, ReactJS projects are examples
-SKIP_PREFLIGHT_CHECK=true

examples/store-reactjs-chat/README.md

@@ -1,12 +1,13 @@
 # Minimal ReactJS Waku Store App
 
 - React/JavaScript,
+- `create-react-app`/`react-scripts` 5.0.0
 - Waku Store,
 - Protobuf using `protons`.
 - No async/await syntax.
 
 A simple app that retrieves chat messages using [Waku Store](https://rfc.vac.dev/spec/13/)
-to illustrate the [Retrieve Messages Using Waku Store With ReactJS guide](/guides/reactjs-store.md).
+to illustrate the [Retrieve Messages Using Waku Store With ReactJS guide](https://docs.dappconnect.dev/docs/guides/08_reactjs_store/).
 
 To run a development version locally, do:
 

examples/store-reactjs-chat/config/webpack.extend.js

@@ -0,0 +1,60 @@
+const webpack = require('webpack');
+
+module.exports = {
+  dev: (config) => {
+    // Override webpack 5 config from react-scripts to load polyfills
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.fallback) config.resolve.fallback = {};
+    Object.assign(config.resolve.fallback, {
+      buffer: require.resolve('buffer'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+    });
+
+    if (!config.plugins) config.plugins = [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify('dev'),
+      })
+    );
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    if (!config.ignoreWarnings) config.ignoreWarnings = [];
+    config.ignoreWarnings.push(/Failed to parse source map/);
+
+    return config;
+  },
+  prod: (config) => {
+    // Override webpack 5 config from react-scripts to load polyfills
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.fallback) config.resolve.fallback = {};
+    Object.assign(config.resolve.fallback, {
+      buffer: require.resolve('buffer'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+    });
+
+    if (!config.plugins) config.plugins = [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify('prod'),
+      })
+    );
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    if (!config.ignoreWarnings) config.ignoreWarnings = [];
+    config.ignoreWarnings.push(/Failed to parse source map/);
+
+    return config;
+  },
+};

examples/store-reactjs-chat/package.json

@@ -3,21 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^13.5.0",
-    "js-waku": "../../build/esm",
+    "assert": "^2.0.0",
-    "protons": "^2.0.1",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "js-waku": "^0.14.2",
+    "protons": "^2.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
-    "web-vitals": "^1.1.2"
+    "stream-browserify": "^3.0.0",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cra-webpack-rewired start",
-    "build": "react-scripts build",
+    "build": "cra-webpack-rewired build",
-    "test": "react-scripts build",
+    "test": "cra-webpack-rewired test",
-    "eject": "react-scripts eject"
+    "eject": "cra-webpack-rewired eject"
   },
   "eslintConfig": {
     "extends": [
@@ -28,6 +32,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],
@@ -36,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cra-webpack-rewired": "^1.0.1"
   }
 }

examples/store-reactjs-chat/src/App.js

@@ -1,4 +1,3 @@
-import './App.css';
 import { Waku } from 'js-waku';
 import * as React from 'react';
 import protons from 'protons';