gatsby-plugin-react-native-web: v3 static query problems

v3 does not support useStaticQuery

@sidharthachatterjee maybe you could give some insights here?

@EvanBacon brought Expo SDK support to this plugin in v3. Basically, Expo apis (usually for RN) now offer a binding for web, so they can also work in Gatsby too.

The thing is:

Gatsby has a complex webpack config / babel loader
Expo web has a complex webpack config / babel loader
Somehow we need to make the 2 play well together, or merge them

The webpack config of gatsby is “modified” by this method: https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/addons/withUnimodules.ts#L22

It adds the expo babel loader (which is able to transpile RN modules) at the end of the webpack rules (so afaik it takes priority over the gatsby one).

So we have gatsbyLoader(expoLoader(jsCode)) somehow (at least for code in /src)

So, when gatsby loader (which has the static queries setup) do his work, the static queries may already have been “processed” (not sure how babel works), and now the gatsby loader do not recognize them anymore (???not sure about that???).

@sidharthachatterjee by chance do you know if it’s possible to make static queries work with this gatsbyLoader(expoLoader(jsCode)) setup?

The problems I see:

It might be complex to merge expo loader into gatsby loader.
the Expo Webpack config should also be easy to apply to other frameworks as well (NextJS, CRA, Electron…)

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 26 (12 by maintainers)

Most upvoted comments

So I’ve been able to make a static build!

The Expo loader does use babel.config.js if present so I added:

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

and it works

I had to alias the babel plugin because of this error, a bit surprised because the plugin would be used by 2 distinct loaders:

Generating JavaScript bundles failed

Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby/node_modules/babel-plugin-remove-graphql-queries/index.js",
    "dirname": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby",
    "ownPass": false,
    "file": {
      "request": "babel-plugin-remove-graphql-queries",
      "resolved": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby/node_modules/babel-plugin-remove-graphql-queries/index.js"
    }
  },
  {
    "alias": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby/node_modules/babel-plugin-remove-graphql-queries/index.js",
    "dirname": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby",
    "file": {
      "request": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby/node_modules/babel-plugin-remove-graphql-queries/index.js",
      "resolved": "/Users/sebastienlorber/Desktop/expo-examples/with-gatsby/node_modules/babel-plugin-remove-graphql-queries/index.js"
    }
  }
]

Not sure it’s very reliable but at least it works.

slorber on Dec 18, 2019

That’s probably the fix then, I’ll go down that route and see how I do.

tamagokun on Jan 24, 2020

You can also see a working app in the example folder of this repo: https://github.com/nandorojo/expo-gatsby-navigation

nandorojo on Jan 24, 2020