使用import.meta.url报ts(1343)错误，配置tsconfig后仍未生效如何解决？

1 修正tsconfig.json完整配置 #

仅修改module配置不足以解决问题，需要同步配套target、moduleResolution配置，完整参考配置如下：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  }
}

2 切换IDE使用项目内TypeScript版本 #

90%的配置生效失败场景是因为VSCode等IDE默认使用自带的旧版TypeScript，未读取项目配置，操作步骤如下：

• 打开项目内任意.ts/.tsx文件
• 点击编辑器右下角的TypeScript版本号
• 弹出选项中选择「使用工作区版本」
• 重启IDE后确认报错是否消失

3 动态加载图片的可行实现方案 #

方案A：标准import.meta.url写法（兼容Parcel2） #

// 封装路径拼接方法
const getAssetUrl = (path: string) => new URL(`../assets/${path}`, import.meta.url).href;

// 组件内调用
function ProductImage({ picName }: { picName: string }) {
  return <img src={getAssetUrl(`product/${picName}.png`)} alt={picName} />
}

如果仍有类型警告，在项目src目录下新增import-meta.d.ts声明文件，写入以下内容：

interface ImportMeta {
  readonly url: string;
}

方案B：Parcel原生glob导入（更适合动态批量加载） #

适合需要根据变量动态匹配多张图片的场景，无需手动处理路径拼接：

// 一次性导入assets目录下所有webp格式图片
const imageMap = import.meta.glob('/src/assets/**/*.webp', { eager: true });

// 动态取图调用
function DynamicImage({ imgPath }: { imgPath: string }) {
  const imgUrl = imageMap[`/src/assets/${imgPath}.webp`]?.default;
  return imgUrl ? <img src={imgUrl} alt="" /> : null;
}

方案C：静态导入 fallback（不需要import.meta） #

如果不需要完全动态的路径匹配，直接静态导入即可，Parcel原生支持图片资源直接导出可访问的URL：

import bannerUrl from '../assets/home/banner.webp';

function HomeBanner() {
  return <img src={bannerUrl} alt="首页banner" />
}

4 排查配置冲突 #

• 确认项目根目录没有其他tsconfig配置文件（如tsconfig.node.json）覆盖了module相关配置
• 移除项目内可能存在的babel配置中对ES模块语法的转换规则
• 删除.parcel-cache文件夹后重启项目，清除旧的构建缓存

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