已安装@sanity依赖仍报错：无法解析@sanity/client及@sanity/image-url

我在React Native项目中编写了如下Sanity客户端配置代码：

import sanityClient  from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

const client = sanityClient({
  projectId: "7c4vy8nu",
  dataset: "production",
  useCdn: true,
  apiVersion: "2021-10-21",
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
// sanity cors add https://localhost:19000
export default client;

运行项目时出现如下错误：

Unable to resolve module @sanity/client from D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\sanity.js: @sanity/client could not be found within the project or in these directories: node_modules ....\node_modules ......\node_modules 
1 | import sanityClient  from "@sanity/client";
|                            ^ 
2 | import imageUrlBuilder from "@sanity/image-url"; 
3 |  
4 | const client = sanityClient({ 
at ModuleResolver.resolveDependency (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:162:15) 
at DependencyGraph.resolveDependency (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\node-haste\DependencyGraph.js:260:43) 
at Object.resolve (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\lib\transformHelpers.js:177:21) 
at Graph._resolveDependencies (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:432:35) 
at Graph._processModule (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:218:38) 
at async Graph._addDependency (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:314:20) 
at async Promise.all (index 0) 
at async Graph._processModule (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:263:5) 
at async Graph._traverseDependenciesForSingleFile (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:207:5) 
at async Graph.traverseDependencies (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\Graph.js:147:9) 
at async DeltaCalculator._getChangedDependencies (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:247:42) 
at async DeltaCalculator.getDelta (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:90:16) 
at async DeltaBundler.getDelta (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\DeltaBundler.js:67:12) 
at async IncrementalBundler.updateGraph (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\IncrementalBundler.js:218:19) 
at async Server._explodedSourceMapForURL (D:\code\Introduce about mobile devolopment\ReactBasic-1\New folder\Project1\node_modules\metro\src\Server.js:1135:23) 
at async Promise.all (index 0)

我的项目package.json中已声明相关依赖：

"dependencies": {
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@sanity/client": "^5.3.0",
    "@sanity/image-url": "^1.0.2",
  },

解决方案尝试 #

• 彻底重装依赖：删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，然后执行npm install（或yarn install）重新安装所有依赖
• 清理Metro缓存：执行npx react-native start --reset-cache重启Metro并清除缓存
• 调整项目路径：当前项目路径包含空格和长名称，Metro对此兼容性较差，建议将项目迁移到简洁无空格的目录下，比如D:\code\ReactBasic-1\Project1
• 检查版本兼容性：@sanity/client v5.x依赖ES模块支持，若你的React Native版本较低，可尝试降级到@sanity/client v4.x版本
• 校验导入语句：确认@sanity/client和@sanity/image-url的包名拼写完全正确，无大小写或字符错误

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