Error when running `yarn develop`

[garrettg123]

TypeError: Cannot read property 'plugins' of undefined
    at customizeExpoJsLoader (./node_modules/gatsby-plugin-react-native-web/gatsby-node.js:37:71)

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

[garrettg123]

Getting this at 3.0.0-beta.5:

Error: It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.

[garrettg123]

Getting this at 2.0.0:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

[slorber]

Hi,

v3.1.0 is the only one you should use.

Do you have a Gatsby open-source site on which you try to add this plugin? Or could you share more details about your existing setup?

[garrettg123]

Sure, it's a monorepo. I just created a fresh Gatsby site in a new package inside the monorepo. Using Node v12.16.2. Here is my package.json:

{
  "name": "web-gatsby",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "expo": "^37.0.10",
    "expo-av": "^8.1.0",
    "gatsby": "^2.21.22",
    "gatsby-image": "^2.4.3",
    "gatsby-plugin-manifest": "^2.4.2",
    "gatsby-plugin-offline": "^3.2.1",
    "gatsby-plugin-react-helmet": "^3.3.1",
    "gatsby-plugin-react-native-web": "^3.1.0",
    "gatsby-plugin-sharp": "^2.6.2",
    "gatsby-source-filesystem": "^2.3.1",
    "gatsby-transformer-sharp": "^2.5.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.0.0",
    "react-native-web": "^0.12.2"
  },
  "devDependencies": {
    "prettier": "2.0.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

This is where I get the error:

web-gatsby> yarn develop
yarn run v1.22.4
$ gatsby develop
success open and validate gatsby-configs - 0.070s
success load plugins - 4.546s
success onPreInit - 0.018s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.188s
success copy gatsby files - 0.623s
success onPreBootstrap - 0.098s
success createSchemaCustomization - 0.209s
success source and transform nodes - 1.528s
success building schema - 1.836s
success createPages - 0.005s
success createPagesStatefully - 0.678s
success onPreExtractQueries - 0.004s
success update schema - 0.176s
success extract queries from components - 1.391s
success write out requires - 0.059s
success write out redirect data - 0.005s
success Build manifest and related icons - 0.375s
success onPostBootstrap - 0.391s
⠀
info bootstrap finished - 20.571 s
⠀
success run queries - 0.262s - 8/8 30.56/s

 ERROR

TypeError: Cannot read property 'plugins' of undefined

[garrettg123]

When I add a log:

const customizeExpoJsLoader = config => {
  const expoJsLoaderRule = getExpoJsLoaderRule(config);
  console.log(expoJsLoaderRule.use) // MY CODE
  expoJsLoaderRule.use.options.plugins = expoJsLoaderRule.use.options.plugins || []; // We need to add the gatsby static queries babel plugin to expo js loader

I get:

[
  {
    options: { stage: 'develop-html', configFile: true, compact: false },
    loader: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils/babel-loader.js'
  }
]

but the plugin is expecting it to be an object, so expoJsLoaderRule.use.options is undefined and expoJsLoaderRule.use.options.plugins throws the error.

[garrettg123]

When I try changing it to

expoJsLoaderRule.use[0].options.plugins = expoJsLoaderRule.use[0].options.plugins || []; // We need to add the gatsby static queries babel plugin to expo js loader

It seems to fail from a different error. It looks like the console log prints twice, so the loader function runs twice. Here's the output:

success run queries - 0.069s - 5/5 72.83/s
[
  {
    options: { stage: 'develop-html', configFile: true, compact: false },
    loader: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils/babel-loader.js'
  }
]
[
  {
    options: {
      useEslintrc: false,
      resolvePluginsRelativeTo: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils',
      baseConfig: [Object]
    },
    loader: '/Users/gsquare567/Sites/think/node_modules/eslint-loader/index.js'
  }
]

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

The "path" argument must be of type string. Received an instance of Array

File: .cache/app.js

failed Building development bundle - 5.110s

[slorber]

Hi,

Will have to look at all this. Probably won't have much time this week though.

I haven't tested this plugin in a monorepo yet. I guess you also use yarn workspace and hoisting dependencies. This is definitively something I want to support, to make sharing code between static web and mobile easy. I also want to migrate my own site to a monorepo when it's done.

There's another issue about monorepos here but it seems unrelated: https://github.com/slorber/gatsby-plugin-react-native-web/issues/32

[Daavidaviid]

When I try changing it to

expoJsLoaderRule.use[0].options.plugins = expoJsLoaderRule.use[0].options.plugins || []; // We need to add the gatsby static queries babel plugin to expo js loader

It seems to fail from a different error. It looks like the console log prints twice, so the loader function runs twice. Here's the output:

success run queries - 0.069s - 5/5 72.83/s
[
  {
    options: { stage: 'develop-html', configFile: true, compact: false },
    loader: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils/babel-loader.js'
  }
]
[
  {
    options: {
      useEslintrc: false,
      resolvePluginsRelativeTo: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils',
      baseConfig: [Object]
    },
    loader: '/Users/gsquare567/Sites/think/node_modules/eslint-loader/index.js'
  }
]

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

The "path" argument must be of type string. Received an instance of Array

File: .cache/app.js

failed Building development bundle - 5.110s

Same thing here, were you able to solve it ?

[garrettg123]

No, I gave up on it. I'd try nohoist: ["**"] and see if that works. That should make your package within a monorepo act just like a standalone package. If it still doesn't work, I'm guessing there's something wrong with it even outside of a monorepo.

On Thu, May 28, 2020 at 4:34 PM David Guerin notifications@github.com wrote:

When I try changing it to

expoJsLoaderRule.use[0].options.plugins = expoJsLoaderRule.use[0].options.plugins || []; // We need to add the gatsby static queries babel plugin to expo js loader

It seems to fail from a different error. It looks like the console log prints twice, so the loader function runs twice. Here's the output:

success run queries - 0.069s - 5/5 72.83/s [ { options: { stage: 'develop-html', configFile: true, compact: false }, loader: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils/babel-loader.js' } ] [ { options: { useEslintrc: false, resolvePluginsRelativeTo: '/Users/gsquare567/Sites/think/web-gatsby/node_modules/gatsby/dist/utils', baseConfig: [Object] }, loader: '/Users/gsquare567/Sites/think/node_modules/eslint-loader/index.js' } ]

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

The "path" argument must be of type string. Received an instance of Array

File: .cache/app.js

failed Building development bundle - 5.110s

Same thing here, were you able to solve it ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/slorber/gatsby-plugin-react-native-web/issues/33#issuecomment-635592146, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJJT3WJPFMHVFPAFQQFVY3RT3DENANCNFSM4M6UE5HA .

-- Garrett

[Daavidaviid]

Oh yeah it worked, thanks ! I don't why I was trying to add nohoist: ["**/gatsby-plugin-react-native-web/**"]

[slorber]

Sorry that it does not work out of the box, I'll try to improve the monorepo support when I have time

[cmaycumber]

I was able to fix this in my monorepo by switching the logic for finding the expo loader to:

const getExpoJsLoaderRule = (config) => {
  const { getExpoBabelLoader } = require('@expo/webpack-config/utils');
  const expoJsLoader = getExpoBabelLoader(config);
  console.log(expoJsLoader);
  return expoJsLoader;
};

However, I started running into issue #38. I'm not sure whether or not it's the new logic I added in or something related to the versions I'm using for expo and gatsby.