ReferenceError: document is not defined

[andreapiras]

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:

• "react": "16.8.6",
• "@emotion/core": "^10.0.14",

Am I missing something?
Thank you

[andreapiras]

I think this is related to this #1246

[Andarist]

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]

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]

@Vadorequest could you share repro case?

[Vadorequest]

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