necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.65k stars 1.79k forks source link

[art]: ReferenceError: document is not defined #737

Closed joncursi closed 6 years ago

joncursi commented 6 years ago

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.

joncursi commented 6 years ago

If it helps explain the context, I'm using Meteor which eagerly loads all of this module's code. Meteor doesn't support code splitting / tree shaking, so I can't tell it not to. Is it possible to make a code change in this repo so that the ART module will not crash the server?

RangerMauve commented 6 years ago

This is an issue with ART not working properly for server-side-rendering. You should ask them about what needs to be done.

koulmomo commented 6 years ago

relevant PR on art https://github.com/sebmarkbage/art/pull/16

bad news is the repo seems inactive.

necolas commented 6 years ago

We could also raise this issue with the React team, as they maintain react-art in the new react monorepo. In the meantime, using the RNW babel plugin (is this possible with Meteor?) should avoid ART being bundled if you're not using it.

kittBoy commented 6 years ago

how to resolve it

necolas commented 6 years ago

Opened an issue against the react monorepo where react-art is published from:

https://github.com/facebook/react/issues/11916

joenoon commented 6 years ago

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,
  };
}
necolas commented 6 years ago

Ran into what? A reference error originating from art / react-art?

joenoon commented 6 years ago

document is not defined with ssr when I used a CheckBox. react-art was in the stack trace. Apparently the CheckBox depends on it as that is the only time I've seen it.

necolas commented 6 years ago

The checkbox doesn't depend on ART. Can you share the stack trace and what tree is being rendered?

joenoon commented 6 years ago

My code is first referenced in this line. It uses CheckBox. If I don't import CheckBox and instead just use a View in this file, the problem goes away, so thats why I suspect something with CheckBox. But, my app is also bundled with next, so its possible there is more to it:

    at Object.<anonymous> (/Users/myuser/apps/myapp/.next/dist/src/client/components/UI/Forms/CheckInput.js:5:150)

Here is the full stack trace:

ReferenceError: document is not defined
    at hasCanvas (/Users/myuser/apps/myapp/node_modules/art/modes/fast-noSideEffects.js:3:25)
    at Object.<anonymous> (/Users/myuser/apps/myapp/node_modules/art/modes/fast-noSideEffects.js:8:5)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/myuser/apps/myapp/node_modules/react-art/cjs/react-art.development.js:27:25
    at Object.<anonymous> (/Users/myuser/apps/myapp/node_modules/react-art/cjs/react-art.development.js:7797:5)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/node_modules/react-art/index.js:6:20)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/node_modules/react-native-web/dist/components/ART/index.js:5:17)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/node_modules/react-native-web/dist/index.js:110:12)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/.next/dist/src/client/components/UI/Forms/CheckInput.js:5:150)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/src/client/components/UI/Forms/index.js:5:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/src/client/components/Login.js:14:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/src/client/components/ModalsNav.js:5:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/src/client/components/AppLayout.js:15:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/src/client/components/App.js:4:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/myuser/apps/myapp/pages/app.js:2:1)
    at Module._compile (module.js:570:32)
    at Module._compile (/Users/myuser/apps/myapp/node_modules/source-map-support/source-map-support.js:492:25)
    at loader (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/myuser/apps/myapp/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at _callee$ (/Users/myuser/apps/myapp/node_modules/next/dist/server/require.js:33:46)
    at tryCatch (/Users/myuser/apps/myapp/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/myuser/apps/myapp/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/myuser/apps/myapp/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/myuser/apps/myapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/myuser/apps/myapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
necolas commented 6 years ago

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.

skabbes commented 6 years ago

I can confirm, I had this issue a few days ago -and with 0.3.0 it has been fixed. Thanks!

umairfarooq44 commented 6 years ago

I am also getting this error with react-native(android). My version is 0.3.0 but still geting error Can't find variable: document when importing react-native-web

MoOx commented 6 years ago

@umairfarooq44 you should share a stack trace in order to track the root of the issue

umairfarooq44 commented 6 years ago

This is the stack trace : screenshot_2018-01-16-16-07-16

necolas commented 6 years ago

Why are you running web code on Android though?

dmeehan1968 commented 6 years ago

I'm getting a similar error when trying to great a simple stub project served with webpack-dev-server.

NB: Yes, I am injecting react native/web components into my custom Component as props.

index.js which is the entry point for webpack:

import React from 'react'
import { AppRegistry, Text, View, StyleSheet } from 'react-native'
import HelloWorld from '../common/HelloWorld'

const WebApp = () => {
  const props = { Text, View, StyleSheet }
  return <HelloWorld { ...props } />
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
AppRegistry.runApplication('HelloWorld', { rootTag: document.getElementById('app') });

When attempting to run the dev server, Stack trace is:

webpack-dev-server --config ./src/web/webpack.config.babel.js --open

/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/babel-core/lib/transformation/file/o
ptions/option-manager.js:328
        throw e;
        ^

ReferenceError: document is not defined (While processing preset: "/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agn
ostic-boilerplate/node_modules/react-native-web/dist/index.js")
    at hasCanvas (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes/fast-noS
ideEffects.js:3:16)
    at Object.<anonymous> (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes
/fast-noSideEffects.js:8:5)
    at Module._compile (module.js:635:30)

    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnost
ic-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)

When building locally, the stack trace is:

webpack --config ./src/web/webpack.config.babel.js

/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/babel-core/lib/transformation/file/o
ptions/option-manager.js:328

        throw e;
        ^

ReferenceError: document is not defined (While processing preset: "/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agn
ostic-boilerplate/node_modules/react-native-web/dist/index.js")
    at hasCanvas (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes/fast-noS
ideEffects.js:3:16)
    at Object.<anonymous> (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes
/fast-noSideEffects.js:8:5)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnost
ic-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
necolas commented 6 years ago

Use the Babel plugin

dmeehan1968 commented 6 years ago

@necolas Please can you elaborate. Babel plugin to what?

webpack.config.babel.js:

export default {

  entry: path.resolve(__dirname, 'index.js'),

  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, '../../dist')
  },

  devServer: {
    contentBase: path.resolve(__dirname, '../../dist')
  },

  plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'index.html'),
        filename: 'index.html'
      })
  ],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'react-native-web']
          }
        }
      }
    ]
  }
}

.babelrc:

{
  "presets": [ "env" ]
}
dmeehan1968 commented 6 years ago

Ok, hold on, actually that does get past the original error, now gives me a bunch more. Let me double check my setup.

dmeehan1968 commented 6 years ago

Nope, I do still get the same problem, updated stack trace:

Error: Module build failed: ReferenceError: document is not defined (While processing preset: "/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/react-native-web/dist/index.js")
    at hasCanvas (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes/fast-noSideEffects.js:3:16)
    at Object.<anonymous> (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/art/modes/fast-noSideEffects.js:8:5)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at /Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/react-art/cjs/react-art.development.js:27:25
    at Object.<anonymous> (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/react-art/cjs/react-art.development.js:7797:5)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/dmeehan/Documents/Dropbox/Projects/node-tutorials/react-agnostic-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:554:32)
(anonymous function) — build.js:9193:1708
__webpack_require__ — build.js:20
(anonymous function) — build.js:294
__webpack_require__ — build.js:20
(anonymous function) — build.js:63
Global Code — build.js:64
necolas commented 6 years ago

It's a plugin, not a preset. That will avoid importing modules you aren't using (like ART, which doesn't work on the server)

dmeehan1968 commented 6 years ago

Ok, fixed it. The 'resolve' section in webpack.config.babel.js was what I was missing:

import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

export default {

  entry: path.resolve(__dirname, 'index.js'),

  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, '../../dist')
  },

  devServer: {
    contentBase: path.resolve(__dirname, '../../dist')
  },

  plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'index.html'),
        filename: 'index.html'
      })
  ],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [ 'env', 'react' ],
            sourceMaps: true
          }
        }
      }
    ]
  },

  resolve: {
       alias: {
           "react-native": "react-native-web"
       }
   }
}
necolas commented 6 years ago

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

dmeehan1968 commented 6 years ago

Many thanks, I overlooked the webpack config in the getting started and was working from one used on a previous project with amendments (my bad).

There appears to be more than one way of getting a working config, and thanks again for pointing me in the right direction.

In case its of use to others, here is my final webpack.config.babel.js:

import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

export default {

  entry: path.resolve(__dirname, 'index.js'),

  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, '../../dist')
  },

  devtool: 'eval-cheap-module-source-map',

  devServer: {
    contentBase: path.resolve(__dirname, '../../dist')
  },

  plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'index.html'),
        filename: 'index.html'
      })
  ],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            // https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md
            plugins: [ 'react-native-web' ],
            presets: [ 'react-native' ],
            cacheDirectory: true,
            // Don't use root babel config
            babelrc: false,
            // Enable source maps
            sourceMaps: true
          }
        }
      }
    ]
  }
}
joncursi commented 6 years ago

Looking forward to the shim! This has been the only blocker keeping me from upgrading to the 0.3x set of releases

gp3gp3gp3 commented 6 years ago

I'm getting this error when using Jest.

package.json

  "jest": {
    "preset": "react-native",
    "moduleNameMapper": {
      "react-native": "<rootDir>/node_modules/react-native-web"
    },
    "moduleFileExtensions": [
      "ios.js",
      "android.js",
      "web.js",
      "js"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
  }
necolas commented 6 years ago

You're not using the Babel plugin right? I'm just going to keep saying "use the babel plugin" :)

gp3gp3gp3 commented 6 years ago

I am using the babel plugin :(

MoOx commented 6 years ago

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

dmeehan1968 commented 6 years ago

@gp3gp3gp3 'document' is a browser only variable. Any references need to be made conditional:

if (document) {
  // do stuff with document
}
gp3gp3gp3 commented 6 years ago

I'm not making any references to document in my source code, it's just what it's being compiled down to when building the web version of the components. I've got tests working for the native components, but I can't get jest to point to the web version of the components without throwing up about the document variable.

joenoon commented 6 years ago

@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.

necolas commented 6 years ago

Are you running jest with jsdom enabled? Seems unlikely you have the same stack trace as the OP if you're using the babel plugin

gp3gp3gp3 commented 6 years ago

@necolas Passing jest --env=jsdom returns a new error involving canvas. I'm still not certain how to resolve this, but I also don't want to sidetrack this issue too much as it no longer is directly related to the document variable.

screen shot 2018-01-18 at 11 45 28 am

wordyallen commented 6 years ago

I can confirm @gp3gp3gp3 's problem. Downgrading to ^0.1.16

dmeehan1968 commented 6 years ago

I solved this with npm install canvas-prebuilt --save-dev

necolas commented 6 years ago

It looks like jest is trying to run the ART code. Has anyone tried to look into why that's happening in their setup?

dmeehan1968 commented 6 years ago

Yes, in part I figured out that i was still including bits of react-native-web when I didn't need them. I ended up splitting my Jest config to get better control over the react-native vs react-native-web paths.

// jest.config.native.js
module.exports = {
  preset: 'react-native',
  testEnvironment: 'node',
  setupTestFrameworkScriptFile: '<rootDir>test/enzyme.config.js',
  rootDir: '..' // NB: Needed as otherwise all paths become relative to config file
}
// jest.config.web.js
module.exports = {
  preset: "react-native",
  testEnvironment: "jsdom",
  setupTestFrameworkScriptFile: "<rootDir>test/enzyme.config.js",
  snapshotSerializers: [
    "react-native-web/jest/serializer"
  ],
  rootDir: '..'  // NB: Needed as otherwise all paths become relative to config file
}
// package.json
{
  "name": "react-native-web-sketch-boilerplate",
  "author": "",
  "license": "ISC",
  "version": "1.0.0",
  "description": "",
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "dependencies": {
    "auth0-js": "^8.12.2",
    "expo": "^24.0.2",
    "react": "^16.0.0",
    "react-dom": "^16.2.0",
    "react-native": "^0.51.0",
    "react-native-web": "^0.3.2",
    "react-sketchapp": "^1.0.0"
  },
  "devDependencies": {
    "@skpm/builder": "^0.3.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-native-web": "^0.3.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-function-bind": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "canvas-prebuilt": "^1.6.5-prerelease.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "html-webpack-plugin": "^2.30.1",
    "jest-cli": "^22.1.4",
    "prop-types": "^15.6.0",
    "react-native-scripts": "^1.9.0",
    "react-test-renderer": "^16.2.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  },
  "scripts": {
    "native:start": "react-native-scripts start",
    "native:eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "sketch": "skpm-build --watch --run",
    "sketch:build": "skpm-build",
    "sketch:watch": "skpm-build --watch",
    "sketch:render:once": "skpm-build --run",
    "test:web": "BABEL_ENV=test:web jest --config=./test/jest.config.web.js",
    "test:native": "BABEL_ENV=test:native jest --config=./test/jest.config.native.js",
    "web": "webpack-dev-server --config ./web/webpack.config.js --open --inline --hot",
    "web:build": "webpack --config ./web/webpack.config.js"
  },
  "skpm": {
    "main": "react-native-web-sketch-boilerplate.sketchplugin",
    "manifest": "sketch/manifest.json"
  }
}
// .babelrc
{
  "presets": ["env", "react", "react-native"],
  "env": {
    "test:web": {
      "plugins": ["react-native-web"]
    }
  }
}

Repo is Here

necolas commented 6 years ago

Right, so the Babel plugin wasn't in use

dmeehan1968 commented 6 years ago

Perhaps you could actually define what you mean by that, by way of example, because if this issue is anything to go by, its not being understood from the docs.

gp3gp3gp3 commented 6 years ago

An example that goes over a stable way of integrating tests would be extremely helpful personally. I think there are some misunderstandings of how your code will be transpiled using babel, understandably so since this library is working some serious magic for sharing react components (Thanks BTW @necolas! This repo is awesome!).

I'm still struggling to get my test env set up, especially getting the proper coverage for all js file extensions.

necolas commented 6 years ago

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

dmeehan1968 commented 6 years ago

@necolas Can you define what you mean by the 'Babel plugin', because my example includes 'react-native-web' in the babel plugin configuration, but you seemed to be indicating this wasn't sufficient, or what you meant?

necolas commented 6 years ago

Your example looks good. It sounded like you resolved the issue by making sure the web tests were going through Babel first. I think splitting the configs as you did is sensible and helps keep it clear.

necolas commented 6 years ago

Still waiting for a new version of art to be published

necolas commented 6 years ago

Art has been updated and this issue should be fixed