导入BpkCode组件报错：仅存在默认导出，命名导出未找到

报错核心原因 #

报错信息已经明确提示：

ERROR in ./src/App.js 55:65-72:
export 'BpkCode' (imported as 'BpkCode') was not found in '@skyscanner/backpack-web/bpk-component-code/src/BpkCode' (possible exports: default)

问题出在你使用了命名导入的语法，但BpkCode组件源码采用的是默认导出，两者语法不匹配导致解析失败。

正确导入方案 #

方案1：标准默认导入（推荐） #

直接使用默认导入语法，同时无需写完整node_modules路径（webpack会自动解析依赖路径）：

import React from 'react';
import BpkCode from '@skyscanner/backpack-web/bpk-component-code/src/BpkCode';

方案2：适配命名导入写法（可选） #

如果习惯用命名导入的格式，可以通过重命名语法兼容默认导出：

import React from 'react';
import { default as BpkCode } from '@skyscanner/backpack-web/bpk-component-code/src/BpkCode';

验证操作 #

1. 将App.js中的导入语句替换为上述任一正确写法
2. 重启开发服务或重新构建项目
3. 确认报错消失，组件正常渲染

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