react-textarea-code-editor

react-textarea-code-editor copied to clipboard

Bug: Code Editor + Jest not working

[{"_id":"634ba8e53bcf8d7ee43f5ee6","body":"You'll find easy reproduction steps in the README file of https:\/\/github.com\/activenode-bugs\/uiw-react-textarea-code-editor-jest ","issue_id":1660537882658,"origin_id":1098989368,"user_origin_id":9058762,"create_time":1649930976,"update_time":1649930976,"id":1665902821778,"updated_at":"2022-10-16T06:47:01.778000Z","created_at":"2022-10-16T06:47:01.778000Z"},{"_id":"634ba8e53bcf8d7ee43f5ee7","body":"@activenode \r\n\r\n- `dist` The ones in dist belong to `UMD`, `UMD` builds can be used directly in the browser via a <script> tag. [Example](https:\/\/uiwjs.github.io\/react-textarea-code-editor\/bundle.html)\r\n- `cjs` [CommonJS](http:\/\/wiki.commonjs.org\/wiki\/Modules\/1.1): CommonJS builds are intended for use with older bundlers like [browserify](http:\/\/browserify.org\/) or [webpack 1](https:\/\/webpack.github.io\/). The default file for these bundlers (pkg.main) is the Runtime only CommonJS build \r\n- `esm` [ES Module](http:\/\/exploringjs.com\/es6\/ch_modules.html): ES module builds are intended for use with modern bundlers like [webpack 2](https:\/\/webpack.js.org\/) or [rollup](http:\/\/rollupjs.org\/). The default file for these bundlers (pkg.module) is the Runtime only ES Module build ","issue_id":1660537882658,"origin_id":1099055366,"user_origin_id":1680273,"create_time":1649932863,"update_time":1649932863,"id":1665902821786,"updated_at":"2022-10-16T06:47:01.786000Z","created_at":"2022-10-16T06:47:01.786000Z"},{"_id":"634ba8e53bcf8d7ee43f5ee8","body":"Thanks for clarifying the difference. Can you imagine why the error of `import` appears even though `commonjs` shouldn't lead to that? Like this is really confusing. I've tried it in at least 5 different setups, with and without TypeScript, with and without nextjs and it's always the exact same thing.\r\n\r\nOnce you are using your library anywhere with jest (no matter if just jest, `babel-jest` or `ts-jest` or both) it will always lead to this exact problem that you face when you run the related repo.","issue_id":1660537882658,"origin_id":1099056886,"user_origin_id":9058762,"create_time":1649933007,"update_time":1649933007,"id":1665902821801,"updated_at":"2022-10-16T06:47:01.800000Z","created_at":"2022-10-16T06:47:01.800000Z"},{"_id":"634ba8e53bcf8d7ee43f5ee9","body":"The current repo test case is running fine, it has nothing to do with the library. This has a lot to do with build tools.\r\n@activenode ","issue_id":1660537882658,"origin_id":1099061846,"user_origin_id":1680273,"create_time":1649933455,"update_time":1649933455,"id":1665902821806,"updated_at":"2022-10-16T06:47:01.806000Z","created_at":"2022-10-16T06:47:01.806000Z"},{"_id":"634ba8e53bcf8d7ee43f5eea","body":"I get that. But many people that use react also use `jest`. And since `jest` does not natively support `ESM` modules (only very experimental support) it leads to problems when it detects an import statement.\r\n\r\nAnd now I'm trying to figure out why this only happens with this specific library. I tried it with `react-simple-code-editor` before and that one worked fine.\r\n\r\nAnd I was expecting this one to work fine as well because your `main` says `cjs\/index.js` so it should (and does) point to the cjs file. However then again it somehow tries to access (somewhere in between) `rehype` package which then contains a import statement and I'm really trying hard to grasp the underlying problem as it really only appears with this library.","issue_id":1660537882658,"origin_id":1099068758,"user_origin_id":9058762,"create_time":1649934065,"update_time":1649934065,"id":1665902821811,"updated_at":"2022-10-16T06:47:01.811000Z","created_at":"2022-10-16T06:47:01.811000Z"},{"_id":"634ba8e53bcf8d7ee43f5eeb","body":"Okay so `rehype` package only contains `ESM` and that is why your library (which has `rehype` as dependency) will not work in this context as `rehype` doesn't have the `cjs` version apparently.\r\n\r\n<img width=\"178\" alt=\"image\" src=\"https:\/\/user-images.githubusercontent.com\/9058762\/163378805-14d3cda0-62ee-4d52-9497-ef394913c226.png\">\r\n","issue_id":1660537882658,"origin_id":1099071560,"user_origin_id":9058762,"create_time":1649934285,"update_time":1649934285,"id":1665902821816,"updated_at":"2022-10-16T06:47:01.815000Z","created_at":"2022-10-16T06:47:01.815000Z"},{"_id":"634ba8e53bcf8d7ee43f5eec","body":"The official documentation confirms that \r\n\r\n<img width=\"1028\" alt=\"image\" src=\"https:\/\/user-images.githubusercontent.com\/9058762\/163379130-8c44fca8-4a8c-4649-9f17-b95bacbeb467.png\">\r\n\r\n\r\nhttps:\/\/www.npmjs.com\/package\/rehype#compatibility\r\n\r\nWhich implies your package essentially can only support ESM as it depends on `rehype`. Your CJS version essentially mixes with `ESM`","issue_id":1660537882658,"origin_id":1099074132,"user_origin_id":9058762,"create_time":1649934485,"update_time":1649934485,"id":1665902821820,"updated_at":"2022-10-16T06:47:01.819000Z","created_at":"2022-10-16T06:47:01.819000Z"},{"_id":"634ba8e53bcf8d7ee43f5eed","body":"So I can see 3 possible options here:\r\n\r\n1. Remove CJS support in your library (as it won't work together with rehype) \r\n2. Pre-compile rehype with the CJS version for the `cjs` dist\r\n3. Use a different package than `rehype`\r\n\r\n\r\nIf you choose option 1 that's completely fine, I just need the transparency so that I can switch back to our old `react-simple-code-editor`\r\n\r\nThank you so much!","issue_id":1660537882658,"origin_id":1099075862,"user_origin_id":9058762,"create_time":1649934614,"update_time":1649934614,"id":1665902821841,"updated_at":"2022-10-16T06:47:01.840000Z","created_at":"2022-10-16T06:47:01.840000Z"},{"_id":"634ba8e53bcf8d7ee43f5eee","body":"https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/blob\/9288db6203a3ae07d4876e61bcefc81c0494bace\/package.json#L56-L58\r\n\r\nCan be used together, depending on the build tool and your code. Iteration takes a while and is not that aggressive at the moment.\r\n\r\n@activenode \r\n\r\nIt has some ways to do compatibility.\r\n\r\n\r\n\r\n\r\n\r\n","issue_id":1660537882658,"origin_id":1099087660,"user_origin_id":1680273,"create_time":1649935481,"update_time":1649935481,"id":1665902821846,"updated_at":"2022-10-16T06:47:01.846000Z","created_at":"2022-10-16T06:47:01.846000Z"},{"_id":"634ba8e53bcf8d7ee43f5eef","body":"Thanks for the hints.","issue_id":1660537882658,"origin_id":1099090043,"user_origin_id":9058762,"create_time":1649935676,"update_time":1649935676,"id":1665902821852,"updated_at":"2022-10-16T06:47:01.852000Z","created_at":"2022-10-16T06:47:01.852000Z"},{"_id":"634ba8e53bcf8d7ee43f5ef0","body":"https:\/\/github.com\/jaywcjlove\/markdown-to-html-cli\r\n\r\nThis is also a solution.\r\njest test cases are separated from pkg.\r\n\r\n@activenode ","issue_id":1660537882658,"origin_id":1099091125,"user_origin_id":1680273,"create_time":1649935760,"update_time":1649935760,"id":1665902821857,"updated_at":"2022-10-16T06:47:01.857000Z","created_at":"2022-10-16T06:47:01.857000Z"},{"_id":"634ba8e53bcf8d7ee43f5ef1","body":"Thank you, I will look into the suggestions.","issue_id":1660537882658,"origin_id":1099106550,"user_origin_id":9058762,"create_time":1649937123,"update_time":1649937123,"id":1665902821869,"updated_at":"2022-10-16T06:47:01.868000Z","created_at":"2022-10-16T06:47:01.868000Z"},{"_id":"638d4d204b97542c9a3ef57c","body":"Hey @activenode which suggestion did you end up going with?","issue_id":1660537882658,"origin_id":1290023954,"user_origin_id":109499378,"create_time":1666677199,"update_time":1666677199,"id":1670204704402,"updated_at":"2022-12-05T01:45:04.402000Z","created_at":"2022-12-05T01:45:04.402000Z"},{"_id":"638d4d204b97542c9a3ef57d","body":"@swyftx-simon Actually, since this turned to show more problems the more \"workarounds\" we tried to add , we had a large discussion and there are only 3 things I can recommend simply because of their convenience:\r\n\r\nTry:\r\n- Switch on experimental ESM support in Jest (https:\/\/jestjs.io\/docs\/ecmascript-modules)\r\n- Switch to vitest which in many cases is super low effort because it's mainly compatible to Jest\r\n\r\nOr else:\r\nWe and the teams switched to vitest but also we switched to `@codemirror` as we experienced more and more problems we couldn't solve with this `react-textarea-code-editor` . \r\n\r\n`@codemirror` is freaking good but it's documentation isn't that easy. Everything's an extension in the newest CodeMirror but feel free to ping me directly for further questions. We basically switched to CodeMirror and used the `useCodeMirror` hook as a basis.\r\n","issue_id":1660537882658,"origin_id":1290044994,"user_origin_id":9058762,"create_time":1666679113,"update_time":1666701932,"id":1670204704429,"updated_at":"2022-12-05T01:45:04.428000Z","created_at":"2022-12-05T01:45:04.428000Z"},{"_id":"664492b22cfd0d66a80ad365","body":"I managed to fix this issue by changing the import.\r\n\r\nInstead of\r\n`import CodeEditor from '@uiw\/react-textarea-code-editor';`\r\n\r\nused:\r\n`import CodeEditor from '@uiw\/react-textarea-code-editor\/esm';`","issue_id":1660537882658,"origin_id":1789131345,"user_origin_id":11082863,"create_time":1698851522,"update_time":1698851522,"id":1715770034812,"updated_at":"2024-05-15T10:47:14.812000Z","created_at":"2024-05-15T10:47:14.812000Z"}]

Hey! Thanks for this library. The Code Editor does not work when using Jest. One reason is Jest not supporting `import` statements natively but what I am not understanding is...

activenode

is there an attribute to show the tooltip for any function ?

[{"_id":"634ba7dad297b621322992d8","body":"@alirezahmz This cannot be achieved. You can choose to use [@uiw\/react-codemirror](https:\/\/github.com\/uiwjs\/react-codemirror) or [@uiw\/react-monacoeditor](https:\/\/github.com\/jaywcjlove\/react-monacoeditor)","issue_id":1660537882663,"origin_id":1084420542,"user_origin_id":1680273,"create_time":1648724255,"update_time":1648724255,"id":1665902554905,"updated_at":"2022-10-16T06:42:34.905000Z","created_at":"2022-10-16T06:42:34.905000Z"}]

I want to showing tooltip when i hover on function text. is there an attribute for to do this? I mean something like the image below. 

alirezahmz

Disabling spell check / Grammarly / LanguageTool etc.

[{"_id":"634bb3c53bcf8d7ee43f67df","body":"https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/blob\/c6d38afe6b603859ff9fef98dcf0018b9e0e4773\/src\/index.tsx#L80\r\n\r\nI have defined it. I have no other solution.\r\n@louis030195 ","issue_id":1660537882665,"origin_id":1065848971,"user_origin_id":1680273,"create_time":1647076837,"update_time":1647076837,"id":1665905605365,"updated_at":"2022-10-16T07:33:25.365000Z","created_at":"2022-10-16T07:33:25.365000Z"},{"_id":"634bb3c53bcf8d7ee43f67e0","body":"> https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/blob\/c6d38afe6b603859ff9fef98dcf0018b9e0e4773\/src\/index.tsx#L80\r\n> \r\n> I have defined it. I have no other solution. @louis030195\r\n\r\nI still have grammarly showing up, is it supposed to disable it?","issue_id":1660537882665,"origin_id":1065850875,"user_origin_id":25003283,"create_time":1647077656,"update_time":1647077656,"id":1665905605369,"updated_at":"2022-10-16T07:33:25.368000Z","created_at":"2022-10-16T07:33:25.368000Z"},{"_id":"634bb3c53bcf8d7ee43f67e1","body":"I'm not sure about your problem, English seems to be fine.\r\n\r\nUse https:\/\/codesandbox.io\/ to reproduce your problem?\r\n\r\n@louis030195 ","issue_id":1660537882665,"origin_id":1065851353,"user_origin_id":1680273,"create_time":1647077907,"update_time":1647077907,"id":1665905605372,"updated_at":"2022-10-16T07:33:25.371000Z","created_at":"2022-10-16T07:33:25.371000Z"},{"_id":"634bb3c53bcf8d7ee43f67e2","body":"Will there be problems caused by environmental factors?","issue_id":1660537882665,"origin_id":1065851443,"user_origin_id":1680273,"create_time":1647077948,"update_time":1647077948,"id":1665905605374,"updated_at":"2022-10-16T07:33:25.374000Z","created_at":"2022-10-16T07:33:25.374000Z"},{"_id":"664492d62cfd0d66a80ad381","body":"You'd need to add `dataEnableGrammarly=\"false\"` to get rid of that. \r\n\r\nOr you could add the following CSS somewhere in the project, or to your own projects.\r\n\r\n```css\r\ntextarea ~ grammarly-extension {\r\n display: none;\r\n}\r\n```","issue_id":1660537882665,"origin_id":1419328541,"user_origin_id":50486078,"create_time":1675699471,"update_time":1675699598,"id":1715770070239,"updated_at":"2024-05-15T10:47:50.239000Z","created_at":"2024-05-15T10:47:50.239000Z"},{"_id":"664492d62cfd0d66a80ad382","body":"https:\/\/stackoverflow.com\/a\/46777787\/1334703\r\n\r\nIsn't this a standard property and it changes from time to time?\r\n\r\n@markmead ","issue_id":1660537882665,"origin_id":1423576615,"user_origin_id":1680273,"create_time":1675913884,"update_time":1675913884,"id":1715770070243,"updated_at":"2024-05-15T10:47:50.243000Z","created_at":"2024-05-15T10:47:50.243000Z"},{"_id":"664492d62cfd0d66a80ad383","body":"> To disable Grammarly, you can add attributes on the <textarea> element. The attributes keep changing, but you can add all of them to be safe.\r\n> - `data-gramm=\"false\"`\r\n> - `data-gramm_editor=\"false\"`\r\n> - `data-enable-grammarly=\"false\"`\r\n\r\n- https:\/\/github.com\/facebookarchive\/draft-js\/issues\/616#issuecomment-343596615","issue_id":1660537882665,"origin_id":1423578178,"user_origin_id":1680273,"create_time":1675914071,"update_time":1675914071,"id":1715770070245,"updated_at":"2024-05-15T10:47:50.245000Z","created_at":"2024-05-15T10:47:50.245000Z"}]

Hey, thanks for the nice component, do you have any idea how to disable Grammarly, LanguageTool and such? I tried to use `spellCheck={false}` without much success? Thank you :)

louis030195

is there an attribute to show the number of lines ?

[{"_id":"634baef0378063557c2da413","body":"you can use [@uiw\/react-codemirror](https:\/\/github.com\/uiwjs\/react-codemirror) or [@uiw\/react-monacoeditor](https:\/\/github.com\/jaywcjlove\/react-monacoeditor).\r\n@ykhedher ","issue_id":1660537882669,"origin_id":1057554777,"user_origin_id":1680273,"create_time":1646269158,"update_time":1646269158,"id":1665904368205,"updated_at":"2022-10-16T07:12:48.205000Z","created_at":"2022-10-16T07:12:48.205000Z"}]

I am not sure if I am missing something but it will be really cool if there's an attribute to show the number of lines. Example: 👇 ` `

ykhedher

Static build outputs `[object Object],[object Object],[object Object]` if value prop is set initially

[{"_id":"634ba7498041c95dfb0ad0b0","body":"@leonardomathon Example:\r\nhttps:\/\/codesandbox.io\/embed\/uiwjs-react-textarea-code-editor-issues-97-kbfbxg?fontsize=14&hidenavigation=1&theme=dark","issue_id":1660537882673,"origin_id":1050725055,"user_origin_id":1680273,"create_time":1645784510,"update_time":1645784510,"id":1665902409006,"updated_at":"2022-10-16T06:40:09.006000Z","created_at":"2022-10-16T06:40:09.006000Z"},{"_id":"634ba7498041c95dfb0ad0b1","body":"> @leonardomathon Example: https:\/\/codesandbox.io\/embed\/uiwjs-react-textarea-code-editor-issues-97-kbfbxg?fontsize=14&hidenavigation=1&theme=dark\r\n\r\nIf you now open a new terminal and build the vite app using `yarn build` and afterwards view the vite app using `yarn serve`, you will see the bug I'm facing:\r\n\r\n","issue_id":1660537882673,"origin_id":1050762884,"user_origin_id":30813241,"create_time":1645787666,"update_time":1645787666,"id":1665902409011,"updated_at":"2022-10-16T06:40:09.011000Z","created_at":"2022-10-16T06:40:09.011000Z"},{"_id":"634ba7498041c95dfb0ad0b2","body":"I can't fix your error.\r\nYou may need to go to [**@vitejs**](https:\/\/github.com\/vitejs\/vite) to find the answer.\r\n\r\n@leonardomathon \r\n","issue_id":1660537882673,"origin_id":1051833156,"user_origin_id":1680273,"create_time":1645864513,"update_time":1645864513,"id":1665902409015,"updated_at":"2022-10-16T06:40:09.014000Z","created_at":"2022-10-16T06:40:09.014000Z"},{"_id":"634ba7498041c95dfb0ad0b3","body":"> I can't fix your error.\n> \n> You may need to go to [**@vitejs**](https:\/\/github.com\/vitejs\/vite) to find the answer.\n> \n> \n> \n> @leonardomathon \n> \n> \n\nThanks for the response @jaywcjlove I'll try to see if someone from Vite can help me","issue_id":1660537882673,"origin_id":1053540593,"user_origin_id":30813241,"create_time":1645964962,"update_time":1645964962,"id":1665902409017,"updated_at":"2022-10-16T06:40:09.017000Z","created_at":"2022-10-16T06:40:09.017000Z"}]

Thanks for the awesome and simple to use package. I like it, since it's very simple and it suits my needs perfectly. However, I stumbled upon an issue that I...

leonardomathon

ref to textarea throwing exception.

[{"_id":"634badb43056137e2652f91c","body":"I'm not sure what happened, but I'm sure there is no problem with `ref`. @amitdhiman000 \r\n\r\nhttps:\/\/codesandbox.io\/s\/react-textarea-code-editor-for-example-80-21gzg?file=\/index.js\r\n\r\n\r\n\r\n\r\n<details>\r\n<summary>Example:<\/summary>\r\n\r\n\r\n```jsx\r\nimport React, { useEffect } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport CodeEditor, { SelectionText } from \"@uiw\/react-textarea-code-editor\";\r\n\r\nfunction App() {\r\n const textRef = React.useRef();\r\n const [code, setCode] = React.useState(\r\n `function add(a, b) {\\n return a + b;\\n}`\r\n );\r\n useEffect(() => {\r\n if (textRef.current) {\r\n const obj = new SelectionText(textRef.current);\r\n console.log(\"obj:\", obj);\r\n }\r\n }, []);\r\n\r\n const onBold = () => {\r\n console.log(\">>\", textRef.current);\r\n \/\/ editorRef.current is pointing to some exception.\r\n };\r\n\r\n return (\r\n <div>\r\n <button onClick={onBold}>bold text<\/button>\r\n\r\n <CodeEditor\r\n value={code}\r\n ref={textRef}\r\n language=\"js\"\r\n placeholder=\"Please enter JS code.\"\r\n onChange={(evn) => setCode(evn.target.value)}\r\n padding={15}\r\n style={{\r\n backgroundColor: \"#f5f5f5\",\r\n fontFamily:\r\n \"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace\",\r\n fontSize: 12\r\n }}\r\n \/>\r\n <\/div>\r\n );\r\n}\r\n\r\nReactDOM.render(<App \/>, document.getElementById(\"container\"));\r\n```\r\n\r\n\r\n\r\n<\/details>","issue_id":1660537882677,"origin_id":1006209969,"user_origin_id":1680273,"create_time":1641432307,"update_time":1641432307,"id":1665904052966,"updated_at":"2022-10-16T07:07:32.966000Z","created_at":"2022-10-16T07:07:32.966000Z"},{"_id":"634badb43056137e2652f91d","body":"@jaywcjlove\r\n \r\nSorry, I forgot to mention, issue is happening in nextjs project.\r\nI have followed this [example](https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/issues\/31#issuecomment-909363339) \r\n","issue_id":1660537882677,"origin_id":1006793088,"user_origin_id":719001,"create_time":1641491551,"update_time":1641491551,"id":1665904052970,"updated_at":"2022-10-16T07:07:32.970000Z","created_at":"2022-10-16T07:07:32.970000Z"},{"_id":"634badb43056137e2652f91e","body":"https:\/\/codesandbox.io\/s\/react-textarea-code-editor-example-nextjs-gdzlw?from-embed\r\n\r\nProvide examples like above.\r\n@amitdhiman000 ","issue_id":1660537882677,"origin_id":1007075664,"user_origin_id":1680273,"create_time":1641520369,"update_time":1641520369,"id":1665904052973,"updated_at":"2022-10-16T07:07:32.973000Z","created_at":"2022-10-16T07:07:32.973000Z"},{"_id":"634badb43056137e2652f91f","body":"@jaywcjlove \r\nHere is the codesandbox example.\r\nhttps:\/\/codesandbox.io\/s\/react-textarea-code-editor-example-nextjs-forked-nqgxb?file=\/pages\/index.js\r\nWhen you click on **Bold** button, the textarea ref is pointing to an exception.\r\n","issue_id":1660537882677,"origin_id":1007620150,"user_origin_id":719001,"create_time":1641578859,"update_time":1641578859,"id":1665904052976,"updated_at":"2022-10-16T07:07:32.976000Z","created_at":"2022-10-16T07:07:32.976000Z"},{"_id":"664492d12308c3a903177271","body":"I'm seeing a similar issue in my nextjs project.","issue_id":1660537882677,"origin_id":1435829736,"user_origin_id":29136904,"create_time":1676775852,"update_time":1676775852,"id":1715770065524,"updated_at":"2024-05-15T10:47:45.524000Z","created_at":"2024-05-15T10:47:45.524000Z"}]

When trying to get ref to underlying textarea, it is returning some exception. version: 1.4.15 sample code. ``` export function SimpleHTMLEditor() { const editorRef = React.useRef(false); const onBold = ()...

amitdhiman000

Any way to override colours?

[{"_id":"634bb13d3056137e2652fc19","body":"You can override the original style by style. You can also delete the style in the package through **[@uiwjs\/babel-plugin-transform-remove-imports](https:\/\/github.com\/uiwjs\/babel-plugin-transform-remove-imports)** and redefine the style yourself.\r\n@neural9","issue_id":1660537882680,"origin_id":968200593,"user_origin_id":1680273,"create_time":1636861591,"update_time":1636861684,"id":1665904957618,"updated_at":"2022-10-16T07:22:37.618000Z","created_at":"2022-10-16T07:22:37.618000Z"}]

I want to use a dark theme for example and the operators such as '=' are always in black.

neural9

Next.js Support?

[{"_id":"634bb263d297b62132299c5d","body":"@codeXLinkX \r\n\r\n[](https:\/\/codesandbox.io\/embed\/react-textarea-code-editor-example-nextjs-gdzlw?fontsize=14&hidenavigation=1&theme=dark)\r\n\r\n```bash\r\nnpm install next-remove-imports\r\nnpm install @uiw\/[email protected]\r\n```\r\n\r\n```js\r\n\/\/ next.config.js\r\nconst removeImports = require(\"next-remove-imports\")();\r\nmodule.exports = removeImports({\r\n experimental: { esmExternals: true }\r\n});\r\n```\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport dynamic from \"next\/dynamic\";\r\nimport \"@uiw\/react-textarea-code-editor\/dist.css\";\r\n\r\nconst CodeEditor = dynamic(\r\n () => import(\"@uiw\/react-textarea-code-editor\").then((mod) => mod.default),\r\n { ssr: false }\r\n);\r\n\r\nfunction HomePage() {\r\n const [code, setCode] = React.useState(\r\n `function add(a, b) {\\n return a + b;\\n}`\r\n );\r\n return (\r\n <div>\r\n <CodeEditor\r\n value={code}\r\n language=\"js\"\r\n placeholder=\"Please enter JS code.\"\r\n onChange={(evn) => setCode(evn.target.value)}\r\n padding={15}\r\n style={{\r\n fontSize: 12,\r\n backgroundColor: \"#f5f5f5\",\r\n fontFamily:\r\n \"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace\"\r\n }}\r\n \/>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default HomePage;\r\n```","issue_id":1660537882685,"origin_id":909363339,"user_origin_id":1680273,"create_time":1630425205,"update_time":1630425205,"id":1665905251108,"updated_at":"2022-10-16T07:27:31.108000Z","created_at":"2022-10-16T07:27:31.108000Z"},{"_id":"634bb263d297b62132299c5e","body":"https:\/\/github.com\/uiwjs\/react-md-editor\/issues\/52#issuecomment-848969341","issue_id":1660537882685,"origin_id":909368824,"user_origin_id":1680273,"create_time":1630425610,"update_time":1630425610,"id":1665905251111,"updated_at":"2022-10-16T07:27:31.111000Z","created_at":"2022-10-16T07:27:31.111000Z"},{"_id":"634bb263d297b62132299c5f","body":"This line still seems to be problematic: `import \"@uiw\/react-textarea-code-editor\/dist.css\";` causing following error:\r\n```\r\nerror - ..\/..\/@uiw\/react-textarea-code-editor\/dist.css\r\nGlobal CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages\/_app.js. Or convert the import to Component-Level CSS (CSS Modules).\r\nRead more: https:\/\/nextjs.org\/docs\/messages\/css-global\r\n```\r\n\r\nIf I remove that line, I still get another error:\r\n```\r\nerror - ..\/..\/@uiw\/react-textarea-code-editor\/cjs\/utils.js:1:0\r\nModule not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https:\/\/nextjs.org\/docs\/messages\/import-esm-externals\r\n\r\nImport trace for requested module:\r\n.\/..\/.\/@uiw\/react-textarea-code-editor\/cjs\/index.js\r\n```\r\n\r\nIf I change `experimental: { esmExternals: true }` to `experimental: { esmExternals: \"loose\" }` while excluding `import \"@uiw\/react-textarea-code-editor\/dist.css\";`, then errors are gone but then the code in textarea doesn't get highlighted.","issue_id":1660537882685,"origin_id":910343555,"user_origin_id":8550204,"create_time":1630506664,"update_time":1630506664,"id":1665905251114,"updated_at":"2022-10-16T07:27:31.113000Z","created_at":"2022-10-16T07:27:31.113000Z"},{"_id":"634bb263d297b62132299c60","body":"@codeXLinkX Upgrade `@uiw\/[email protected]`","issue_id":1660537882685,"origin_id":910345268,"user_origin_id":1680273,"create_time":1630506776,"update_time":1630506776,"id":1665905251117,"updated_at":"2022-10-16T07:27:31.116000Z","created_at":"2022-10-16T07:27:31.116000Z"},{"_id":"634bb263d297b62132299c61","body":"Do I still need to keep dist.css import after upgrading to 1.4.7? Because I still get\r\n```\r\nerror - ..\/..\/@uiw\/react-textarea-code-editor\/dist.css\r\nGlobal CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages\/_app.js. Or convert the import to Component-Level CSS (CSS Modules).\r\nRead more: https:\/\/nextjs.org\/docs\/messages\/css-global\r\n```\r\n\r\nafter this change:\r\n```\r\nconst removeImports = require(\"next-remove-imports\")();\r\nmodule.exports = removeImports({\r\n experimental: { esmExternals: true },\r\n webpack5: true,\r\n ...\r\n});\r\n```","issue_id":1660537882685,"origin_id":910429887,"user_origin_id":8550204,"create_time":1630512271,"update_time":1630512271,"id":1665905251119,"updated_at":"2022-10-16T07:27:31.118000Z","created_at":"2022-10-16T07:27:31.118000Z"},{"_id":"634bb263d297b62132299c62","body":"@codeXLinkX Example: https:\/\/codesandbox.io\/embed\/react-textarea-code-editor-example-nextjs-gdzlw?fontsize=14&hidenavigation=1&theme=dark\r\n\r\n[](https:\/\/uiwjs.github.io\/npm-unpkg\/#\/pkg\/@uiw\/[email protected]\/file\/README.md)","issue_id":1660537882685,"origin_id":910431199,"user_origin_id":1680273,"create_time":1630512360,"update_time":1630512360,"id":1665905251121,"updated_at":"2022-10-16T07:27:31.121000Z","created_at":"2022-10-16T07:27:31.121000Z"},{"_id":"634bb263d297b62132299c63","body":"I wonder if the example only works because the css was imported in a file under the \/pages folder. I am importing it outside \/pages so it probably doesn't run in the server side.","issue_id":1660537882685,"origin_id":910520098,"user_origin_id":8550204,"create_time":1630519032,"update_time":1630519032,"id":1665905251123,"updated_at":"2022-10-16T07:27:31.123000Z","created_at":"2022-10-16T07:27:31.123000Z"},{"_id":"634bb263d297b62132299c64","body":"I'm not sure what you mean.\r\n@codeXLinkX ","issue_id":1660537882685,"origin_id":911212324,"user_origin_id":1680273,"create_time":1630561271,"update_time":1630561271,"id":1665905251126,"updated_at":"2022-10-16T07:27:31.126000Z","created_at":"2022-10-16T07:27:31.126000Z"},{"_id":"638d5cdfbc25e83db018c70e","body":"- https:\/\/github.com\/uiwjs\/react-md-editor\/issues\/446#issue-1417594634\r\n\r\nExample: https:\/\/codesandbox.io\/s\/nextjs-example-react-md-editor-qjhn7?file=\/pages\/index.js \r\nExample: [@uiwjs\/next-remove-imports\/example](https:\/\/github.com\/uiwjs\/next-remove-imports\/tree\/main\/example) \r\nExample: https:\/\/next-remove-imports-example.vercel.app","issue_id":1660537882685,"origin_id":1286566424,"user_origin_id":1680273,"create_time":1666337149,"update_time":1666337149,"id":1670208735549,"updated_at":"2022-12-05T02:52:15.549000Z","created_at":"2022-12-05T02:52:15.549000Z"},{"_id":"638d5cdfbc25e83db018c70f","body":"For my own learning: @jaywcjlove could you please explain why the following `next.config` is needed?\r\n```\r\nconst removeImports = require(\"next-remove-imports\")();\r\nmodule.exports = removeImports({\r\n experimental: { esmExternals: true }\r\n});\r\n```","issue_id":1660537882685,"origin_id":1312632800,"user_origin_id":62502207,"create_time":1668311701,"update_time":1668311701,"id":1670208735555,"updated_at":"2022-12-05T02:52:15.554000Z","created_at":"2022-12-05T02:52:15.554000Z"},{"_id":"638d5cdfbc25e83db018c710","body":"The [next-remove-imports](https:\/\/www.npmjs.com\/package\/next-remove-imports) plugin removes the css files(in node_modules) introduced in the package, and nextjs([CSS Imported by a Dependency](https:\/\/github.com\/vercel\/next.js\/blob\/deprecated-main\/errors\/css-npm.md)) will not report an error.\r\n\r\n@MariaSolOs ","issue_id":1660537882685,"origin_id":1312640378,"user_origin_id":1680273,"create_time":1668315770,"update_time":1668315770,"id":1670208735559,"updated_at":"2022-12-05T02:52:15.558000Z","created_at":"2022-12-05T02:52:15.558000Z"},{"_id":"638d5cdfbc25e83db018c711","body":"@jaywcjlove Thank you for the quick reply! However, it still unclear to me why the `esmExternals` option is needed. From [this Next PR](https:\/\/github.com\/vercel\/next.js\/pull\/27069) it seems like this package should have an `exports` field in its `package.json`...?","issue_id":1660537882685,"origin_id":1312641782,"user_origin_id":62502207,"create_time":1668316545,"update_time":1668316545,"id":1670208735561,"updated_at":"2022-12-05T02:52:15.561000Z","created_at":"2022-12-05T02:52:15.561000Z"},{"_id":"638d5cdfbc25e83db018c712","body":"@MariaSolOs yes i didn't think about adding\r\n\r\n```js\r\n \"main\": \"cjs\/index.js\",\r\n \"module\": \"esm\/index.js\",\r\n\"exports\": {\r\n \".\": {\r\n \"import\": \".\/esm\/index.js\",\r\n \"require\": \".\/cjs\/index.js\"\r\n },\r\n \".\/index\": {\r\n \"import\": \".\/esm\/index.js\",\r\n \"require\": \".\/cjs\/index.js\"\r\n }\r\n \".\": {\r\n \"import\": \".\/esm\/index.js\",\r\n \"require\": \".\/cjs\/index.js\"\r\n },\r\n \".\/shortcuts\": {\r\n \"import\": \".\/esm\/shortcuts.js\",\r\n \"require\": \".\/cjs\/shortcuts.js\"\r\n },\r\n \".\/styles\": {\r\n \"import\": \".\/esm\/styles.js\",\r\n \"require\": \".\/cjs\/styles.js\"\r\n },\r\n \".\/SelectionText\": {\r\n \"import\": \".\/esm\/SelectionText.js\",\r\n \"require\": \".\/cjs\/SelectionText.js\"\r\n },\r\n \".\/utils\": {\r\n \"import\": \".\/esm\/utils.js\",\r\n \"require\": \".\/cjs\/utils.js\"\r\n }\r\n}\r\n```\r\n\r\nhttps:\/\/github.com\/uiwjs\/react-textarea-code-editor\/blob\/7e75adfc257c9537c4f51c64de978e18d3e96d98\/package.json#L5-L7","issue_id":1660537882685,"origin_id":1312644128,"user_origin_id":1680273,"create_time":1668317744,"update_time":1668317744,"id":1670208735563,"updated_at":"2022-12-05T02:52:15.563000Z","created_at":"2022-12-05T02:52:15.563000Z"},{"_id":"638d5cdfbc25e83db018c713","body":"@jaywcjlove Yeah I *think* that adding that `\"exports\"` field should avoid the need of having `experimental: { esmExternals: true }`.","issue_id":1660537882685,"origin_id":1312783000,"user_origin_id":62502207,"create_time":1668361015,"update_time":1668361015,"id":1670208735566,"updated_at":"2022-12-05T02:52:15.566000Z","created_at":"2022-12-05T02:52:15.566000Z"},{"_id":"638d5cdfbc25e83db018c714","body":"@MariaSolOs Tested, the style can't automatically load the rollback code.","issue_id":1660537882685,"origin_id":1313875884,"user_origin_id":1680273,"create_time":1668437520,"update_time":1668437520,"id":1670208735569,"updated_at":"2022-12-05T02:52:15.568000Z","created_at":"2022-12-05T02:52:15.568000Z"},{"_id":"664492b12cfd0d66a80ad33c","body":"Is `@v1.4.4` required to work on Next.js? We are using the latest version with next using dynamic import but the styling in the text area does not work at all. :\/ \r\n\r\n**_Nevemind_**\r\n\r\nI was missing this in my imports:\r\n\r\n```tsx\r\nimport \"@uiw\/react-textarea-code-editor\/dist.css\";\r\n```\r\n\r\nthe example should add this","issue_id":1660537882685,"origin_id":1565790854,"user_origin_id":44002321,"create_time":1685238388,"update_time":1685238648,"id":1715770033675,"updated_at":"2024-05-15T10:47:13.674000Z","created_at":"2024-05-15T10:47:13.674000Z"},{"_id":"664492b12cfd0d66a80ad33e","body":"Im using the same example posted in the Readme, for working with the last version of Nextjs using app routing, and doesnt work it gives me the same error of modules\r\n\r\n .\/node_modules\/@uiw\/react-textarea-code-editor\/cjs\/utils.js:10:14\r\n Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https:\/\/nextjs.org\/docs\/messages\/import-esm-externals\r\n \r\n https:\/\/nextjs.org\/docs\/messages\/module-not-found\r\n \r\n Import trace for requested module:\r\n .\/node_modules\/@uiw\/react-textarea-code-editor\/cjs\/index.js\r\n .\/src\/app\/translate\/page.tsx\r\n","issue_id":1660537882685,"origin_id":1576473798,"user_origin_id":72047760,"create_time":1685958287,"update_time":1685958287,"id":1715770033681,"updated_at":"2024-05-15T10:47:13.680000Z","created_at":"2024-05-15T10:47:13.680000Z"},{"_id":"664492b12cfd0d66a80ad33f","body":"@JM-delatorre Example: https:\/\/github.com\/uiwjs\/next-remove-imports\/tree\/main\/example","issue_id":1660537882685,"origin_id":1576514419,"user_origin_id":1680273,"create_time":1685959917,"update_time":1685959917,"id":1715770033684,"updated_at":"2024-05-15T10:47:13.683000Z","created_at":"2024-05-15T10:47:13.683000Z"},{"_id":"664492b12cfd0d66a80ad340","body":"Im not sure what is the problem, but i re installed the two packages without the versioning tag, and in the component that i am working on i specified that is a client and not a server component. I solved it this way but im not sure why it works.\r\n\r\nbtw thanks for the fast response.","issue_id":1660537882685,"origin_id":1576542370,"user_origin_id":72047760,"create_time":1685961194,"update_time":1685961194,"id":1715770033687,"updated_at":"2024-05-15T10:47:13.686000Z","created_at":"2024-05-15T10:47:13.686000Z"},{"_id":"664492b12cfd0d66a80ad341","body":"@JM-delatorre Thanks for your comment, that helped me. I added `\"use client\"` to the top of the file and it worked.","issue_id":1660537882685,"origin_id":1661254078,"user_origin_id":33395784,"create_time":1690933765,"update_time":1690933765,"id":1715770033690,"updated_at":"2024-05-15T10:47:13.690000Z","created_at":"2024-05-15T10:47:13.690000Z"},{"_id":"664492b12cfd0d66a80ad342","body":"Using \"next\": \"13.4.13\",\r\n\r\nI also had to add: `transpilePackages: [\"react-textarea-code-editor\"],`\r\n\r\nto my `nextConfig` object","issue_id":1660537882685,"origin_id":1728564555,"user_origin_id":9645205,"create_time":1695253723,"update_time":1695253723,"id":1715770033696,"updated_at":"2024-05-15T10:47:13.695000Z","created_at":"2024-05-15T10:47:13.695000Z"},{"_id":"664492b12cfd0d66a80ad343","body":"> Using \"next\": \"13.4.13\",\r\n> \r\n> I also had to add: `transpilePackages: [\"react-textarea-code-editor\"],`\r\n> \r\n> to my `nextConfig` object\r\n\r\nI had to do `'@uiw\/react-textarea-code-editor'` and it worked with v3","issue_id":1660537882685,"origin_id":2052499243,"user_origin_id":6403652,"create_time":1712954430,"update_time":1712954430,"id":1715770033701,"updated_at":"2024-05-15T10:47:13.700000Z","created_at":"2024-05-15T10:47:13.700000Z"}]

When I try to use this package in a React/Nextjs project, I get the following errors: `Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference...

codeXLinkX

chore(deps): update dependency lint-staged to v15

[{"_id":"66d0d382a14080c01c02e75e","body":"### <span aria-hidden=\"true\">\u274c<\/span> Deploy Preview for *vibrant-wilson-a6f337* failed.\n\n\n| Name | Link |\n|:-:|------------------------|\n|<span aria-hidden=\"true\">\ud83d\udd28<\/span> Latest commit | 2685b334ab2d74c81f5fa372e612ca05decd36c2 |\n|<span aria-hidden=\"true\">\ud83d\udd0d<\/span> Latest deploy log | https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/deploys\/652ae5c8018f9e000829c8c2 |","issue_id":1710324800502,"origin_id":1763127855,"user_origin_id":40209326,"create_time":1697310154,"update_time":1697310154,"id":1724961666018,"updated_at":"2024-08-29T20:01:06.017000Z","created_at":"2024-08-29T20:01:06.017000Z"}]

This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [lint-staged](https://redirect.github.com/lint-staged/lint-staged) | [`^14.0.0` -> `^15.0.0`](https://renovatebot.com/diffs/npm/lint-staged/14.0.1/15.2.11) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/)...

renovate[bot]

chore(deps): update dependency lerna to v8

[{"_id":"66d0d36e5e9926b2b6051166","body":"### <span aria-hidden=\"true\">\u274c<\/span> Deploy Preview for *vibrant-wilson-a6f337* failed.\n\n\n| Name | Link |\n|:-:|------------------------|\n|<span aria-hidden=\"true\">\ud83d\udd28<\/span> Latest commit | c79dd9fe442b84b263159ce064b89ff834675760 |\n|<span aria-hidden=\"true\">\ud83d\udd0d<\/span> Latest deploy log | https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/deploys\/655fa5abfb92ba00084a9481 |","issue_id":1710324800510,"origin_id":1824838851,"user_origin_id":40209326,"create_time":1700767149,"update_time":1700767149,"id":1724961646613,"updated_at":"2024-08-29T20:00:46.613000Z","created_at":"2024-08-29T20:00:46.613000Z"}]

This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [lerna](https://lerna.js.org) ([source](https://redirect.github.com/lerna/lerna/tree/HEAD/packages/lerna)) | [`^7.1.3` -> `^8.0.0`](https://renovatebot.com/diffs/npm/lerna/7.4.2/8.1.9) | [](https://docs.renovatebot.com/merge-confidence/) |...

renovate[bot]