在Create React App中使用React-gridstack时执行npm i jquery-ui/data命令遭遇Git公钥权限错误

Hey there, let's break down why you're hitting this error and how to fix it quickly.

What's causing the error? #

The core issue here is that jquery-ui/data isn't a standalone GitHub repository—you can't install it directly via that git SSH URL. When you run npm i jquery-ui/data, npm tries to pull from git@github.com/jquery-ui/data.git, but that repo doesn't exist. The "Permission denied (publickey)" message is a red herring here; the real problem is the target repository doesn't exist at that address.

react-gridstack relies on jQuery and jQuery UI, but you don't need to install individual submodules like data directly. Instead, you should use the official npm packages for jQuery and jQuery UI.

Step-by-Step Fix #

1. Clean up the failed install
   First, remove any partial or invalid installations from the command that failed:

   npm uninstall jquery-ui/data
   

2. Install the correct dependencies
   Install the official npm packages for jQuery, jQuery UI, and react-gridstack:

   npm install jquery jquery-ui react-gridstack
   

3. Make jQuery available globally (required for react-gridstack)
   Create React App doesn't expose jQuery globally by default, but react-gridstack expects it to be available on the window object. You have two easy options here:

   Option A: Use CDN links (simplest)

   Add these script tags to your public/index.html file, inside the <head> section:

   <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
   

   Option B: Configure webpack to expose jQuery (for offline/local use)

   If you prefer not to use CDNs, use react-app-rewired to modify your webpack config:

   • Install the required tools:

     npm install react-app-rewired customize-cra --save-dev
     

   • Create a config-overrides.js file in your project root:

     const { override, addWebpackPlugin } = require('customize-cra');
     const webpack = require('webpack');
     
     module.exports = override(
       addWebpackPlugin(
         new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           'window.jQuery': 'jquery',
           'window.$': 'jquery'
         })
       )
     );
     

   • Update your package.json scripts to use react-app-rewired:

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

4. Test react-gridstack in your component
   Now you can use react-gridstack in your components like this:

   import React from 'react';
   import { GridStack, GridStackItem } from 'react-gridstack';
   
   export default function MyGrid() {
     return (
       <GridStack>
         <GridStackItem x={0} y={0} w={2} h={1}>
           <div className="grid-item">First Item</div>
         </GridStackItem>
         <GridStackItem x={2} y={0} w={1} h={2}>
           <div className="grid-item">Second Item</div>
         </GridStackItem>
       </GridStack>
     );
   }
   

Why this works #

By installing the official npm packages, you're getting the full jQuery and jQuery UI libraries (including the data module that react-gridstack needs) without trying to pull from a non-existent GitHub repo. Configuring jQuery globally ensures react-gridstack can access the dependencies it expects.

内容的提问来源于stack exchange，提问作者cBrenden