Fix building packages and apps

Number of small changes was required for packages (components/hooks)
and for Next.js app to build properly.

* Next.js' config now includes "esmExternals: loose". In commit ee0a27f
  "react-markdown" and "remark-gfm" were changed to use dynamic imports
  to avoid errors. While this worked in deve mode, it still broke down
  when running prebuilt app. This setting once again sweeps the problem
  under the rug.
* Added @babel/runtime for packages/components to fix the build process
  done by preconstruct.
* Renamed "types" fields in package.json of packages/components and
  packages/hooks to use the names of the files actually generated when
  the packages are built with preconstruct.
* In packages/components, import React in all files where it's used.
  While this is not required by the IDE or Next.js dev server, they
  will cause errors when built Next.js app tries to use the packages.
* In packages/components, import React in all files where it's used
  directly, e.g. by calling "React.FC". Don't import React in files
  that just use JSX elements, since that's not required anymore and
  goes against our linting rules. However, for this to work the same
  way consistently between the packages and the Next.js app using them,
  "runtime: automatic" was added for "@babel/preset-react" setting.

Author: anttimaki

README.md

@@ -28,6 +28,25 @@ yarn workspace @thunderstore/nextjs dev
 That's it. Changes done to `apps/nextjs` and `packages/components` should both
 be automatically visible at [http://localhost:3000/].
 
+```
+// production build, assumes yarn install has already been run
+// build packages/* with preconstruct
+yarn build
+
+// build and start Next.js prod server
+yarn workspace @thunderstore/nextjs build
+yarn workspace @thunderstore/nextjs start
+```
+
+### Troubleshooting
+
+**After running `yarn build`, all the links disappeared from the page**
+
+**Solution**: This seems to occur only when Next.js dev server has already been
+up before the packages were built. Most likely this is a cache issue which
+results in a rehydration issue on client-side. Simply running `yarn` or manually
+deleting `apps/nextjs/.next` after running `yarn build` should solve the issue.
+
 ### Adding dependencies
 
 To add new dependencies to existing packages, simply run something like:

apps/nextjs/next.config.js

@@ -1,3 +1,7 @@
 const withPreconstruct = require("@preconstruct/next");
 
-module.exports = withPreconstruct();
+module.exports = withPreconstruct({
+  experimental: {
+    esmExternals: "loose",
+  },
+});

babel.config.js

@@ -7,7 +7,12 @@ module.exports = {
         loose: true,
       },
     ],
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
     "@babel/preset-typescript",
   ],
   plugins: ["@babel/plugin-transform-runtime"],

packages/components/package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/thunderstore-io/thunderstore-ui/tree/master/packages/components",
   "main": "dist/thunderstore-components.cjs.js",
   "module": "dist/thunderstore-components.esm.js",
-  "types": "./dist/index.d.ts",
+  "types": "dist/thunderstore-components.cjs.d.ts",
   "files": [
     "dist"
   ],
@@ -14,6 +14,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.7",
     "@chakra-ui/react": "0.0.0-pr-2022062070",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",

packages/components/src/components/BreadCrumbs.tsx

@@ -1,5 +1,5 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
-import { Fragment } from "react";
+import React, { Fragment } from "react";
 
 import { Raquo } from "./Icons";
 

packages/components/src/components/Internals.tsx

@@ -2,6 +2,7 @@
  * Collection of small, shared components intended for internal use.
  */
 import { Flex, Image } from "@chakra-ui/react";
+import React from "react";
 
 import { QuestionMarkIcon } from "./Icons";
 

packages/hooks/package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/thunderstore-io/thunderstore-ui/tree/master/packages/hooks",
   "main": "dist/thunderstore-hooks.cjs.js",
   "module": "dist/thunderstore-hooks.esm.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/thunderstore-hooks.cjs.d.ts",
   "files": [
     "dist"
   ],

yarn.lock

@@ -1085,7 +1085,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
   integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==