I've got a form and I'm trying to setup the x-date-formatters package with React and Mui. Anyone know how to fix this?
Error is:
Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]
The odd thing to me is that longFormatters.?? exists in the project node_modules:
# find ./ -name '*longFormatters*'
./node_modules/date-fns/_lib/format/longFormatters.js
./node_modules/date-fns/_lib/format/longFormatters.cjs
./node_modules/date-fns/_lib/format/longFormatters.d.cts
./node_modules/date-fns/_lib/format/longFormatters.d.ts
Edited to add:
This should resolve because the vite docs say: (from /config/shared-options#resolve-extensions)
resolve.extensions
Type: string[]
Default: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
List of file extensions to try for imports that omit extensions. Note it is NOT remended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.
and my vite.config.js is:
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
// /config/
export default defineConfig({
plugins: [react()]
})
End edit
Storybook preview.tsx:
import type {Preview} from "@storybook/react";
import {MemoryRouter as Router, Route, Routes} from "react-router";
import UserContext, {LOGGED_OUT_USER_CONTEXT} from "../src/context/UserContext";
import {LocalizationProvider} from '@mui/x-date-pickers';
import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
const preview: Preview = {
decorators: [
(Story, {parameters}) => {
const {routerPath = "/"} = parameters;
const {userInfo = LOGGED_OUT_USER_CONTEXT} = parameters;
const setCurrentUser = () => {
return;
}
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<UserContext.Provider
value={{
currentUser: userInfo,
setCurrentUser
}}
>
<Router>
<Routes>
<Route path={routerPath} element={<Story/>}>
</Route>
</Routes>
</Router>
</UserContext.Provider>
</LocalizationProvider>
)
},
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
package.json:
{
"name": "i-web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"api-client-gen": "java -jar ~/bin/openapi-generator-cli-7.10.0.jar generate -i http://localhost:8080/v3/api-docs -g typescript-fetch -o src/itr-client/"
},
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@fontsource/roboto": "^5.1.0",
"@mui/icons-material": "^6.2.0",
"@mui/material": "^6.2.0",
"@mui/system": "^6.2.0",
"@mui/x-date-pickers": "^7.23.2",
"date-fns": "^4.1.0",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.54.1",
"react-router": "^7.0.2"
},
"devDependencies": {
"@chromatic-/storybook": "^3.2.2",
"@eslint/js": "^9.15.0",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.15.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"eslint-plugin-storybook": "^0.11.1",
"globals": "^15.12.0",
"storybook": "^8.4.7",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1"
},
"eslintConfig": {
"extends": [
"plugin:storybook/remended"
]
}
}
I've got a form and I'm trying to setup the x-date-formatters package with React and Mui. Anyone know how to fix this?
Error is:
Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]
The odd thing to me is that longFormatters.?? exists in the project node_modules:
# find ./ -name '*longFormatters*'
./node_modules/date-fns/_lib/format/longFormatters.js
./node_modules/date-fns/_lib/format/longFormatters.cjs
./node_modules/date-fns/_lib/format/longFormatters.d.cts
./node_modules/date-fns/_lib/format/longFormatters.d.ts
Edited to add:
This should resolve because the vite docs say: (from https://vite.dev/config/shared-options#resolve-extensions)
resolve.extensions
Type: string[]
Default: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
List of file extensions to try for imports that omit extensions. Note it is NOT remended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.
and my vite.config.js is:
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()]
})
End edit
Storybook preview.tsx:
import type {Preview} from "@storybook/react";
import {MemoryRouter as Router, Route, Routes} from "react-router";
import UserContext, {LOGGED_OUT_USER_CONTEXT} from "../src/context/UserContext";
import {LocalizationProvider} from '@mui/x-date-pickers';
import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
const preview: Preview = {
decorators: [
(Story, {parameters}) => {
const {routerPath = "/"} = parameters;
const {userInfo = LOGGED_OUT_USER_CONTEXT} = parameters;
const setCurrentUser = () => {
return;
}
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<UserContext.Provider
value={{
currentUser: userInfo,
setCurrentUser
}}
>
<Router>
<Routes>
<Route path={routerPath} element={<Story/>}>
</Route>
</Routes>
</Router>
</UserContext.Provider>
</LocalizationProvider>
)
},
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
package.json:
{
"name": "i-web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"api-client-gen": "java -jar ~/bin/openapi-generator-cli-7.10.0.jar generate -i http://localhost:8080/v3/api-docs -g typescript-fetch -o src/itr-client/"
},
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@fontsource/roboto": "^5.1.0",
"@mui/icons-material": "^6.2.0",
"@mui/material": "^6.2.0",
"@mui/system": "^6.2.0",
"@mui/x-date-pickers": "^7.23.2",
"date-fns": "^4.1.0",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.54.1",
"react-router": "^7.0.2"
},
"devDependencies": {
"@chromatic-/storybook": "^3.2.2",
"@eslint/js": "^9.15.0",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.15.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"eslint-plugin-storybook": "^0.11.1",
"globals": "^15.12.0",
"storybook": "^8.4.7",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1"
},
"eslintConfig": {
"extends": [
"plugin:storybook/remended"
]
}
}
1 Answer
Reset to default 11Not sure why it got down voted. I figured out it was a library patibility issue and when I installed yarn add date-fns and import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; it worked.
The Moment js adapter appears not to work, but it looks like a version inpatibility and I don't really care what library this thing uses.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745586792a4634589.html
评论列表（0条）