search

infinitered / ignite

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.
MIT License
17.69k stars 1.4k forks source link

Ignite-cli Project Installation Error: CommandError: Cannot find module 'ajv/dist/compile/codegen' #2840

Open spartanlync opened 3 days ago

spartanlync commented 3 days ago

Describe the bug

Hello, Was interested in exploring this framework by creating a project and trying it out for myself.

Unfortunately, creating my demo project failed with the following error and I could not find any reference to this issue being raised on GitHub.

CommandError: Cannot find module 'ajv/dist/compile/codegen'

Please see my screenshot below of trying to build my ignite project using the latest code. Note: I do not have ignite-cli installed in my computer

Doing some digging, i found two articles on a solution.

But these fixes requires a package.json dependancy fix from ^6 to ^8, which is outside my scope for ignite.

So before I abandon this exploration of ignite, I thought i would post what i experienced and give the community a chance to resolve.

Any suggestions on next steps?

Text of installation and error below

LMIT-MacBook-Air!valor [~/Documents/Projects/my-react-native-studio]>npx ignite-cli@latest new ignite-expo-ble-app
(node:97871) ExperimentalWarning: Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

:white_check_mark: What bundle identifier? · com.spartanlync.ignite_expo_ble_app
:white_check_mark: Where do you want to start your project? · /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app
:white_check_mark: How do you want to manage Native code? · cng
:white_check_mark: Do you want to initialize a git repository? (Y/n) · Yes
:white_check_mark: Remove demo code? We recommend leaving it in if it's your first time using Ignite (y/N) · No
:white_check_mark: Which package manager do you want to use? · npm
:white_check_mark: Do you want to install dependencies? (Y/n) · Yes
:white_check_mark: [Experimental] Expo Router for navigation? (y/N) · Yes
:white_check_mark: [Experimental] the New Architecture? (y/N) · Yes

                        .;;,.  .clll.         
                         .clll,  ,llll.      ...   
                          .,;,.   ;lllc'.,.  .';cllllc, 
   .',,.                  ...    .'',,. .:lllllllll. .;lllc:;clll,
   .llll,            .,...;cllll:.   ,llll, .llllllc,,'  clll:'.,cllc.
   ,llll'      ......;::. 'llcclllllllll' ,llll,  .llll.  ,lllllllll:'  
   ,llll.   .;clllllclll. 'llllc,..,llll, :llll.  'llll.  ,lllc,''..   
   ;llll.   :llllc:cllllc. ,llll.  .llll, .lllll.  ,lllc...  ,lll:...';:.  
  .llllc.  ;lll;.  :lll,  ;lll;   'llll, .llllc.  ,llllcll' .:lllllllll,  
  .llll,  'lll:   .clll,   :lll,   ,llll. 'llll,  'lllllcc'  ';::::;'.  
  .llll,  ,lll:  .llll' .llll,   ;llll. ,llll,   .....       .',..
  ,llll. 'llll:,,:cllll. .lllc.   .''.. ... ....',;      ..',,:::;'..  
  ,llll.  'clllllllllll.   .....      ..,::cllllc.   .',:clllc;,'.      
  :llll.     ',;,'.;lllc...,;:clll; ..',:cllllllllll:,;clllllc;,'.        
  llll:       ...'cllllllllllllll::cllllllc;,',cllllllllc;'..           
  llll,  ..,clllllllll::,,.,lllllllc:,'...    :lllllc,..            
  c:;,. .cllllc:;:llll.   ,ll:;,..        ;ll:,..               
       :lll,.  .clll,    ..        .,..                
        :lll:,,cllll,                               
      .cllllllllc'                              
       .'cllll:.                                

  █ Creating ignite-expo-ble-app using Ignite 10.0.4
  █ Powered by  ∞ Infinite Red  (https://infinite.red/)
  █ Package Manager: npm
  █ Bundle identifier: com.spartanlync.ignite_expo_ble_app
  █ Path: /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app
  ────────────────────────────────────────────────────

  🖨  3D-printing a new React Native app
  :art: Getting those last few details perfect
  :yarn: Installing npm dependencies (wow these are heavy)
  :gear: Configuring app.json
  :x: Generating native template via Expo Prebuild

The following error occurred:

  (node:98427) ExperimentalWarning: Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:98464) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Git status is dirty but the command will continue because the terminal is not interactive.
Warning: Root-level "expo" object found. Ignoring extra keys in Expo config: "name", "displayName", "ignite"
Learn more: https://expo.fyi/root-expo-object
CommandError: Cannot find module 'ajv/dist/compile/codegen'
Require stack:
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/ajv-keywords/dist/definitions/typeof.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/ajv-keywords/dist/keywords/typeof.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/ajv-keywords/dist/keywords/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/ajv-keywords/dist/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/schema-utils/dist/validate.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/schema-utils/dist/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/expo-router/plugin/build/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/expo-router/app.plugin.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config-plugins/build/plugins/withStaticPlugin.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config-plugins/build/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/expo/config-plugins.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/plugins/withSplashScreen.ts
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/app.config.ts
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config/build/evalConfig.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config/build/getConfig.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config/build/Config.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/config/build/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/cli/build/src/prebuild/ensureConfigAsync.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/cli/build/src/prebuild/prebuildAsync.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/cli/build/src/prebuild/index.js
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/@expo/cli/build/bin/cli
- /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app/node_modules/expo/bin/cli

  Consider opening an issue with the following information at:
  https://github.com/infinitered/ignite/issues/new?template=bug_report.yml&labels=bug

  ⠧  Gathering system and project details  Unable to gather system and project details.

Screenshot of installation and error below

Ignite Install Failure 2024-11-09 at 7 51 53 AM

Ignite version

10.0.4

Additional info

LMIT-MacBook-Air!valor [~/Documents/Projects/my-react-native-studio/ignite-expo-ble-app]>npx ignite-cli doctor
(node:9791) ExperimentalWarning: Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Need to install the following packages:
ignite-cli@10.0.4
Ok to proceed? (y) y

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
System
  platform           darwin                                                                                           
  arch               arm64                                                                                            
  cpu                8 cores               Apple M3                                                                   
  directory          ignite-expo-ble-app   /Users/valor/Documents/Projects/my-react-native-studio/ignite-expo-ble-app 
/Users/valor/.npm/_npx/e31027f3785124a8/node_modules/gluegun/build/index.js:15
    throw up;
    ^

SyntaxError: Unexpected token '(', "(node:1013"... is not valid JSON
    at JSON.parse (<anonymous>)
    at /Users/valor/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build/tools/packager.js:242:33
    at /Users/valor/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build/tools/packager.js:322:54
    at step (/Users/valor/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build/tools/packager.js:44:23)
    at Object.next (/Users/valor/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build/tools/packager.js:25:53)
    at fulfilled (/Users/valor/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build/tools/packager.js:16:58)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

Node.js v23.0.0
coolsoftwaretyler commented 3 days ago

I was able to reproduce the same issue from Ignite CLI version 10.0.4. When I run npm ls ajv from the Ignited project, I get the following output:

ignite-expo-ble-app@0.0.1 /Users/tylerwilliams/ignite-expo-ble-app
├─┬ eslint@8.57.1
│ ├─┬ @eslint/eslintrc@2.1.4
│ │ └── ajv@6.12.6 deduped
│ └── ajv@6.12.6
├─┬ expo-build-properties@0.12.5
│ └── ajv@8.17.1
└─┬ expo-router@3.5.24
  └─┬ schema-utils@4.2.0
    ├─┬ ajv-formats@2.1.1
    │ └── ajv@8.17.1
    ├─┬ ajv-keywords@5.1.0
    │ └── ajv@6.12.6 deduped invalid: "^8.8.2" from node_modules/ajv-keywords
    └── ajv@8.17.1

Although it looks like maybe this is a peer dependency resolution issue. It looks like you're using Node, not Bun, but that may actually be the culprit: https://github.com/expo/expo/issues/29150

coolsoftwaretyler commented 3 days ago

As a quick workaround, if you install ajv as a devDependency in your project, you can force things to work:

npm install --save-dev ajv@^8 --legacy-peer-deps
npm run ios

That worked for me on my reproducer, but it's not really addressing the root issue.

spartanlync commented 3 days ago

Thanks for the response. As a newbie, I am still a bit confused as to how to apply your suggestion.

npm install --save-dev ajv@^8 --legacy-peer-deps
npm run ios

Keep in mind, I only ran one automated command that is supposed to build the boilerplate project npx ignite-cli@latest new ignite-expo-ble-app

So after that one command fails, and I patch the interrupted installation with your suggestion How do I resume the operation where that one automated command process failed?

Do I just 

cd ignite-expo-ble-app
npx ignite-cli@latest new .

Is it supposed to pick up where it left off, with my manually patched package.json?

Please advise.

spartanlync commented 3 days ago

Yea, I followed my own suggestion. Unfortunately the project creation did not resume, but failed with another error.

LMIT-MacBook-Air!valor [~/Documents/Projects/my-react-native-studio/ignite-expo-ble-app]>npx ignite-cli@latest new .
(node:20374) ExperimentalWarning: Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

The project name can only contain alphanumeric characters and underscore, but must not begin with a number.

So this patch / fix somehow needs to be applied to the package.json, BEFORE I can run npx ignite-cli@latest new ignite-expo-ble-app

coolsoftwaretyler commented 3 days ago

Hey @spartanlync - I think I've figured out the issue(s). I was able to reproduce the errors you hit, and resolve them locally. I think there are actually three intersecting bugs. Two of them are from Ignite, and one requires a small adjustment on your side.

  1. In our experimental support for Expo Router, we are encountering some kind of peer dependency problem, as seen in https://github.com/expo/expo/issues/29150.
  2. Your original bundle identifier has some invalid characters in it (I think you posted it in Slack, but not here). I'll provide an alternate suggestion for you, but underscores like _ are invalid characters for bundle identifiers.
  3. We have a few template bugs in the experimental Expo Router support, but they're easy to fix locally.

That said, here are a series of steps that I believe will fix your issues. I was able to get an Ignite project with your chosen settings running on my own local environment with these steps. We will still want to resolve the peer dependencies and template issues on our end, but hopefully this unblocks you, and anyone else trying to use the experimental support for Expo Router.

Step by step

First, remove your existing project with rm -rf ignite-expo-ble-app. This will delete files, so if you've done some work, move it to another location instead of deleting so you can pull that work over. I get the sense you haven't made any changes yet, so it's probably easiest to start from a blank slate.

Next, run npx ignite-cli@latest new ignite-expo-ble-app with these options:

✅ What bundle identifier? · com.igniteexpobleapp
✅ Where do you want to start your project? · /Users/tylerwilliams/ignite-expo-ble-app
✅ How do you want to manage Native code? · cng
✅ Do you want to initialize a git repository? (Y/n) · Yes
✅ Remove demo code? We recommend leaving it in if it's your first time using Ignite (y/N) · No
✅ Which package manager do you want to use? · npm
✅ Do you want to install dependencies? (Y/n) · Yes
✅ [Experimental] Expo Router for navigation? (y/N) · Yes
✅ [Experimental] the New Architecture? (y/N) · Yes

Notice the updated bundle identifier: com.spartanlync.igniteexpobleapp rather than your original com.spartanlync.ignite_expo_ble_app. I think those underscores were the follow-up issue you ran into. The Ignite CLI will probably promp with com.igniteexpobleapp, which would be suitable as well.

I think the root of your original issue is that there's some kind of peer dependency problem with ESLint and Expo Router. So go into the directory with cd ignite-expo-ble-app. Then run npm install --legacy-peer-deps. This is a bit of a hack, but from what I can tell, it resolves the issue. We will have to address the root cause on our end.

Up next, let's force your project to have the latest version of ajv with npm install --save-dev ajv@^8 --legacy-peer-deps. This will make ajv a direct devDependency in your project, so the resolution will use the appropriate version across all sub-dependencies. Again, this is a hack and we will need to fix the root cause, but hopefully this unblocks you for now.

Finally, we have some issues in our experimental templates. We'll have to update those, but you can fix it in your own project locally. In src/app/_layout.tsx, you'll need to make two changes:

  1. On line 18: change require("src/devtools/ReactotronConfig.ts") to require("../../app/devtools/ReactotronConfig")
  2. On line 21: change export { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary" to export { ErrorBoundary } from "@/screens/ErrorScreen/ErrorBoundary"

Then you should be able to get the app running, assuming your React Native development environment is correctly set up: https://reactnative.dev/docs/environment-setup. You can run npm run ios or npm run android and things should build and run. Here's a screenshot of it working on my machine:

Screenshot 2024-11-09 at 6 07 07 PM

Let me know if you experience any additional issues. Sorry for the inconvenience. Experimental features often have some sharp edges. We will smooth 'em down!

coolsoftwaretyler commented 3 days ago

I think this may be related to what we had to do in https://github.com/infinitered/ignite/issues/2818, but from what I can tell that code hasn't changed or regressed. I'm going to double check to make sure --legacy-peer-deps is getting called from npm with the experimental flags as well.

coolsoftwaretyler commented 3 days ago

Ok, so we're definitely calling --legacy-peer-deps as expected. But perhaps the legacy peer dependency resolution works for the initial problem in https://github.com/infinitered/ignite/issues/2818, but breaks this behavior for ajv with ESLint when we choose Expo Router and install with npm.

I think we can just add ajv as a devDependency and smooth this over. I'll put together a PR on that one.

spartanlync commented 3 days ago

Hey @coolsoftwaretyler, following your suggestions I was successful in getting the demo app running

I don't feel comfortable trusting this project until your suggested patches to

  1. Overriding ajv as a devDependency
  2. Fixing the templates So that npx ignite-cli@latest new is successful and all post-install tests validate the installation

I will explorer the framework to understand how it works, but will hold off on using it for my next project until it's Expo integration is more stable

Thanks for all your help, and glad i could contribute to a better product

coolsoftwaretyler commented 3 days ago

Thanks @spartanlync. Sorry it wasn't a good fit and hopefully you'll consider us again soon.