The latest Gatsby and gatsby-cli, and NPM, forcing to upgrade the versions, killed a lot of i18n projects

[gusbemacbe]

Description

I downloaded a baisc and simple using-i18n from https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n. I installed Gatsby plugin via npm. Finally I ran gatsby develop, and it gave errors. The gatsby-starter-default also has problems with the same errors. I think it is because of gatsby-cli.

Steps to reproduce

1. Download using-i18n
2. Install the plugins via npm
3. Run gatsby develop and you'll receive the errors:

• using-i18n:

gatsby develop -H gusbemacbe.pt -p 1990
Debugger listening on ws://127.0.0.1:9229/8fef8103-e455-422d-ad0b-828b9cbf2431
For help, see: https://nodejs.org/en/docs/inspector
success open and validate gatsby-configs - 0.025s

 ERROR 

Error in "/home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/gatsby-node.js": Cannot find module 'gatsby-cli/lib/reporter'
Require stack:
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/is-valid-collection-path-implementation.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/create-pages-from-collection-builder.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/create-page-wrapper.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/gatsby-node.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/services/initialize.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/services/index.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/state-machines/develop/services.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/state-machines/develop/index.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/commands/develop-process.js
- /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/.cache/tmp-164407-nP77A8iP82On

  Error: Cannot find module 'gatsby-cli/lib/reporter'
  Require stack:
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/is-valid-collection-path-implementation  .js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/create-pages-from-collection-builder.js  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/create-page-wrapper.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby-plugin-page-creator/gatsby-node.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/services/initialize.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/services/index.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/state-machines/develop/services.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/state-machines/develop/index.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/node_modules/gatsby/dist/commands/develop-process.js
  - /home/gusbemacbe/GitHub/gatsby/examples/using-i18n/.cache/tmp-164407-nP77A8iP82On

  - loader.js:1029 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:1029:15

  - loader.js:898 Function.Module._load
    internal/modules/cjs/loader.js:898:27

  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19

  - v8-compile-cache.js:159 require
    [using-i18n]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - is-valid-collection-path-implementation.js:10 Object.<anonymous>
    [using-i18n]/[gatsby-plugin-page-creator]/is-valid-collection-path-implementation.js:10:40

  - v8-compile-cache.js:178 Module._compile
    [using-i18n]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10

  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32

  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14

  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19

  - v8-compile-cache.js:159 require
    [using-i18n]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - create-pages-from-collection-builder.js:28 Object.<anonymous>
    [using-i18n]/[gatsby-plugin-page-creator]/create-pages-from-collection-builder.js:28:44

  - v8-compile-cache.js:178 Module._compile
    [using-i18n]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10

  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32

  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14

• gatsby-starter-default:

 ERROR 

Error in "/home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/gatsby-node.js": Cannot find module 'gatsby-cli/lib/reporter'
Require stack:
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/is-valid-collection-path-implementation.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/create-pages-from-collection-builder.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/create-page-wrapper.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/gatsby-node.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/services/initialize.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/services/index.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/state-machines/develop/services.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/state-machines/develop/index.js
- /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/commands/develop-process.js
- /home/gusbemacbe/GitHub/suru-plus-folders/.cache/tmp-238741-hCvbIsRSrQTn

  Error: Cannot find module 'gatsby-cli/lib/reporter'
  Require stack:
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/is-valid-collection-path-implementation.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/create-pages-from-collection-builder.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/create-page-wrapper.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby-plugin-page-creator/gatsby-node.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/services/initialize.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/services/index.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/state-machines/develop/services.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/state-machines/develop/index.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/node_modules/gatsby/dist/commands/develop-process.js
  - /home/gusbemacbe/GitHub/suru-plus-folders/.cache/tmp-238741-hCvbIsRSrQTn

  - loader.js:1029 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:1029:15

  - loader.js:898 Function.Module._load
    internal/modules/cjs/loader.js:898:27

  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19

  - v8-compile-cache.js:159 require
    [suru-plus-folders]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - is-valid-collection-path-implementation.js:10 Object.<anonymous>
    [suru-plus-folders]/[gatsby-plugin-page-creator]/is-valid-collection-path-implementation.js:10:40

  - v8-compile-cache.js:178 Module._compile
    [suru-plus-folders]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10

  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32

  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14

  - loader.js:1089 Module.require
    internal/modules/cjs/loader.js:1089:19

  - v8-compile-cache.js:159 require
    [suru-plus-folders]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - create-pages-from-collection-builder.js:28 Object.<anonymous>
    [suru-plus-folders]/[gatsby-plugin-page-creator]/create-pages-from-collection-builder.js:28:44

  - v8-compile-cache.js:178 Module._compile
    [suru-plus-folders]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1220 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1220:10

  - loader.js:1049 Module.load
    internal/modules/cjs/loader.js:1049:32

  - loader.js:937 Function.Module._load
    internal/modules/cjs/loader.js:937:14

Expected result

See the errors above

Actual result

See the errors above

Environment

• using-i18n:

  System:
    OS: Linux 5.7 EndeavourOS
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: 2.24.37 => 2.24.37 
    gatsby-link: ^2.4.13 => 2.4.13 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34 
    gatsby-plugin-no-javascript: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-source-filesystem: ^2.3.24 => 2.3.24 
    gatsby-transformer-json: ^2.4.11 => 2.4.11 
  npmGlobalPackages:
    gatsby-cli: 2.12.82

• updated gatsby-starter-default:

  System:
    OS: Linux 5.7 EndeavourOS
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.37 => 2.24.37 
    gatsby-image: ^2.4.14 => 2.4.15 
    gatsby-link: ^2.4.13 => 2.4.13 
    gatsby-plugin-manifest: ^2.4.22 => 2.4.22 
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34 
    gatsby-plugin-no-javascript: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^3.2.22 => 3.2.23 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-sharp: ^2.6.25 => 2.6.26 
    gatsby-source-filesystem: ^2.3.24 => 2.3.24 
    gatsby-transformer-json: ^2.4.11 => 2.4.11 
    gatsby-transformer-sharp: ^2.5.12 => 2.5.12 
  npmGlobalPackages:
    gatsby-cli: 2.12.82

I downgraded gatsby-starter-default and it worked. But the updated and original gatsby-starter-default (if you can not distinguish the versions, see below):

System:
    OS: Linux 5.7 EndeavourOS
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.37 => 2.24.37
    gatsby-image: ^2.4.14 => 2.4.14
    gatsby-plugin-manifest: ^2.4.22 => 2.4.22
    gatsby-plugin-offline: ^3.2.22 => 3.2.22
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-sharp: ^2.6.25 => 2.6.25
    gatsby-source-filesystem: ^2.3.24 => 2.3.24
    gatsby-transformer-sharp: ^2.5.12 => 2.5.12
  npmGlobalPackages:
    gatsby-cli: 2.12.82

Compare gatsby-starter-default updated from npm with original gatsby-starter-default:

--- test-gus.txt    2020-08-11 03:20:50.049995197 -0300
+++ test-i8.txt 2020-08-11 03:21:03.077855134 -0300
@@ -12,16 +12,12 @@
     Firefox: 79.0
   npmPackages:
     gatsby: ^2.24.37 => 2.24.37
-    gatsby-image: ^2.4.14 => 2.4.15
-    gatsby-link: ^2.4.13 => 2.4.13
+    gatsby-image: ^2.4.14 => 2.4.14
     gatsby-plugin-manifest: ^2.4.22 => 2.4.22
-    gatsby-plugin-mdx: ^1.2.34 => 1.2.34
-    gatsby-plugin-no-javascript: ^2.0.5 => 2.0.5
-    gatsby-plugin-offline: ^3.2.22 => 3.2.23
+    gatsby-plugin-offline: ^3.2.22 => 3.2.22
     gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
-    gatsby-plugin-sharp: ^2.6.25 => 2.6.26
+    gatsby-plugin-sharp: ^2.6.25 => 2.6.25
     gatsby-source-filesystem: ^2.3.24 => 2.3.24
-    gatsby-transformer-json: ^2.4.11 => 2.4.11
     gatsby-transformer-sharp: ^2.5.12 => 2.5.12
   npmGlobalPackages:
     gatsby-cli: 2.12.82
\ Sem newline no fim do ficheiro

[gusbemacbe]

Hello Gatsby developers!

These two projects that you created are not only that were affected other several projects I tried to build also are affected:

@angeloocana's gatsby-plugin-i18n; @smakosh's gatsby-starter-i18n; @theodesp's All You Need to Know About i18n with Gatsby

I also have already tried to remove package-lock and yarn-lock, and node_modules, but Gatsby and NPM kept upgrading the latest version when I installed other packages via npm. Same errors, Observe that I always ordered alphabetically the plugins in the file gatsby-config.json, but I also reverted to the original order and it still gave same errors. I think it is gatsby-cli's problem and or because Gatbsy and NPM forced to upgrade the latest verison, brekaing a lot of projects. It killed a lot of projects.

I am a Gatsby's new learner, I learned a lot of things. I found it complete, easy and powerful. I spent 3 days, trying to fix these errors, but a lot of these current problems make me giving up on Gatsby and migrating to other alternatives.

[smakosh]

My starter needs to be updated as it is still using an old version of react-intl, I will work on that during the weekends if I get some free time.

[gusbemacbe]

@smakosh,

It seems that your project is working as @sidharthachatterjee and @pvdz have fixed that. Sorry, @smakosh ! Should I close your project's my issue too?

[smakosh]

Yes please, thank you!

[theodesp]

@gusbemacbe I did update the article recently and the code hosted on github. I remember there were some issues with the latest CLI version so I tried to push older versions in the dependancies:

"dependencies": {
    "gatsby": "^2.20.12",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.1",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-source-filesystem": "^2.0.38",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
  },

[gusbemacbe]

@theodesp

I have already hold these old versions,. but there are errors I apointed. I left the comment at your blog post. But I will copy here:

Χαίρετε Θεό!

I think you need to update a bit your tutorial because there are errors:

Can't resolve 'gatsby-plugin-i18next' in '/home/gusbemacbe/GitHub/suru-plus-folders/src/pages'

If you're trying to use a package make sure that 'gatsby-plugin-i18next' is installed. If you're trying to use a local file make sure that the path is correct.

File: src/pages/index.js

Because of index.js's import { withI18next } from 'gatsby-plugin-i18next'. Maybe do you mean import { withI18next } from '@wapps/gatsby-plugin-i18next'?

Another error in the file export default withI18next()(withTranslation()(NotFoundPage);. I think you missed one parenthesis. Do you mean export default withI18next()(withTranslation)()(NotFoundPage);?

It seems you also missedimport { withI18next } from 'gatsby-plugin-i18next' in the file page-2.js.

The languageSwitcher.js also has a problem, because Gatsby said:

TypeError: availableLngs is undefined
LanguageSwitcher
src/components/languageSwitcher.js:5

2 | import { Language } from '@wapps/gatsby-plugin-i18next';
3 |
4 | const LanguageSwitcher = ({ changeLng, lng, availableLngs }) => (
> 5 | <select onchange="{(e)" ==""> changeLng(e.target.value)}>
6 | {
7 | availableLngs.map((value) => (
8 | <option key="{value}" selected="{lng" =="=" value}="">{value}</option> 

And you also missed import Layout from '../components/layout'; in the file 404.js because of Layout as Gatsby has apointed.

[gusbemacbe]

Ah, @theodesp, I have been searching your Github repo. It seems that you published on other organisation. I found and see you have already updated as you had said. I will test. Thank you. I am very sorry!

[pvdz]

Dupe of https://github.com/gatsbyjs/gatsby/issues/26345