Error when running `yarn develop` #33

garrettg123 · 2020-05-12T08:55:57Z

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",

The text was updated successfully, but these errors were encountered:

garrettg123 · 2020-05-12T09:04:59Z

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 · 2020-05-12T09:06:46Z

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 · 2020-05-12T10:05:10Z

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 · 2020-05-12T20:45:38Z

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 · 2020-05-12T20:53:00Z

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 · 2020-05-12T20:56:26Z

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 · 2020-05-13T07:51:38Z

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: #32

Daavidaviid · 2020-05-28T20:34:00Z

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 · 2020-05-28T22:11:13Z

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 ***@***.***> 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 <#33 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJJT3WJPFMHVFPAFQQFVY3RT3DENANCNFSM4M6UE5HA> .

-- *Garrett*

Daavidaviid · 2020-05-29T13:13:17Z

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

slorber · 2020-05-29T18:01:26Z

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

cmaycumber · 2020-07-26T22:53:10Z

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when running `yarn develop` #33

Error when running `yarn develop` #33

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

slorber commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

slorber commented May 13, 2020

Daavidaviid commented May 28, 2020

garrettg123 commented May 28, 2020 via email

Daavidaviid commented May 29, 2020

slorber commented May 29, 2020

cmaycumber commented Jul 26, 2020

Error when running yarn develop #33

Error when running yarn develop #33

Comments

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

slorber commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

garrettg123 commented May 12, 2020

slorber commented May 13, 2020

Daavidaviid commented May 28, 2020

garrettg123 commented May 28, 2020 via email

Daavidaviid commented May 29, 2020

slorber commented May 29, 2020

cmaycumber commented Jul 26, 2020

Error when running `yarn develop` #33

Error when running `yarn develop` #33