remcohaszing / monaco-tailwindcss

Tailwindcss intellisense support in Monaco editor
https://monaco-tailwindcss.js.org
MIT License
87 stars 14 forks source link

essue when adding monaco tailwind in react #87

Closed Sendhavshab closed 5 months ago

Sendhavshab commented 5 months ago

i am trying ko add tailwind intellisense in monaco editor since 3 weeks but i can't please help i am fashing this error loader.js:234 Uncaught (in promise) Error: [object Event] at Object.y [as ensureError] (loader.js:234:18) at c._createLoadError (loader.js:1461:26) at c._onLoadError (loader.js:1472:23) at l (loader.js:1615:11) at Object.errorback (loader.js:1635:7) at y.triggerErrorback (loader.js:601:24) at loader.js:588:107 at HTMLScriptElement.d (loader.js:621:5)

my code ` import { Editor } from '@monaco-editor/react' import { configureMonacoTailwindcss, tailwindcssData } from 'monaco-tailwindcss' import { useState } from 'react'

export default function App() {

const [code , setCode ] = useState("") window.MonacoEnvironment = { getWorker(moduleId, label) { switch (label) { case 'editorWorkerService': return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)) case 'css': case 'less': case 'scss': return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url)) case 'handlebars': case 'html': case 'razor': return new Worker( new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url) ) case 'json': return new Worker( new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url) ) case 'javascript': case 'typescript': return new Worker( new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url) ) case 'tailwindcss': return new Worker(new URL('monaco-tailwindcss/tailwindcss.worker', import.meta.url)) default: throw new Error(Unknown label ${label}) } } }

const mounting = (monaco) => {

monaco.languages.css.cssDefaults.setOptions({
  data: {
    dataProviders: {
      tailwindcssData
    }
  }
})

configureMonacoTailwindcss(monaco)

}

return ( <>

hello
  <Editor
    beforeMount={mounting}
    height="100vh"
    language={'html'}
    theme="vs-dark"
    onChange={(d) => {
      setCode(d)
    }}
    width="100%"
    value={code}

  />
</>

) }`

remcohaszing commented 5 months ago

Please update your OP to use proper markdown formatting, especially code blocks.

remcohaszing commented 5 months ago

Duplicate of #88