Next.js: Los estilos duplicados en fragmentos css crean problemas de orden de origen

Creado en 30 abr. 2020  ·  42Comentarios  ·  Fuente: vercel/next.js

Informe de error

Describe el error

Tengo una aplicación que usa un componente en varias páginas. Cuando construyo el proyecto, los estilos de ese componente se duplican en cada uno de los fragmentos de página CSS relevantes; esto crea errores visuales.

Por ejemplo ( some-component y initial-page-component-override son clases aplicadas al mismo elemento en el DOM en la página inicial):

initial-page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

// page specific override
.initial-page-component-override { margin-bottom: 20px; }

second-page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

Cuando se agrega second-page.chunk.css al DOM, los estilos de los componentes se vuelven a aplicar en la parte superior de cualquier estilo específico de página definido en la página inicial. Las anulaciones se pierden y ahora se aplica el margen incorrecto al componente en la página inicial. Nota: esto no es un problema en modo de desarrollo, solo en producción.

Reproducir

Pasos para reproducir el comportamiento, proporcione fragmentos de código o un repositorio:

  1. Realizar pedido https://github.com/petewarman/nextjs-css-module-issue
  2. npm i , npm run build , npm start
  3. Coloca el cursor sobre el botón verde lima
  4. Vea cómo cambia a rosa cuando la hoja de estilo de la segunda página está precargada

Comportamiento esperado

Las declaraciones de estilo no deben duplicarse en hojas de estilo compiladas. Los estilos de componentes deben cargarse (¿en su propio fragmento?) Sobre los estilos específicos de la página.

Información del sistema

  • SO: macOS
  • Versión de Next.js: 9.3.6
  • Versión de Node.js: 10.16.3
bug 3

Comentario más útil

Estoy teniendo exactamente el mismo problema: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

Todos 42 comentarios

Estoy teniendo exactamente el mismo problema: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

El mismo problema aquí también: llorar:
Describí mi problema aquí: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

¿Cualquier progreso? Sigo teniendo el mismo problema y no puedo ponerlo en producción.
Probado en 9.3.7-canary.9

@EduardoPedrosa
Estado: v9.3.7-canary.11 y el problema persiste.

Parece que estamos teniendo un problema similar con los componentes de una biblioteca de componentes compartidos en nuestro monorepo: cualquier estilo en nuestra aplicación que afecte a esos componentes es anulado por los estilos de la biblioteca, a pesar de que la especificidad de los estilos en los archivos CSS de nuestra aplicación es superior y, por tanto, debería tener prioridad. Se ve bien en modo de desarrollo, pero no en producción :(

(Estamos usando módulos SCSS con @zeit/next-sass )

image

image

Cuando estaba usando @ zeit / next-sass o @ zeit / next-css, todo estaba bastante bien con el orden, las preferencias y los duplicados entre los fragmentos. :pensando:

El verdadero problema para mí comienza cuando actualicé nextjs a 9.3 y comencé a usar módulos css.

Probé los dos métodos (next-sass y built-in): el problema existía en ambos casos

Mi pila:
1) Módulos CSS
2) SCSS
3) Dart-Sass con importaciones @use

Probé muchas variaciones y esta funciona para mí (sin estilos duplicados):

1) paquete.json:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next": "9.2.1", (9.4.1 is current)
"node-sass": "npm:[email protected]", (this is dart sass, but can be used default)

2) next.config.js

const path = require('path')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withBundleAnalyzer = require('@next/bundle-analyzer')({ // Optional, of course
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(
  withCSS(
    withSass({
      cssModules: true,
      sassLoaderOptions: {
        // Resolving SASS absolute imports
        includePaths: [path.resolve(__dirname, 'src')],
      },
      cssLoaderOptions: {
        importLoaders: 2,
        localIdentName:
          process.env.NODE_ENV === 'production'
            ? '[hash:base64]'
            : '[name]__[local]__[hash:base64:5]',
      },
      webpack(config, options) {
        // Resolving absolute imports
        config.resolve.modules.push(path.join(__dirname, 'src'))

        // Make global styles work
        config.module.rules.forEach(rule => {
          if (rule.test && rule.test.toString().includes('.scss')) {
            rule.rules = rule.use.map(useRule => {
              if (typeof useRule === 'string') {
                return {
                  loader: useRule,
                }
              }

              if (useRule.loader.startsWith('css-loader')) {
                return {
                  oneOf: [
                    {
                      test: new RegExp('.module.scss$'),
                      loader: useRule.loader,
                      options: useRule.options,
                    },
                    {
                      loader: useRule.loader,
                      options: {},
                    },
                  ],
                }
              }
              return useRule
            })
            delete rule.use
          }
        })

        return config
      },
    }),
  ),
)

3) Importar estilos globales (no módulos) como este:

index.scss:

...
<strong i="19">@import</strong> '~emoji-mart/css/emoji-mart.css';
...

Sería genial, si alguien prueba una configuración de este tipo, así puedo asegurarme de que realmente funcione.

Sugiero reemplazar esto:

.other-page__component-override { background: pink; }

Con este:

.other-page .component-override { background: pink; }

Entonces, los estilos específicos de la página solo se aplican en esa página específica =).

Yo también tengo problemas con este error.
Cambié el next-css a css incorporado y sucedió.
Funciona en modo de desarrollo, pero no funciona en modo de producción cuando se usa CSR. En SSR, no hay problema.

Utilizo el siguiente 9.4.4 con soporte css incorporado y también tengo este problema, ocurre en producción.

Mismo problema en el próximo 9.4.4. Solo en modo de producción

Esto le sucede a nuestro entorno de producción en el próximo 9.4.4, y de alguna manera encontramos una solución.

Al usar node-sass , probamos varias opciones del documento y resolvemos esto agregando un nuevo sassOptions a next.config.js

module.exports = {
  ...,
  sassOptions: {
    outputStyle: 'expanded',
  },
}

Referencia: outputStyle

Después de verificar css classname después de next build , esto parece estar funcionando.
¡Espero que esto ayude!

Gracias por compartir @ Howard86 , lo intenté pero no funcionó aquí. También estamos usando next-css y next-sass en nuestras compilaciones (no el soporte CSS incorporado de next, y tenemos el mismo problema descrito en este problema), y la duplicación ocurre en clases que provienen de css puro importado como css- módulos, que no provienen de estilos sass

@ Howard86 @ alexandre-marchina

Estoy usando CSS incorporado de next, next 9.4.4 y su solución tampoco me funcionó. :llorar:

tengo el mismo problema con antd y la próxima última 😞

mismo problema. css carga perfecta en dev pero en el producto algunos trozos de css no se cargan

El mismo problema aquí también.

Experimenté los mismos problemas con la próxima v9.5.1 en prod build, en dev build los estilos están bien.

Este error hace que el uso de módulos css en next.js sea imposible (porque nadie quiere agregar! Important en los estilos)

Este error hace que el uso de módulos css en next.js sea imposible (porque nadie quiere agregar! Important en los estilos)

Puede aumentar la especificidad de los estilos que anulan los estilos básicos. Por ejemplo, tengamos la dependencia de componentes como Button <- IconButton <- MoreSpecificButton. En este caso, Button tiene sus propios estilos que se vuelven a cargar cuando se cambia a otra página y, por lo tanto, anula los estilos de IconButton y MoreSpecificButton. Si IconButton tiene sus estilos definidos como .className.className , y MoreSpecificButton también tiene sus estilos como .className.className , Button no lo anulará. Y teniendo el hecho de que el orden de los estilos IconButton y MoreSpecificButton es correcto en CSS, los estilos de MoreSpecificButton siempre anularán IconButton - esperado.

Experimenté los mismos problemas con la próxima v9.5.1 en prod build, en dev build los estilos están bien.

Estoy experimentando el mismo problema.

+1 con Tailwind, Bootstrap. La solución actual es importar todos los estilos a través del enlace rel en _document.js. Para Tailwind es una compilación CSS personalizada. Este problema es muy molesto.

Estoy usando módulos css con tailwind (importación css global normal). Inlining css resolvió el orden de carga, pero no sé si todavía se está duplicando, es solo una solución. En producción, no noté un estilo que prevaleciera sobre otro.

https://github.com/vercel/next-plugins/issues/238#issuecomment -432211871

Esto se corrigió en la última versión canary de Next.js. Actualice a next@^9.5.3-canary.7 y avísenos.

No me soluciona, por ejemplo, las alturas de las líneas, los pesos de las fuentes, los colores de fondo, los bordes son diferentes en dev y prod.

@talaikis, por favor, abra una nueva edición con una demostración completamente reproducible. Probé el código exacto dado en esta reproducción y ahora funciona en canary .

Solucionarlo para mí, pero causa otro problema más crítico.
En mi caso, cuando cambio solo la URL hash usando Router.push( localhost: 3000 / # change ) coming from localhost: 3000 `todas las hojas de estilo se vuelven a cargar y la pantalla parpadea.

¿Puedes probar 9.5.3-canary.9 ?

@Timer corriendo npm i :

image

Intenté 9.5.3-canary.9 pero aún persiste el problema con el hash.

No lo mencioné, pero estoy usando 9.5.2 y cuando migré a 9.5.3-canary.6 también hay un error en la consola devtools cuando uso el enrutador para cambiar el hash como el anterior.
El problema no existe en 9.5.3-canary.5 .

image

@fabinppk , abra un nuevo número con una reproducción.

Solo quería confirmar que el problema original parece estar solucionado en 9.5.3-canary.9 . Gracias @Timer

¡Gracias por confirmar @petewarman!

@Timer seguro. Creo que su solución está bien y no está relacionada con este problema en devtools.
Gracias. : +1:

Puede confirmar que esto todavía está sucediendo con 9.5.6-canary.11 , las clases se duplican en fragmentos.

@glottonous todos los problemas comentados en este tema fueron resueltos por temporizador.

Ps: estoy usando 9.5.5. 👌👌

@fabinppk Puedo confirmar que el mismo problema sigue ocurriendo a partir de 9.5.6-canary.11 .

@glottonous Hice algunas pruebas en mi proyecto con la versión 9.5.6-canary.11 y no tuve ningún problema.

Si realmente tiene un problema, abra un nuevo problema haciendo referencia a este. : +1:

en nextjs 10, mismos problemas

Mismos problemas 10.0.1

Empecé # 19055 con una demostración reproducible.

¿Fue útil esta página
0 / 5 - 0 calificaciones