React 18+Parcel环境下@carbon/react DatePicker无法解析flatpickr问题

问题 #

开发基于React 18和Parcel的应用时，集成Carbon Design Systems的DatePicker组件遇到依赖解析错误，提示无法从./node_modules/@carbon/react/es/components/DatePicker/DatePicker.js中解析flatpickr。已尝试降级React版本、删除node_modules和package-lock.json后重新安装，问题仍未解决。

报错信息 #

@parcel/core: Failed to resolve 'flatpickr' from './node_modules/@carbon/react/es/components/DatePicker/DatePicker.js'

package.json配置 #

{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@carbon/react": "^1.16.0",
        "@parcel/transformer-svg": "^2.7.0",
        "accessible-autocomplete": "^2.0.4",
        "formik": "^2.2.9",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-phone-number-input": "^3.2.11",
        "sass": "^1.55.0",
        "yup": "^0.32.11"
    },
    "devDependencies": {
        "@parcel/transformer-sass": "^2.7.0",
        "eslint-config-react-app": "^7.0.1",
        "parcel": "^2.7.0",
        "process": "^0.11.10",
        "stylelint": "^14.14.0",
        "stylelint-config-prettier-scss": "^0.0.1",
        "stylelint-config-standard-scss": "^5.0.0"
    },
    "targets": {
        "default": {
            "source": "src/entries/index.js",
            "distDir": "../wwwroot/dist"
        }
    },
    "scripts": {
        "prebuild": "rm -rf dist/ rm -rf .parcel-cache/",
        "build": "parcel build",
        "watch": "parcel watch",
        "lint": "npx eslint src/ && npx stylelint src/**/*.scss",
        "lint:fix": "npx eslint ./src --fix"
    },
    "eslintConfig": {
        "extends": [
            "react-app"
        ]
    },
    "stylelint": {
        "extends": [
            "stylelint-config-standard-scss",
            "stylelint-config-prettier-scss"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

组件代码 #

import React from 'react';

// libs
import { DatePicker } from '@carbon/react';

const Date = ({ label, name, ...props }) => {

  /*   const handleChange = (value) => {
        value = value.toString();
        props.onConfirmedDate(value);
    } */

    return(
        <DatePicker dateFormat="m/d/Y" datePickerType="simple">
            <DatePickerInput
            id="date-picker-default-id"
            placeholder="mm/dd/yyyy"
            labelText="Date picker label"
            type="text"
            />
      </DatePicker>
    )
}

export default Date;

解决方案 #

• 手动安装flatpickr依赖
  Carbon React的DatePicker依赖flatpickr，但部分版本的@carbon/react未将其列为直接依赖，需手动安装：

  npm install flatpickr
  # 或使用yarn：yarn add flatpickr
  

• 修正组件导入
  代码中使用了DatePickerInput但未从@carbon/react导入，需补充导入语句：

  import { DatePicker, DatePickerInput } from '@carbon/react';
  

• 检查Parcel配置（可选）
  若安装后仍有问题，可在项目根目录创建.parcelrc文件，确保Parcel能正确解析node_modules依赖：

  {
    "extends": "@parcel/config-default"
  }
  

  也可尝试更新Parcel到最新稳定版，提升兼容性：

  npm install parcel@latest
  

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