Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Project doesn't build #5

Open
deeeed opened this issue Sep 19, 2022 · 5 comments
Open

Project doesn't build #5

deeeed opened this issue Sep 19, 2022 · 5 comments

Comments

@deeeed
Copy link

deeeed commented Sep 19, 2022 •
edited
Loading

Must be a conflict with later version of react.

▷ npm install                                                                                                                                                                                                                                                                                                                          ✔ main 
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/[email protected]
npm WARN Found: [email protected]
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/[email protected]
npm WARN node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-docs
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected]
npm WARN   node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/[email protected]
npm WARN     node_modules/@storybook/addon-docs
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nrwl/[email protected]
npm ERR! Found: @typescript-eslint/[email protected]
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/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^5.29.0" from @nrwl/[email protected]
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
                                                                                                                     
                                                                                                                     ```
@deeeed deeeed changed the title Project doesn Project doesn't build Sep 19, 2022
@Mellbourn
Copy link

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
Copy link

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.

image

Have you had any success with the mobile apps?

@Mellbourn
Copy link

Mellbourn commented Feb 22, 2023 •
edited
Loading

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Mellbourn @deeeed @Corneeltron