Fix Next.js example

Author: hasparus

examples/next/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next/next.config.js

@@ -4,18 +4,30 @@ const withMDX = require('@next/mdx')()
 
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
-  webpack(config) {
-    // This is just for the sake of example app.
-    // yarn link doesn't play well with React hooks.
-    // https://github.com/facebook/react/issues/14257
+  webpack(config, { isServer }) {
+    // Ensure single instances of React and theme-ui packages in the monorepo
     Object.assign(config.resolve.alias, {
       react: path.resolve(__dirname, './node_modules/react'),
       'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      'theme-ui': path.resolve(__dirname, '../../packages/theme-ui'),
+      '@theme-ui/core': path.resolve(__dirname, '../../packages/core'),
+      '@theme-ui/css': path.resolve(__dirname, '../../packages/css'),
+      '@theme-ui/color-modes': path.resolve(__dirname, '../../packages/color-modes'),
+      '@theme-ui/components': path.resolve(__dirname, '../../packages/components'),
+      '@theme-ui/theme-provider': path.resolve(__dirname, '../../packages/theme-provider'),
+      '@emotion/react': path.resolve(__dirname, './node_modules/@emotion/react'),
     })
 
+    // Don't follow symlinks - use package.json exports to resolve to built files
+    config.resolve.symlinks = false
+
+    // Use CJS on server to avoid async ESM module interop issues with @emotion
+    if (isServer) {
+      config.resolve.conditionNames = ['require', 'node', 'default']
+    }
+
     return config
   },
-  // don't typecheck the packages in the example build
   typescript: {
     ignoreBuildErrors: true,
   },