react-native-web: [art]: ReferenceError: document is not defined

After upgrading to the latest version of RNW that includes the ART module, I started getting this error on application startup:

W20171220-14:45:17.615(-5)? (STDERR) ReferenceError: document is not defined
W20171220-14:45:17.615(-5)? (STDERR)     at hasCanvas (/Users/joncursi/Sites/joncursi/redbird-web/node_modules/art/modes/fast-noSideEffects.js:3:16)
W20171220-14:45:17.615(-5)? (STDERR)     at Object.<anonymous> (/Users/joncursi/Sites/joncursi/redbird-web/node_modules/art/modes/fast-noSideEffects.js:8:5)
W20171220-14:45:17.616(-5)? (STDERR)     at Module._compile (module.js:635:30)
W20171220-14:45:17.616(-5)? (STDERR)     at Object.Module._extensions..js (module.js:646:10)
W20171220-14:45:17.616(-5)? (STDERR)     at Module.load (module.js:554:32)
W20171220-14:45:17.616(-5)? (STDERR)     at tryModuleLoad (module.js:497:12)
W20171220-14:45:17.616(-5)? (STDERR)     at Function.Module._load (module.js:489:3)
W20171220-14:45:17.616(-5)? (STDERR)     at Module.require (module.js:579:17)
W20171220-14:45:17.616(-5)? (STDERR)     at require (internal/module.js:11:18)
W20171220-14:45:17.617(-5)? (STDERR)     at /Users/joncursi/Sites/joncursi/redbird-web/node_modules/react-art/cjs/react-art.development.js:27:25

I followed the chain and it seems that ART -> react-art -> art module, which causes the break. Any suggestions on how to resolve this? I am using SSR in my app.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 48 (20 by maintainers)

Most upvoted comments

Alright I’ll work on improving that for the next release. Thanks

necolas on Jan 25, 2018

@gp3gp3gp3 just add this to your server-side code as a fix until it gets sorted out upstream: https://github.com/necolas/react-native-web/issues/737#issuecomment-355729136

I don’t see any real downside for the time being and it lets you move forward. In my case simply using one certain component from RNW seems to have caused a chain reaction causing the react-art stuff to be included, which doesn’t check for document, which causes the problem.

joenoon on Jan 17, 2018

Good news, PR has been merged in art repo. Should spread in react-art soon.

MoOx on Jan 17, 2018

As mentioned in the docs, you should be using the provided babel plugin and not excluding all of node_modules. Include any directories you want processed

necolas on Jan 16, 2018

You can see from the stack trace that the error lies in art. The reason this only happens with CheckBox is because of a bug in 0.2.2 (that component is missing from the Babel plugin’s list). But this will be fixed in 0.3.0 which is due to be published very soon.

necolas on Jan 8, 2018

I ran into this when I tried to use the CheckBox component today. A quick fix that is working for me so far is to add this ugly hack to the beginning of my server-side code:

if (typeof document === 'undefined') {
  global.document = {
    createElement: () => null,
  };
}

joenoon on Jan 6, 2018