DEV Community

Cover image for 🚀 Gatsby + React Native for Web + Expo 🥳

🚀 Gatsby + React Native for Web + Expo 🥳

Evan Bacon on November 27, 2019

TL;DR: 🎳 Example 📚 Docs In this post I'll show you how to setup your (universal) Expo app to use Gatsby when targeting web! 🚨 If you find bug...
Collapse
 
jstansbe profile image
jstansbe • Edited

Issue:
When adding gatsby and react-native-web to an existing expo project with the above instructions, yarn gatsby develop will error out. Something about gatsby graphql calls at compile time.

Resolution:
Install babel-plugin-remove-graphql-queries plugin and update the babel config file.
yarn add --dev babel-plugin-remove-graphql-queries

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
+    plugins: [['babel-plugin-remove-graphql-queries', {}, 'test-name']],
  }
}

Edit:
I found the fix here: github.com/slorber/gatsby-plugin-r...

Collapse
 
sebastienlorber profile image
Sebastien Lorber

It's been fixed in 3.0.0-beta.7
Please let me know if you have other issues or if you build something meaningful with the plugin.

You shouldn't need a local babel config anymore (but it can be useful if you are using the same folder as a gatsby app + an Expo app, like in this setup).

It may be worth to read also the plugin's readme, as I've just updated it.

Collapse
 
motin profile image
Fredrik Wollsén • Edited

Thanks for this! This got me up and running with SSR in my Typescript Expo project, awesome! However, there is some conflict in Expo's and Gatsby's webpack definitions config which results in process.env.NODE_ENV being set to the string "development" in gatsby-ssr.js and in plugins when running gatsby production builds. Workaround:

exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const existingConfig = getConfig();
  const { plugins } = existingConfig;

  // Remove conflicting expo definitions entry which sets process.env.NODE_ENV to "development" always
  if (process.env.NODE_ENV === "production") {
    const filteredPlugins = plugins.filter(plugin => {
      return !(plugin.definitions && plugin.definitions.__DEV__);
    });
    actions.replaceWebpackConfig({
      ...existingConfig,
      plugins: filteredPlugins
    });
  }
};
Collapse
 
sebastienlorber profile image
Sebastien Lorber

Hi,

I'm maintaining the plugin, can you open an issue about this problem?
I'm not totally able to understand, how is it causing troubles? Does it use react development mode even in production build?

Collapse
 
keung7252 profile image
keung7252 • Edited

Problem1:
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
at instanceOf (/Users/xxx/projects/expo_boilerplate/node_modules/gatsby-recipes/node_modules/graphql/jsutils/instanceOf.js:28:13)
at isInputObjectType (/Users/xxx/projects/expo_boilerplate/node_modules/gatsby-recipes/node_modules/graphql/type/definition.js:168:34)
at typeMapReducer (/Users/xxx/projects/expo_boilerplate/node_modules/gatsby-recipes/node_modules/graphql/type/schema.js:290:41)
at Array.reduce ()
at typeMapReducer (/Users/xxx/projects/expo_boilerplate/node_modules/gatsby-

recipes/node_modules/graphql/type/schema.js:285:34)
at Array.reduce ()
at new GraphQLSchema (/Users/xxx/projects/expo_boilerplate/node_modules/gatsby-recipes/node_modules/graphql/type/schema.js:145:28)
at Object. (/Users/keung/projects/expo_boilerplate/node_modules/gatsby-recipes/dist/graphql-server/server.js:25614:18)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)

Problem2:
hot update was not successful
hot update failed for module "./.cache/app.js". Last file processed: "./.cache/root.js".

Problem3:
"gatsby-plugin-react-native-web": "^3.1.0"
"gatsby": "2.0.0",

it only works on 2.0.0, not 3.0.0

Collapse
 
andrioid profile image
Andri

Amazing stuff Evan! I can't wait to try this out.

Collapse
 
evanbacon profile image
Evan Bacon

Great stuff as always @evanbacon

Collapse
 
rohovdmytro profile image
Rohov Dmytro

Amazing.

Thank you.

Collapse
 
yeich profile image
Yannick Eich • Edited

I didint got it. why did You choose Expo?

Collapse
 
andrioid profile image
Andri

He works on Expo.

Other reasons why this is cool:

  1. Create an app for iOS and Android, then reduce the installation barrier by offering a PWA for very little extra work
  2. Using Gatsby for something like landing pages with reusable logic from your apps <3

I've used Expo in production for years and it's rock solid. There are a lot of people that think Expo is somehow inferior to a vanilla React Native project. It's mostly the same stuff, and unlike many other frameworks, Expo makes it pretty easy to "eject" if you need it.