Ссылка на страницу sh разрывает стили в рабочем приложении Next js - PullRequest
Новая
       31

Ссылка на страницу sh разрывает стили в рабочем приложении Next js

2 голосов
/ 04 февраля 2020

У меня есть веб-сайт, созданный с помощью Next js, который нарушает стили на странице refre sh или когда пользователь заходит на веб-сайт напрямую по указанному маршруту c, а не по маршруту root. Например, https://vinnieography.web.app/contacts (если ссылка на сайт выглядит нормально, попробуйте обновить sh и посмотрите)

Сайт размещен на функциях Firebase и использует Next js и * 1006. * Компоненты Ant design .

Снимок экрана сайта перед ссылкой sh

Screenshot of the site before a refresh

Снимок экрана сайта после ссылки sh (обратите внимание на отсутствующую навигацию)

навигация не полностью отсутствует, но она стала мобильной навигацией, значок которой не отображается, но вы получаете выпадающий с ссылками Nav при наведении вокруг области Nav.

Screenshot of the site after a refresh

My next.config. js

const withCss = require('@zeit/next-css')

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      })
    }

    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    return config
  },
  distDir: "../../dist/client"
})

Версии Next js, React & Antd. 

"antd": "^3.24.2",
"next": "^9.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"@zeit/next-css": "^1.0.1",

Вот ссылка на полное репо

...