Project doesn't build

[deeeed]

Must be a conflict with later version of react.

▷ npm install                                                                                                                                                                                                                                                                                                                          ✔ main 
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/react@1.6.22
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"18.2.0" from the root project
npm WARN   87 more (@callstack/react-theme-provider, @emotion/core, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.9
npm WARN   node_modules/@storybook/addon-docs
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN   node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.9
npm WARN     node_modules/@storybook/addon-docs
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nrwl/eslint-plugin-nx@14.5.4
npm ERR! Found: @typescript-eslint/parser@5.24.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   dev @typescript-eslint/parser@"5.24.0" from the root project
npm ERR!   peer @typescript-eslint/parser@"^5.0.0" from @typescript-eslint/eslint-plugin@5.24.0
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"5.24.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/parser@"^5.29.0" from @nrwl/eslint-plugin-nx@14.5.4
npm ERR! node_modules/@nrwl/eslint-plugin-nx
npm ERR!   dev @nrwl/eslint-plugin-nx@"14.5.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@5.37.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^5.29.0" from @nrwl/eslint-plugin-nx@14.5.4
npm ERR!   node_modules/@nrwl/eslint-plugin-nx
npm ERR!     dev @nrwl/eslint-plugin-nx@"14.5.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/lllll/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lllll/.npm/_logs/2022-09-19T07_49_12_111Z-debug-0.log

[Mellbourn]

I got a little further by creating a .npmrc file with the content

legacy-peer-deps=true

However, then I got

> nx build

> nx run studio-ghibli-search-engine-web:build:production

 >  NX   Cannot find module '@svgr/webpack'

   Require stack:
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/react/plugins/with-react.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/react/plugins/webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/apps/studio-ghibli-search-engine-web/webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/utils/webpack/custom-webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/dev-server/dev-server.impl.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/index.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/webpack/lib/get-webpack-config.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/webpack/webpack.impl.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/src/config/workspaces.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/src/command-line/run.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.

To fix this I did

npm i @svgr/webpack

After that build still failed, but now with errors like this

ERROR in ./libs/store/src/lib/films/films.slice.ts
Module build failed (from ./node_modules/@nrwl/webpack/src/utils/web-babel-loader.js):
SyntaxError: /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/libs/store/src/lib/films/films.slice.ts: Support for the experimental syntax '
flow' isn't currently enabled (20:8):

  18 | export const FILMS_FEATURE_KEY = 'films';
  19 |
> 20 | export interface FilmsState extends EntityState<FilmEntity> {
     |        ^
  21 |   loadingStatus: LoadingStatus;
  22 |   error?: string;
  23 | }

Add @babel/preset-flow (https://github.com/babel/babel/tree/main/packages/babel-preset-flow) to the 'presets' section of your Babel config to enable transformation.

At that point I added the "presets": ["@babel/preset-typescript"] to all babel.config.json and then build worked.

[Corneeltron]

I got a little further by creating a .npmrc file with the content

legacy-peer-deps=true

However, then I got

> nx build

> nx run studio-ghibli-search-engine-web:build:production

 >  NX   Cannot find module '@svgr/webpack'

   Require stack:
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/react/plugins/with-react.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/react/plugins/webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/apps/studio-ghibli-search-engine-web/webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/utils/webpack/custom-webpack.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/dev-server/dev-server.impl.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/index.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/webpack/lib/get-webpack-config.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/@nrwl/webpack/src/executors/webpack/webpack.impl.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/src/config/workspaces.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/src/command-line/run.js
   - /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.

To fix this I did

npm i @svgr/webpack

After that build still failed, but now with errors like this

ERROR in ./libs/store/src/lib/films/films.slice.ts
Module build failed (from ./node_modules/@nrwl/webpack/src/utils/web-babel-loader.js):
SyntaxError: /Users/klas.mellbourn/code/firstvet/visual-regression-testing/studio-ghibli-search-engine/libs/store/src/lib/films/films.slice.ts: Support for the experimental syntax '
flow' isn't currently enabled (20:8):

  18 | export const FILMS_FEATURE_KEY = 'films';
  19 |
> 20 | export interface FilmsState extends EntityState<FilmEntity> {
     |        ^
  21 |   loadingStatus: LoadingStatus;
  22 |   error?: string;
  23 | }

Add @babel/preset-flow (https://github.com/babel/babel/tree/main/packages/babel-preset-flow) to the 'presets' section of your Babel config to enable transformation.

At that point I added the "presets": ["@babel/preset-typescript"] to all babel.config.json and then build worked.

@Mellbourn Thank you for that, it worked great! I'm trying to do the same with the iOS app, but got a symlink error.

> NX EEXIST: file already exists, symlink '/Users/cphanthanh/Documents/studio-ghibli-search-engine/node_modules' -> '/Users/cphanthanh/Documents/studio-ghibli-search-engine/apps/studio-ghibli-search-engine-mobile/node_modules'

I then reran npm install with --legacy-peer-deps and built, but am now running into an error in what looks like mobile/node_modules/metro/src/node-haste/DependencyGraph.

Have you had any success with the mobile apps?

[Mellbourn]

Yes, this is another bug in the repo: The apps/studio-ghibli-search-engine-mobile/node_modules file must be a symbolic link to the node_modules in the root of the repository. Just erase it

 rm apps/studio-ghibli-search-engine-mobile/node_modules

Then it will be recreated correctly during build.

[Mellbourn]

I have a fork where I've fixed these in a branch called loki. I'm doing others stuff there too, but you can take a look if you want https://github.com/Mellbourn/studio-ghibli-search-engine

[Corneeltron]

@Mellbourn You're a legend :) thank you!