fix: resolve typescript errors and downgrade NextJS

kartevonmorgen · Jul 25, 2023 · 94f13fb · 94f13fb
1 parent b87593b
commit 94f13fb
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 127 deletions.
diff --git a/components/SearchControllers.tsx b/components/SearchControllers.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
-import { useToggle } from 'ahooks'
+import { useToggle } from 'react-use'
 import { Button, Badge } from 'antd'
 import SearchFilters from './SearchFilters'
 import SearchInput from './SearchInput'
@@ -12,7 +12,7 @@ import TypeChooser from './TypeChooser'
 const onShowFilters = (toggleShowFilters) => () => (toggleShowFilters())
 
 const SearchControllers: FC = (_props) => {
-  const [showFilters, { toggle: toggleShowFilters }] = useToggle('0', '1')
+  const [showFilters, toggleShowFilters ] = useToggle(false)
 
   const router = useRouter()
 
@@ -45,7 +45,7 @@ const SearchControllers: FC = (_props) => {
       <TypeChooser/>
 
       <SearchFilters
-        showFilters={showFilters}
+        showFilters={showFilters ? '0' : '1'}
       />
     </div>
   )

diff --git a/hooks/useResponsive.ts b/hooks/useResponsive.ts
@@ -3,8 +3,6 @@ import { ORDERED_RESPONSIVE_KEYS, Size, VIEW } from '../consts/view'
 import { convertUnknownToInt } from '../utils/utils'
 import { useResponsive } from 'ahooks'
 
-export { useResponsive as default } from 'ahooks'
-
 
 const calculateSidebarSize = (size: Size): Size => {
   const { innerHeight, innerWidth } = window
@@ -43,3 +41,6 @@ export const useSidebar = (): Size => {
 
   return limitSidebarSize(calculateSidebarSize(sidebarSizes.default))
 }
+
+
+export default useResponsive
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -7,11 +7,9 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 module.exports = nextTranslate(
   withBundleAnalyzer({
-    future: {
-      webpack5: true,
-    },
-
     webpack: (config, _options) => {
+      config.resolve.fallback = { fs: false }
+
       config.plugins.push(
         new MomentLocalesPlugin({
           localesToKeep: [
@@ -94,7 +92,6 @@ module.exports = nextTranslate(
       defaultLocale: 'de',
     },
 
-    cssModules: true,
 
   }),
 )
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@ant-design/colors": "^5.0.1",
     "@ant-design/compatible": "^5.1.1",
+    "@ant-design/cssinjs": "^1.13.2",
     "@ant-design/icons": "^4.4.0",
     "@ant-design/pro-layout": "^7.15.3",
     "@fortawesome/fontawesome-free": "^5.15.2",
@@ -42,7 +43,7 @@
     "libphonenumber-js": "^1.9.19",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "next": "^13.4.10",
+    "next": "^12.3.4",
     "next-plugin-antd-less": "^1.0.6",
     "next-translate": "1.0.1",
     "nominatim-browser": "^2.1.0",

diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
@@ -15,7 +15,7 @@ import Footer from '../components/HomeFooter'
 const { Content } = Layout
 
 const Home: FC = () => (
-  <div>
+  <div className="App">
     <HomeEntityRedirector/>
 
     <Layout>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { AppProps } from 'next/app'
 import { Provider } from 'react-redux'
 import { ConfigProvider } from 'antd'
+import get from 'lodash/get'
 import store from '../store'
 import '../utils/icons/font-awesome'
 import Layout from '../components/Layout'
@@ -11,7 +12,7 @@ import 'typeface-rubik/index.css'
 
 
 const MyApp: FC<AppProps> = ({ Component, pageProps }) => (
-  <Layout project={pageProps.project}>
+  <Layout project={get(pageProps, 'project', undefined)}>
     <GlobalLocale/>
 
     <Provider store={store}>

diff --git a/pages/_documents.tsx b/pages/_documents.tsx
@@ -0,0 +1,48 @@
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
+import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs";
+
+const MyDocument = () => (
+  <Html lang="en">
+    <Head />
+    <body>
+      <Main />
+      <NextScript />
+    </body>
+  </Html>
+)
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
+  const cache = createCache();
+  const originalRenderPage = ctx.renderPage;
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) => (props) =>
+        (
+          <StyleProvider cache={cache}>
+            <App {...props} />
+          </StyleProvider>
+        ),
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+  // 1.1 extract style which had been used
+  const style = extractStyle(cache, true);
+  return {
+    ...initialProps,
+    styles: (
+      <>
+        {initialProps.styles}
+        {/* 1.2 inject css */}
+        <style dangerouslySetInnerHTML={{ __html: style }}></style>
+      </>
+    ),
+  };
+}
+
+export default MyDocument;
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,6 +18,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "importHelpers": true,
     "plugins": [
       {
         "name": "next"