NextJS import global stylesheets in all components

[Norfeldt]

Thanks to @lmiller1990 I got cypress component testing working with my NextJS application. It also plays nicely with .scss files.

I just ran into an issue with my global styles which are imported in the /pages/_app.tsx - which is the only place NextJS wanna see them. Then you have to use css modules in all of your components. Really fine concept 👍 but my component tests should also have the global styles.

Tried to add them like this

./cypress/support/index.ts

/// <reference types="cypress" />

import '@testing-library/cypress/add-commands'

import '~/styles/normalize.scss'
import '~/styles/globals.scss'
import '~/styles/typography.scss'

But that throws off NextJS

ERROR in ./styles/globals.scss
Module Error (from ./node_modules/next/dist/build/webpack/loaders/error-loader.js):
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
...

[Norfeldt]

I found a "hack" for it.. Converted my global stylesheets to styled components

./pages/_app.tsx

import NormalizeStyle from '~/styles/NormalizeStyle'
import GlobalStyle from '~/styles/GlobalStyle'
import TypographyStyle from '~/styles/TypographyStyle'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NormalizeStyle />
      <GlobalStyle />
      <TypographyStyle />
   
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

that allows me to get the styles in like this

describe('DishCard', () => {
  it('looks great', () => {
    mount(
      <>
        <NormalizeStyle />
        <GlobalStyle />
        <TypographyStyle />

        <CartProvider>
          <MenuProvider>
            <DishCard id="dish02" />
          </MenuProvider>
        </CartProvider>
      </>
    )
    cy.findByText('CHICKEN', { exact: false })
  })
})

Currently trying to make a helper method to hide it a bit

./cypress/support/render.tsx

import React from 'react'
import { mount } from '@cypress/react'

import NormalizeStyle from '~/styles/NormalizeStyle'
import GlobalStyle from '~/styles/GlobalStyle'
import TypographyStyle from '~/styles/TypographyStyle'

function render(Component: React.ReactNode): React.ReactNode {
  return mount(
    <>
      <NormalizeStyle />
      <GlobalStyle />
      <TypographyStyle />

      <Component />
    </>
  )
}

export { render }

describe('DishCard', () => {
  it('looks great', () => {
    render(
      <>
        <CartProvider>
          <MenuProvider>
            <DishCard id="dish02" />
          </MenuProvider>
        </CartProvider>
      </>
    )
    cy.findByText('CHICKEN', { exact: false })
  })
})

but it does not work

Error
The following error originated from your test code, not from Cypress.

  > Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

[alfupe]

I would love Cypress to add the solution you've proposed here: #16294 (reply in thread)

In the meantime, I've done a very silly mount alias that imports my global styles which import other things like semantic-ui, etc. (this is being used in a CRA application).

import { mount as cyMount } from '@cypress/react';
import 'path/to/index.scss';

export function mount(Component, options) {
  return cyMount(Component, options);
}

and it's used like the cypress mount

import PasswordRevealerInput from './PasswordRevealerInput';
import { mount } from 'modules/mount';

it('renders learn react link', () => {
  mount(<PasswordRevealerInput />);
  cy.get('input').type('Lorem ipsum');
  cy.get('input').should('have.attr', 'type').and('eq', 'password');
  cy.get('.eye').click();
  cy.get('input').should('have.attr', 'type').and('eq', 'text');
});

[Norfeldt]

I did try something similar without luck. I just retried your suggestion and it stills fails.

import { mount as cyMount } from '@cypress/react'
import '~/styles/Global.scss'

export function mount(Compontent: Parameters<typeof cyMount>[0], options?: Parameters<typeof cyMount>[1]) {
  return cyMount(Compontent, options)
}

Terminal error message

Module Error (from ./node_modules/next/dist/build/webpack/loaders/error-loader.js):
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: cypress/helpers/mountWithGlobalStyles/index.ts
Error: Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: cypress/helpers/mountWithGlobalStyles/index.ts
    at Object.ErrorLoader (/Users/norfeldt/Repos/locali-web/node_modules/next/build/webpack/loaders/error-loader.ts:20:15)
 @ ./cypress/helpers/mountWithGlobalStyles/index.ts 2:0-30
 @ ./components/PaymentSucceededMessage/index.spec.tsx 9:0-64 16:4-9
 @ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 37:16-141
 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

ERROR in ./styles/Global.scss
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:60219:17)
    at /Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:60305:5
    at /Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25961:3
    at iterateNormalLoaders (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25787:10)
    at iterateNormalLoaders (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25794:10)
    at /Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25809:3
    at runSyncOrAsync (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25692:12)
    at iterateNormalLoaders (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25805:2)
    at Array.<anonymous> (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:25778:4)
    at runCallbacks (/Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:15395:15)
    at /Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:15568:4
    at /Users/norfeldt/Repos/locali-web/node_modules/next/dist/compiled/webpack/bundle5.js:24755:16
    at /Users/norfeldt/Library/Caches/Cypress/7.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
 @ ./cypress/helpers/mountWithGlobalStyles/index.ts 2:0-30
 @ ./components/PaymentSucceededMessage/index.spec.tsx 9:0-64 16:4-9

[Norfeldt]

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

I have found a "hack" - I can copy my global styles into node_modules/@cypress/global.scss and then this will work

import { mount as cyMount } from '@cypress/react'
import '@cypress/global.scss'

export function mount(
  tsx: Parameters<typeof cyMount>[0],
  options?: Parameters<typeof cyMount>[1]
) {
  return cyMount(tsx, options)
}

import React from 'react'
// import { mount } from '@cypress/react'
import { mount } from '~/cypress/helpers/mountWithGlobalStyles'

import ResizeWrapper from '~/cypress/helpers/ResizeWrapper'
// import GlobalStyle from '~/styles/GlobalStyle'

import { CartProvider } from '~/state/CartContext'

import PaymentSucceededMessage from '.'

describe('PaymentYes', () => {
  it('displays', () => {
    mount(
      <>
        {/* <GlobalStyle /> */}
        <ResizeWrapper>
          <CartProvider>
            <PaymentSucceededMessage />
          </CartProvider>
        </ResizeWrapper>
      </>
    )

    cy.findByText('ORDER­BEKRÄFTELSE').should('be.visible')
  })
})

this can be automated by an script that does this copies it into the node_modules folder before starting the cypress component-testing.

[lmiller1990]

Interesting. I thought about this a bit more @alfupe @Norfeldt.

Something like

{
  "component: {
    globalStylesheets: [/*...*/]
  }
}

Seems attractive, but I think it's a hard sell to the rest of the team. It leaks component testing configuration into Cypress at large. cypress.json is more for general, Cypress configuration. I think what might be better is configuring this on the React level, eg:

import { mount, configure } from '@cypres/react'

configure({
  globalStylesheets: [/* ... */]
})

This might go in cypress/support/index.js, for example. Same ideal, but the coupling is with React, not the entire Cypress config (which is really huge and complex and goes through a lot of pre-processing/transformations).

As for opting out, that's another issue, but should be solvable on the React level, too.

On the other hand, GitHub discussions are very difficult to follow. The UI is really confusing! I copy pasted this idea here so it won't get lost.

[Norfeldt]

On the other hand, GitHub discussions are very difficult to follow. The UI is really confusing!

I totally agree with you @lmiller1990 !

[lmiller1990]

Hmm good point. This is going to be a problem for a lot of frameworks (not just Next.js). Importing them to support should generally be okay, but seems Next.js isn't happy.

I can look next week sometime, we should find a clean solution and build it into the nextjs adapter so people don't need to think about this.

[Norfeldt]

For now I have to use styled components as a hack - would prefer to avoid it since I think that .scss and css modules does the trick for me.

[lmiller1990]

Agreed styled-components are a bit of a hack. I can't look at this until at least next week, most likely, if you have any other ideas in the meantime how we might solve this, please let me know.

We might need to patch the next.js webpack config dynamically. CRA also has a similar problem where the webpack config has a bunch of limitations that make it painful to integrate, so it would be cool if we can find some kind of pattern that works for the general problem of "this wepback config is designed specifically for one thing, but we want to use it for something else".

[Norfeldt]

I have struggled with a lot of different ways to make the hack less painful.

Was trying to keep my .scss files and then just @import them into my styled component - it did not work.

[lmiller1990]

There are many such problems with webpack configs outside of the env they are designed for. I will track them here: #16509

We need some kind of general solution for this.

[Norfeldt]

I'm all for general solutions :-)

[Vadorequest]

Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js.

This issue is not supposed to happen on Next.js v10, there was an update that now allows to import .css files from any component. What version are you using? Upgrading might fix it (I import .css from any component and it works well)

[Vadorequest]

https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets supported since 9.2, but you're not the first having issues with it. Maybe open an issue on the Next.js repo?

[Norfeldt]

I tried @Vadorequest vercel/next.js#25448 it was closed and moved to discussions

[Norfeldt]

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

It's because it's not located in node_modules...

[Vadorequest]

Good catch, I hadn't notice it was limites to node_modules. I'm not sure if it's a bug then, but definitely bad luck for you. :/

[Norfeldt]

Not completely out of luck #16294 (reply in thread)

[Norfeldt]

This hack works better for me than the styles components (which keeps showing a warning because @import)

cypress/helpers/mountWithGlobalStyles.tsx

import { mount as cyMount } from '@cypress/react'
import '@cypress/react/global.css'

export function mount(tsx: Parameters<typeof cyMount>[0], options?: Parameters<typeof cyMount>[1]) {
  return cyMount(tsx, options)
}

styles/global.css

@import './normalize.css';
@import './general.css';
@import './typography.css';

$ yarn add -D copyfiles

package.json

  "scripts": {
    ...
    "cy:open-ct": "yarn copyfiles -EV './styles/*.css' ./node_modules/@cypress/react && cypress open-ct",
    ...

[Norfeldt]

This will of course not have any hot reloading for changes in the global styles...

[ukind]

I think I found another solution to allowing global.css to be imported to component.ts, I tested it, and work for me cypress next js

[EandrewJones]

Care to share?