search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.53k stars 1.11k forks source link

ReferenceError: document is not defined #1440

Closed andreapiras closed 5 years ago

andreapiras commented 5 years ago

Current behavior: When importing build generated from create react app into ssr nextjs -> 'ReferenceError: document is not defined' error gets thrown

Library from is generated from create react app with the following webpack settings:

  globalObject: "this",
  library: 'components',
  libraryTarget: 'umd',

which works perfectly fine on browser but not on ssr

To reproduce:

  1. clone https://github.com/andreapiras/nextexample
  2. yarn build
  3. yarn run dev

Under pages I attached the built library that throws the error at line https://github.com/andreapiras/nextexample/blob/master/pages/main.js#L939

Expected behavior:

Expected the component to behave as it does on web and gets rendered with correct style on ssr env. At the moment is not possible to generate the library changing target to node.

Environment information:

Am I missing something? Thank you

andreapiras commented 5 years ago

I think this is related to this https://github.com/emotion-js/emotion/issues/1246

Andarist commented 5 years ago

Unless you force next/webpack to use non-default settings for those: https://github.com/zeit/next.js/blob/94e81c02b904b4c27beb7bd03b15693dfccda3ad/packages/next/build/webpack-config.ts#L316 https://github.com/zeit/next.js/blob/94e81c02b904b4c27beb7bd03b15693dfccda3ad/packages/next/build/webpack-config.ts#L164 it should work OK. If the issue persists with current Next.JS version please share a full repro case - current repro has some dist file and no reference to emotion in package.json etc. If the issue is still reproducible I would be interested in seeing whole repository - with config, source files etc

Vadorequest commented 5 years ago

Having a similar issue if I change jest.config.js as stated in the doc:

snapshotSerializers: ['jest-emotion'], // XXX See https://emotion.sh/docs/jest-emotion

As soon as I add this, it breaks my tests

    PrettyFormatPluginError: document is not definedReferenceError: document is not defined

      415 |       expect(link.props.onClick).toBeInstanceOf(Function);
      416 |       expect(link.props.onClick()).toEqual('clicked');
    > 417 |       expect(link).toMatchSnapshot();
          |                    ^
      418 |     });
      419 | 
      420 |   });

      at getStyleElements (node_modules/jest-emotion/dist/jest-emotion.cjs.dev.js:199:29)
      at Object.print (node_modules/jest-emotion/dist/jest-emotion.cjs.dev.js:424:20)
      at printPlugin (node_modules/pretty-format/build/index.js:310:16)
      at prettyFormat (node_modules/pretty-format/build/index.js:526:16)
      at Object.throwingMatcher (node_modules/expect/build/index.js:342:33)
      at Object.<anonymous> (src/components/GraphCMSAsset.test.tsx:417:20)

Tests were passing before adding a custom snapshotSerializers

Andarist commented 5 years ago

@Vadorequest could you share repro case?

Vadorequest commented 5 years ago

Will try to when I OSS my project... Trying to build a boilerplate with everything pre-configured. :)