Failed to resolve 'flatpickr', @carbon/react and Parcel

180 Views Asked by At

I'm working on an app that uses react 18, with parcel. I'm trying to add carbon-design-datepicker from carbon design systems, but cannot get it to resolve. I've tried downgrading react version, delete node_modules and package-lock.json, re-install, but no success.

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

My package.json looks like this:

   {
    "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"
        ]
    }
}

The component that I'm trying to use looks like this:

   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;

What am I missing when trying to get this lib up and running?

0

There are 0 best solutions below