gatsby develop => yoga-layout | nbind.js:53 | SyntaxError: Unexpected token u in JSON at position 0

[vipulf]

Migrate v2 to v3 => set global gatsby-cli version 3.1.0 and gatsby version 3.1.0

upgrade gatsby version 3.1.0 and gatsby develop
fetch error

/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
    at /.../node_modules/favicons-webpack-plugin/lib/compiler.js:115:23
    at /.../node_modules/webpack/lib/Compiler.js:534:11
    at /.../node_modules/webpack/lib/Compiler.js:1087:17
    at Hook.eval [as callAsync] (eval at create (/.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/.../node_modules/tapable/lib/Hook.js:18:14)
    at /.../node_modules/webpack/lib/Compiler.js:1083:33
    at /.../node_modules/webpack/lib/Compilation.js:2424:11
    at Hook.eval [as callAsync] (eval at create (/.../node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/.../node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at /.../node_modules/webpack/lib/Compilation.js:2417:38
    at eval (eval at create (/.../node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /.../node_modules/webpack/lib/Compilation.js:415:10
    at /.../node_modules/webpack/lib/SourceMapDevToolPlugin.js:543:10
    at /.../node_modules/neo-async/async.js:2830:7
    at Object.each (/.../node_modules/neo-async/async.js:2857:9)

[vipulf]

gatsby info

System:
  OS: macOS 10.15.7
  CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node
  Yarn: 1.22.10 - ~/.nvm/versions/node/v15.11.0/bin/yarn
  npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 89.0.4389.90
  Edge: 89.0.774.54
  Firefox: 81.0.2
  Safari: 14.0
npmPackages:
  gatsby: ^3.1.0 => 3.1.0
  gatsby-image: ^3.1.0 => 3.1.0
  gatsby-plugin-advanced-sitemap: ^1.6.0 => 1.6.0
  gatsby-plugin-favicon: ^3.1.5 => 3.1.6
  gatsby-plugin-feed: ^3.1.0 => 3.1.0
  gatsby-plugin-gdpr-cookies: ^1.0.12 => 1.0.14
  gatsby-plugin-ghost-images: ^2.0.0 => 2.0.0
  gatsby-plugin-google-analytics: ^3.1.0 => 3.1.0
  gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
  gatsby-plugin-google-tagmanager: ^3.1.0 => 3.1.0
  gatsby-plugin-gtag: ^1.0.13 => 1.0.13
  gatsby-plugin-load-script: ^1.1.0 => 1.1.0
  gatsby-plugin-manifest: ^3.1.0 => 3.1.0
  gatsby-plugin-offline: ^4.1.0 => 4.1.0
  gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
  gatsby-plugin-preload-fonts: ^2.1.0 => 2.1.0
  gatsby-plugin-react-helmet: ^4.1.0 => 4.1.0
  gatsby-plugin-robots-txt: ^1.5.1 => 1.5.5
  gatsby-plugin-sass: ^4.1.0 => 4.1.0
  gatsby-plugin-sharp: ^3.1.0 => 3.1.0
  gatsby-plugin-sitemap: ^3.1.0 => 3.1.0
  gatsby-plugin-tawk: ^1.0.0 => 1.0.0
  gatsby-plugin-typography: ^3.1.0 => 3.1.0
  gatsby-remark-copy-linked-files: ^3.1.0 => 3.1.0
  gatsby-remark-embed-gist: ^1.2.0 => 1.2.1
  gatsby-remark-embed-snippet: ^5.1.0 => 5.1.0
  gatsby-remark-embed-video: ^3.1.1 => 3.1.1
  gatsby-remark-images: ^4.1.0 => 4.1.0
  gatsby-remark-prismjs: ^4.1.0 => 4.1.0
  gatsby-remark-responsive-iframe: ^3.1.0 => 3.1.0
  gatsby-remark-smartypants: ^3.1.0 => 3.1.0
  gatsby-source-filesystem: ^3.1.0 => 3.1.0
  gatsby-source-ghost: ^4.0.5 => 4.2.3
  gatsby-source-try-ghost: ^3.0.0 => 3.0.0
  gatsby-transformer-remark: ^3.1.0 => 3.1.0
  gatsby-transformer-sharp: ^3.1.0 => 3.1.0
npmGlobalPackages:
  gatsby-cli: 3.1.0

please give me suggestion what is mistake in my code

[LekoArts]

Did you try the install with npm install --legacy-peer-deps after deleting your node_modules?

Also, you're using gatsby-plugin-favicon which seems to use favicons-webpack-plugin. The version that the plugin is using might be incompatible with webpack 5.

[vipulf]

Thanks, @LekoArts