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

[joncursi]

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]

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]

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

[koulmomo]

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

bad news is the repo seems inactive.

[necolas]

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]

how to resolve it

[necolas]

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

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

[joenoon]

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]

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

[joenoon]

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]

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

[joenoon]

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]

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]

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

[umairfarooq44]

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]

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

[umairfarooq44]

This is the stack trace :

[necolas]

Why are you running web code on Android though?

[dmeehan1968]

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]

Use the Babel plugin

[dmeehan1968]

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

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

[dmeehan1968]

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]

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]

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]

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]

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]

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

[gp3gp3gp3]

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]

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

[gp3gp3gp3]

I am using the babel plugin :(

[MoOx]

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

[dmeehan1968]

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

if (document) {
  // do stuff with document
}

[gp3gp3gp3]

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]

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

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]

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

[wordyallen]

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

[dmeehan1968]

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

[necolas]

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]

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]

Right, so the Babel plugin wasn't in use

[dmeehan1968]

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]

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]

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

[dmeehan1968]

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

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]

Still waiting for a new version of art to be published

[necolas]

Art has been updated and this issue should be fixed