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?