next/dynamic error - Githubissues

How to make middleware work with Next.js dynamic import? Thanks

console error

middleware.ts

import {
  chainMatch,
  csp,
  isPageRequest,
  nextSafe,
  strictDynamic,
  strictInlineStyles,
} from '@next-safe/middleware';

type HostNameScheme = `${string}.${string}` | 'localhost';
type HostProtocolSchemes = `${string}://` | '';
type PortScheme = `:${number}` | '' | ':*';
type HostSource = `${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;

const adminUrl = process.env.NEXT_PUBLIC_ADMIN_URL as HostSource;

const securityMiddleware = [
  nextSafe({
    disableCsp: true,
    permissionsPolicy: false,
  }),
  csp({
    directives: {
      'img-src': ['self', 'data:'],
      'font-src': ['self', 'data:'],
      'media-src': ['self', 'blob:', adminUrl],
      'style-src': ['self'],
    },
  }),
  strictDynamic(),
  strictInlineStyles(),
];

export default chainMatch(isPageRequest)(...securityMiddleware);

_document.tsx

import React from 'react';
import { createStylesServer, ServerStyles } from '@mantine/next';
import {
  getCspInitialProps,
  provideComponents,
} from '@next-safe/middleware/dist/document';
import Document, {
  DocumentContext,
  DocumentInitialProps,
  Html,
  Main,
} from 'next/document';

const stylesServer = createStylesServer();

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await getCspInitialProps({
      ctx,
      trustifyStyles: true,
      hashRawCss: [
        (initialProps) => [
          stylesServer.extractCritical(initialProps.html).css,
          ...stylesServer
            .extractCriticalToChunks(initialProps.html)
            .styles.map((s) => s.css),
        ],
      ],
    });

    initialProps.styles = (
      <>
        {initialProps.styles}
        <ServerStyles html={initialProps.html} server={stylesServer} />
      </>
    );

    return initialProps;
  }

  render() {
    const { Head, NextScript } = provideComponents(this.props);
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  crossOrigin: 'anonymous',
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|jpeg|png|woff2)',
        locale: false,
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, stale-while-revalidate',
          },
        ],
      },
    ];
  },
};

module.exports = withBundleAnalyzer(nextConfig);

package.json

"@emotion/react": "^11.10.5",
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.5",
"@mantine/next": "^5.10.3",
"@next-safe/middleware": "0.10.0",
"next": "13.1.5",
"react": "18.2.0",
"tailwindcss": "^3.2.4",
"twin.macro": "^3.1.0",

nibtime / next-safe-middleware

next/dynamic error #88