./src/App.js 55:65-72 中的错误导出“BpkCode”（导入为“BpkCode”）未找到

Question

./src/App.js 55:65-72 中的错误 在“@skyscanner/backpack-web/bpk-component-code/src/BpkCode”中找不到导出“BpkCode”（导入为“BpkCode”）（可能导出：默认） 我面临这个错误 bcz BpkCode 位于 D:/my-app/node_modules/@skyscanner/backpack-web/bpk-component-code/src/BpkCode.js 而App.js位于D:/my-app/src/App.js

我尝试过这个 从“反应”导入反应； 从 '@skyscanner/backpack-web/bpk-component-code/src/BpkCode' 导入 BpkCode；

// src/App.js
import React, { useState } from 'react';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkText from '@skyscanner/backpack-web/bpk-component-text';
import BpkCalendar from '@skyscanner/backpack-web/bpk-component-calendar';
import { format } from '@skyscanner/backpack-web/node_modules/date-fns';
import 'bpk-stylesheets/base';
import 'bpk-stylesheets/font';
import { BpkCode } from 'node_modules/@skyscanner/backpack-web/bpk-component-code/src/BpkCode';
import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
import STYLES from './App.scss';

const getClassName = cssModules(STYLES);

const App = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
    console.log('Selected date:', format(date, 'yyyy-MM-dd'));
  };

  return (
    <div className={getClassName('App')}>
      <header className={getClassName('App__header')}>
        <div className={getClassName('App__header-inner')}>
          <BpkText tagName="h1" textStyle="xxl" className={getClassName('App__heading')}>
            Flight Schedule
          </BpkText>
        </div>
      </header>
      <main className={getClassName('App__main')}>
        <BpkText tagName="p" className={getClassName('App__text')}>
          To get started, edit <BpkCode>src/App.js</BpkCode> and save to reload.
        </BpkText>

        {/* Calendar Component */}
        <BpkCalendar 
          onDateSelect={handleDateChange} // Handle date selection
          className={getClassName('bpk-calendar')} 
        />

        {/* Updated Button */}
        <BpkButton onClick={() => alert('It works!')}>Continue</BpkButton>
      </main>
    </div>
  );
};

export default App;


BpkCode.js
import PropTypes from 'prop-types';
import { cssModules } from "../../bpk-react-utils";
import STYLES from "./BpkCode.module.css";
import { jsx as _jsx } from "react/jsx-runtime";
const getClassName = cssModules(STYLES);
const BpkCode = props => {
  const {
    alternate,
    children,
    className,
    ...rest
  } = props;
  const classNames = [getClassName('bpk-code')];
  if (alternate) {
    classNames.push(getClassName('bpk-code--alternate'));
  }
  if (className) {
    classNames.push(className);
  }
  return (
    /*#__PURE__*/
    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
    _jsx("code", {
      className: classNames.join(' '),
      ...rest,
      children: children
    })
  );
};
BpkCode.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  alternate: PropTypes.bool
};
BpkCode.defaultProps = {
  className: null,
  alternate: false
};
export default BpkCode;

Answer 1

问题

您错误地尝试从仅具有默认导出的文件导入named导出。

import { BpkCode } from 'node_modules/@skyscanner/backpack-web/bpk-component-code/src/BpkCode';

参见 @skyscanner/backpack-web/bpk-component-code/src/BpkCode:

export default BpkCode;

解决方案

从预期的入口点导入

named

BpkCode导出：

export { BpkCode, BpkCodeBlock };

将您的导入声明更新为：

import { BpkCode } from '@skyscanner/backpack-web/bpk-component-code';

有关详细信息，请参阅

bpk-component-code

自述文件。