feat: enable react server-side rendering with image support

.eslintrc.json

@@ -5,7 +5,7 @@
     "node": true,
     "jest": true
   },
-  "extends": "eslint:recommended",
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
@@ -14,5 +14,8 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "rules": {}
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
 }

package.json

@@ -34,7 +34,9 @@
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.5.4",
+    "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.5.4",
+    "@svgr/webpack": "^5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.0.2",
@@ -51,6 +53,7 @@
     "eslint": "^7.12.0",
     "eslint-config-strongloop": "^2.1.0",
     "eslint-loader": "^4.0.2",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.3",
@@ -62,6 +65,8 @@
     "node-sass": "^4.14.1",
     "pkg-up": "^3.1.0",
     "raw-loader": "^4.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "regenerator-runtime": "^0.13.2",
     "resolve": "^1.18.1",
     "sass-loader": "^8.0.2",
@@ -71,11 +76,13 @@
     "ts-loader": "^8.0.11",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^4.0.2",
+    "url-loader": "^4.1.1",
     "webpack": "^4.44.1",
     "webpack-node-externals": "^2.5.2"
   },
   "devDependencies": {
     "@types/jest": "^26.0.3",
+    "eslint-plugin-react": "^7.22.0",
     "husky": "^3.0.8",
     "lerna-changelog": "^1.0.1",
     "lint-staged": "^9.4.2",

src/webpack.config.js

@@ -63,6 +63,23 @@ const extensions = [
   ".gql"
 ];
 
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || "10000"
+);
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
+    return false;
+  }
+
+  try {
+    require.resolve("react/jsx-runtime");
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
 // If tsConfig is specified and not found, throw an error
 if (
   !ENABLE_TYPESCRIPT &&
@@ -132,6 +149,16 @@ function babelLoader() {
       cacheCompression: false,
       plugins: plugins.map(require.resolve),
       presets: [
+        // enable react support on server side
+        [
+          require.resolve("@babel/preset-react"),
+          {
+            runtime: hasJsxRuntime ? "automatic" : "classic",
+            targets: {
+              node: nodeVersion
+            }
+          }
+        ],
         [
           require.resolve("@babel/preset-env"),
           {
@@ -221,7 +248,31 @@ function loaders() {
           "sass-loader"
         ]
       },
-      { test: /\.gif|\.svg|\.png|\.jpg|\.jpeg$/, loader: "ignore-loader" }
+      {
+        test: /\.gif|\.png|\.jpg|\.jpeg$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: imageInlineSizeLimit,
+              name: "static/media/[name].[hash:8].[ext]"
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          "@svgr/webpack",
+          {
+            loader: "url-loader",
+            options: {
+              limit: imageInlineSizeLimit,
+              name: "static/media/[name].[hash:8].[ext]"
+            }
+          }
+        ]
+      }
     ]
   };