viclafouch / mui-color-input Goto Github PK
View Code? Open in Web Editor NEW๐ A color input designed for MUI (Material ui) V5 built with TinyColor
Home Page: https://viclafouch.github.io/mui-color-input/
๐ A color input designed for MUI (Material ui) V5 built with TinyColor
Home Page: https://viclafouch.github.io/mui-color-input/
Describe the bug
Mui color input does not meet accessibility requirements due to "no discernible text" error for ColorButton adornment. Current implementation of labeled-by only works when the popover is open which isn't useful.
To Reproduce
Run AXE accessibility tester via unit test or chrome plugin and note the error:
Expected the HTML found at $('.css-7fsjx7-MuiStack-root.MuiStack-root:nth-child(1) > .MuiFormControl-root.MuiTextField-root.MuiColorInput-TextField > .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary > .MuiInputAdornment-root.MuiInputAdornment-positionStart.MuiInputAdornment-outlined > button') to have no violations:
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiColorInput-Button css-l6sfoi-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" style="background-color: rgb(0, 65, 107);">
Received:
"Buttons must have discernible text (button-name)"
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Expected behavior
In my opinion, since this is a purely visual interaction the color button could be set to have role="presentation" and the visually impaired user can simply enter the text value in the input to change the color.
Describe the bug
Hi,
MuiColorInput does not work with JoyUI, it throws this error : Cannot read properties of undefined
(different properties where displayed here like borderRadius or outlined). The above error occurred in the <MuiOutlinedInputRoot>
component.
My guess is there is a conflict with the required JoyUI's component <CssVarsProvider>
. When I remove it, everything is working fine without any styling.
I tried to rollback to 1.0.3 but it didn't change anything.
To Reproduce
import React from "react";
import { TextField, Button, Modal, ModalClose, ModalDialog } from "@mui/joy";
import { CssVarsProvider } from "@mui/joy/styles";
import { Stack } from "@mui/system";
import { MuiColorInput } from "mui-color-input";
const App = () => {
const [value, setValue] = React.useState("");
const [openModal, setOpen] = React.useState(false);
const handleColorChange = (newValue) => {
setValue(newValue);
};
return (
<CssVarsProvider>
<div
className="App"
style={{
backgroundColor: "grey",
height: "100vh",
}}
>
<Button
onClick={() => {
setOpen(true);
}}
>
Test modal
</Button>
<Modal
open={openModal}
onClose={() => {
setOpen(false);
}}
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ModalDialog
sx={{
maxWidth: 500,
borderRadius: "md",
p: 3,
boxShadow: "lg",
}}
>
<ModalClose
variant="outlined"
sx={{
top: "calc(-1/4 * var(--IconButton-size))",
right: "calc(-1/4 * var(--IconButton-size))",
boxShadow: "0 2px 12px 0 rgba(0 0 0 / 0.2)",
borderRadius: "50%",
bgcolor: "background.body",
}}
/>
<form
onSubmit={(event) => {
event.preventDefault();
setOpen(false);
}}
>
<Stack spacing={2}>
<TextField label="UID" autoFocus required />
<TextField label="Display Name" required />
<MuiColorInput value={value} onChange={handleColorChange} />
<Button type="submit">Submit</Button>
</Stack>
</form>
</ModalDialog>
</Modal>
</div>
</CssVarsProvider>
);
};
export default App;
package.json
"@ctrl/tinycolor": "^3.5.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/joy": "^5.0.0-alpha.60",
"@mui/material": "^5.11.2",
"mui-color-input": "^1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expected behavior
The input should be displayed.
Describe the bug
When using mui-color-input on a production built web application using NextJs 14.0.4, the color preview thumbnail is always the default checker and the color set is always #000000.
NextJS Version | MUI-Color-Input version | Works? |
---|---|---|
14.0.3 | 2.0.0 | โ |
14.0.3 | 2.0.1 | โ |
14.0.4 | 2.0.0 | โ |
14.0.4 | 2.0.1 | โ |
dev builds work (next dev
), but production builds (next build && next start
) do not.
To Reproduce
Steps to reproduce the behavior:
CodeSandbox repro
Expected behavior
Clicking the color selector should fire the onChange event with the new color selected.
Desktop (please complete the following information):
Additional context
Describe the bug
The bundled version of the package has an incorrect path to some types. Leading to an error when compiling typescript types for any library that depends on mui-color-input
.
To Reproduce
tsc
is used to compile typesnode_modules
to view the bad import directly in the index.types.d.ts
Expected behavior
Should resolve all types properly
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Struggling to get correct transformation of ES to work on unit testings. Tried adding babel
to deal with transformation but still not able to get it right for some reason.
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { jsx as c, jsxs as lt, Fragment as Mt } from "react/jsx-runtime";
SyntaxError: Cannot use import statement outside a module
Tried:
babel.config.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-modules-commonjs'],
};
jest.config.js
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
},
Any help would be greatly appreciated!
Hey, I installed the package and i got this error:
here is the tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
"module": "commonjs" /* Specify what module code is generated. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"strict": false /* Enable all strict type-checking options. */,
"noImplicitAny": false /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
"skipLibCheck": true,
"jsx": "react"
},
"include": ["src"]
}
Is your feature request related to a problem? Please describe.
No way to get the value after the selection is done.
Describe the solution you'd like
Please describe your desired solution clearly and concisely.
Add onPopupClosed to be called when the popup is closed.
or onChangeComplete
Describe alternatives you've considered
None
Additional context
Hi,
Is there a possibility to not set any value for the input?
Currently when I set initial value as empty string, and click later on the field it sets color to the fallbackValue. However I don't want that behavior because user don't always want to set a color.
Is there a way to set the value to null or undefined instead of always setting some color?
Describe the bug
I'm trying to implement the sample code into my project, however even the sample code gives me a weird error.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
No error of course ;)
Desktop (please complete the following information):
Additional context
This are my current dependencies. It might be something with versions or something? But I have no idea which one could be the issue. If I remove the Color picker code my project builds fine :)
"dependencies": {
"@date-io/date-fns": "^2.16.0",
"@draft-js-plugins/alignment": "^5.0.3",
"@draft-js-plugins/editor": "^4.1.3",
"@draft-js-plugins/focus": "^4.1.3",
"@draft-js-plugins/static-toolbar": "^4.1.3",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.14.7",
"@mui/lab": "^5.0.0-alpha.108",
"@mui/material": "^5.14.7",
"@mui/styles": "^5.14.11",
"@react-pdf/renderer": "^3.0.1",
"@reduxjs/toolkit": "^1.9.0",
"ajv": "^8.12.0",
"axios": "^1.4.0",
"date-fns": "^2.29.3",
"dotenv": "^16.0.3",
"draft-convert": "^2.1.13",
"draft-js": "^0.11.7",
"file-loader": "^6.2.0",
"html-react-parser": "^4.2.2",
"lodash-es": "^4.17.21",
"moment": "^2.29.4",
"mui-color-input": "^2.0.1",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-images": "^1.2.0-beta.7",
"react-mui-dropzone": "^4.0.7",
"react-photo-gallery": "^8.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",
"react-scroll": "^1.8.8",
"react-spring": "^9.5.5",
"react-use-gesture": "^9.0.4",
"redux": "^4.2.0",
"rxjs": "^7.5.7",
"sass": "^1.56.1",
"sweetalert2": "^11.6.9",
"typewriter-effect": "2.19.0"
},
"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@types/node": "^20.7.1",
"@types/react": "^18.2.23",
"@types/react-dom": "^18.2.8",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.43.0",
"@typescript-eslint/parser": "^5.43.0",
"babel-loader": "^9.1.0",
"css-loader": "^6.7.2",
"eslint": "^8.27.0",
"eslint-plugin-react": "^7.31.10",
"html-webpack-plugin": "^5.5.0",
"prettier": "^2.7.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.1",
"typescript": "^4.9.3",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
}
Doesn't work with react 17.0.2. UseRef null error
Describe the bug
When setting a function for the onChange prop it never get's called with invalid values. If the user enters an invalid value the fallback value is used. From the outside there is no way to know if the user entered an invalid value and e.g. show an error message instead of submitting the fallback value.
To Reproduce
(Non)Pseudocode to reproduce
const MyComponent = () => {
const [color, setColor] = React.useState('#ffffff')
let error = ''
const handleChange = (color) => {
if(!matchIsValidColor(color)) {
error = 'Invalid color!'
return
}
setColor(color)
}
return (
<MuiColorInput value={color} onChange={handleChange} />
)
Expected behavior
If the user enters an invalid value error gets set to 'Invalid color'.
Actual behavior
error never gets set to 'Invalid color'
Desktop (please complete the following information):
Version 2.0.3 has issue on build:
/node_modules/mui-color-input/dist/mui-color-input.es.js:1
import { jsx as c, jsxs as ct, Fragment as At } from "react/jsx-runtime";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1274:20)
at Module._compile (node:internal/modules/cjs/loader:1320:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at mod.require (/Users/d.baltak/Projects/agnoplay-website/node_modules/next/dist/server/require-hook.js:65:28)
at require (node:internal/modules/helpers:177:18)
Version 2.0.2 and lower works fine
Is your feature request related to a problem? Please describe.
Support for select multiple colors
Describe the solution you'd like
Support for select multiple colors
Describe the bug
I have just done a basic setup, but can't seem to type into the control, like the demo, i.e. type 'green'?
To Reproduce
Steps to reproduce the behavior:
I have just entered the following into a form
<MuiColorInput
value={internalValue}
onChange={(color) => {
console.log("color: ", color);
// setInternalValue(e.target.value);
// setColor(e.target.value);
}}
format="hex"
isAlphaHidden={true} />
Expected behavior
To be able to free type and have the cursor in the TextField
Desktop (please complete the following information):
Describe the bug
I'm getting a weird build error on Next 14.0.4. My Package.json is as follows:
{
"scripts": {
"next": "next",
"dev": "next dev",
"format": "prettier '**/*.{js,ts,jsx,tsx}' --write --ignore-path .gitignore",
"lint": "next lint",
"build": "next build",
"build:next": "next build && next export -o webDist/",
"export": "next export",
"start": "next start",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"dependencies": {
"@auth0/nextjs-auth0": "^3.5.0",
"@emotion/cache": "^11.10.5",
"@emotion/react": "^11.10.4",
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.11.5",
"@hookform/devtools": "^4.3.1",
"@hookform/resolvers": "^3.1.0",
"@js-temporal/polyfill": "^0.4.4",
"@magicbell/magicbell-react": "^10.10.2",
"@marker.io/browser": "^0.19.0",
"@mui/icons-material": "^5.14.19",
"@mui/lab": "^5.0.0-alpha.102",
"@mui/material": "^5.14.19",
"@mui/material-nextjs": "^5.15.11",
"@mui/system": "^5.15.15",
"@mui/x-data-grid": "^5.17.26",
"@mui/x-data-grid-pro": "^6.18.6",
"@mui/x-date-pickers": "^5.0.20",
"@mui/x-date-pickers-pro": "^6.2.0",
"@mui/x-license-pro": "^6.10.2",
"@quillsql/admin": "^1.5.2",
"@quillsql/react": "^2.11.9",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@react-pdf/renderer": "^3.1.14",
"@repo/ai": "workspace:*",
"@repo/api": "workspace:*",
"@repo/ui": "workspace:*",
"@sentry/nextjs": "^7.88.0",
"@sentry/react": "^7.112.2",
"@suspensive/react": "^1.26.6",
"@tanstack/react-query": "^5.29.2",
"@tanstack/react-query-devtools": "^5.17.1",
"@tanstack/react-table": "^8.16.0",
"@tremor/react": "^3.16.2",
"@types/lodash": "^4.17.0",
"@types/node": "17.0.39",
"@types/nprogress": "0.2.3",
"@types/numeral": "2.0.5",
"@types/prop-types": "^15.7.12",
"@types/react": "18.2.45",
"@types/react-dom": "17.0.13",
"@types/react-signature-canvas": "^1.0.5",
"@types/react-simple-oauth2-login": "^0.5.5",
"apexcharts": "3.49.0",
"axios": "^1.6.7",
"camelcase-keys": "^9.1.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"context-api": "0.0.2",
"country-state-city": "^3.1.2",
"cypress": "^13.8.1",
"date-fns": "^2.29.3",
"dayjs": "^1.11.11",
"i18next": "^22.0.6",
"i18next-chained-backend": "^4.0.1",
"i18next-http-backend": "^2.4.2",
"i18next-localstorage-backend": "^4.2.0",
"input-otp": "^1.2.4",
"lodash": "^4.17.21",
"lucide-react": "^0.352.0",
"moment": "^2.30.1",
"mui-color-input": "^2.0.0",
"mui-tel-input": "^3.0.2",
"next": "14.0.4",
"next-images": "1.8.5",
"notistack": "^3.0.1",
"nprogress": "0.2.0",
"numeral": "^2.0.6",
"posthog-js": "^1.96.1",
"prop-types": "^15.8.1",
"react": "^18.3",
"react-apexcharts": "1.4.0",
"react-avatar": "^5.0.3",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.3",
"react-draggable": "^4.4.6",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.51.3",
"react-i18next": "^12.3.1",
"react-number-format": "^5.1.3",
"react-plaid-link": "^3.5.1",
"react-pro-sidebar": "^1.1.0",
"react-rutter-link": "^1.2.0",
"react-signature-canvas": "^1.0.6",
"react-simple-oauth2-login": "^0.5.4",
"recharts": "^2.10.3",
"snakecase-keys": "^5.4.5",
"tailwind-merge": "^2.2.0",
"tailwindcss-animate": "^1.0.7",
"type-fest": "^4.18.0",
"use-debounce": "^9.0.3",
"yup": "1.4.0",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/prettier-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"tailwindcss": "^3.0.0",
"typescript": "^5"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
],
"**/*{.ts,.tsx}": [
"eslint --fix"
]
}
}
To Reproduce
Steps to reproduce the behavior:
pnpm build
xxxxxx/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@t_favwl4ubv7gk4n3t5qjgbhvxpa/node_modules/mui-color-input/dist/mui-color-input.es.js:1
import { jsx as c, jsxs as ct, Fragment as At } from "react/jsx-runtime";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1290:20)
at Module._compile (node:internal/modules/cjs/loader:1342:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
at Module.load (node:internal/modules/cjs/loader:1212:32)
at Module._load (node:internal/modules/cjs/loader:1028:12)
at Module.require (node:internal/modules/cjs/loader:1237:19)
at mod.require (xxxxxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:65:28)
at require (node:internal/modules/helpers:176:18)
at 49981 (xxxxxx/.next/server/pages/settings.js:1:171049)
> Build error occurred
Error: Failed to collect page data for /settings
at xxxxxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:1220:15 {
type: 'Error'
}
Expected behavior
Should build normally.
Desktop (please complete the following information):
Additional context
It's very important in our company to fix this error, since it's blocking our deployments. I'd really love to get some inputs on this. Thanks in advance!
Thank you for the awesome library โค๏ธ!
Is your feature request related to a problem? Please describe.
onChange calls on every color value change, so my another components re-renders when value changes
Describe the solution you'd like
I would like there to be props like onPopoverClosed/onPopoverOpened and they would only change the value when the popover is closed, so instead of updating the value every time the color changes. This will help if you have multiple component states in one component. And I haven't found a better name yet. Or Can I listen to the popover's state?
Describe the bug
Error when trying to unit test mui-color-input
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Unit test to be passed.
Desktop (please complete the following information):
Hi!
Thank you for the amazing package, really appreciate it!:) However, I encountered an issue after installing it.
Describe the bug
Uncaught TypeError: createTheme_default is not a function at Box.js:6:22
Should fix it:
Following this stackoverflow post, if we replace the
import Box from '@mui/material/Box';
to
import { Box } from '@mui/material';
in
ColorPopoverBody.tsx
then it should fix it.
Desktop:
Additional context
Versions of MUI packages we use in a project:
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
"@mui/lab": "^5.0.0-alpha.129",
"@mui/material": "^5.13.1",
"@mui/x-date-pickers": "^6.4.0",
Describe the bug
Installed package following instructions on this page https://viclafouch.github.io/mui-color-input/docs/getting-started/
Added component to my project and got this error
/<project_root>/node_modules/mui-color-input/dist/mui-color-input.es.js 171:21
Module parse failed: Unexpected token (171:21)
File was processed with these loaders:
* ../../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }
|
> return t.current?.(...r);
| }, []);
| }
Desktop (please complete the following information):
Additional context
Versions of MUI packages we use in a project
"@mui/x-date-pickers": "^5.0.3",
"@mui/material": "^5.10.5",
"@mui/styles": "^5.10.3",
"@mui/lab": "^5.0.0-alpha.99",
"@mui/icons-material": "^5.10.3",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
Describe the bug
When closing a popover on the website, the text field is automatically focused. This behavior is particularly problematic on mobile devices, creating a poor user experience.
To Reproduce
Steps to reproduce the behavior:
Go to the relevant page with the popover.
Click on the popover to open it.
Close the popover by clicking outside this popover.
Notice that the text field gets automatically focused, causing the mobile device's keyboard to pop up.
Expected behavior
The expected behavior is that after closing the popover, no automatic focus should be applied if we send this instruction.
Screenshots
If applicable, screenshots to demonstrate the issue would be helpful.
Desktop (please complete the following information):
OS: [e.g., Windows, macOS]
Browser [e.g., Chrome, Firefox]
Version [e.g., 95]
Smartphone (please complete the following information):
Device: [e.g., Samsung Galaxy S10]
OS: [e.g., Android 10]
Browser [e.g., Google Chrome, Firefox]
Version [e.g., 87]
Additional context
Further details on specific conditions under which this behavior is observed, or any related observations that might assist in diagnosing and fixing the bug.
The documentation describes that the "format" probe should default in a hex value.
But setting a color via the picker resulted in the value being updated to a rgb value. After I manually set the format prop to hex, this was fixed
Hi,
Is it possible to remove shadow behind color's button ?
The second slider is not working. The onchange function return the same color code when I try to change color. I will also provide my JSON file for my project.
{
"name": "booking-admin",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"build-only": "vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/base": "^5.0.0-beta.25",
"@mui/icons-material": "^5.14.19",
"@mui/lab": "^5.0.0-alpha.158",
"@mui/material": "^5.15.2",
"@mui/styled-engine-sc": "^6.0.0-alpha.7",
"@mui/x-date-pickers": "^6.18.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react": "^18.2.41",
"@types/react-dnd": "^3.0.2",
"@types/react-dnd-html5-backend": "^3.0.2",
"@types/react-dom": "^18.2.17",
"dayjs": "^1.11.10",
"helmet": "^7.1.0",
"lodash": "^4.17.21",
"material-react-table": "^2.1.0",
"mui-color-input": "^2.0.1",
"mui-file-input": "^4.0.3",
"mui-tel-input": "^5.0.0",
"notistack": "^3.0.1",
"react": "^18.2.0",
"react-big-calendar": "^1.8.6",
"react-calendar-timeline": "^0.28.0",
"react-dnd": "^7.5.0",
"react-dnd-html5-backend": "^7.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.3",
"react-hook-form": "^7.49.2",
"react-quill": "^2.0.0",
"react-router-dom": "^6.20.1",
"react-spinners": "^0.13.8",
"recharts": "^2.12.1",
"register-service-worker": "^1.7.2",
"rrule": "^2.8.1",
"styled-components": "^6.1.3",
"suneditor": "^2.45.1",
"suneditor-react": "^3.6.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"workbox-background-sync": "^6.6.0",
"workbox-broadcast-update": "^6.6.0",
"workbox-cacheable-response": "^6.6.0",
"workbox-core": "^6.6.0",
"workbox-expiration": "^6.6.0",
"workbox-google-analytics": "^6.6.0",
"workbox-navigation-preload": "^6.6.0",
"workbox-precaching": "^6.6.0",
"workbox-range-requests": "^6.6.0",
"workbox-routing": "^6.6.0",
"workbox-strategies": "^6.6.0",
"workbox-streams": "^6.6.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vite-plugin-pwa": "^0.19.1",
"workbox-window": "^7.0.0"
}
}
Using sample example from your docs and get error .
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:/var/www/admin-panel.loc/node_modules/mui-color-input/dist/mui-color-input.es.js (1)
Next.js
mui-color-input
file:/var/www/admin-panel.loc/.next/server/pages/settings.js (1798:18)
Next.js
eval
/src/pages/settings/index.tsx
./src/pages/settings/index.tsx
file:/var/www/admin-panel.loc/.next/server/pages/settings.js (1180:1)
Next.js```
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.