zikaari / monaco-editor-textmate

MIT License
120 stars 16 forks source link

Error: _themeService.getTheme is not a function #19

Open golmujik opened 3 years ago

golmujik commented 3 years ago

Please help, I am getting this error:

Uncaught Error: editor._themeService.getTheme is not a function

TypeError: editor._themeService.getTheme is not a function at Object.exports.TMToMonacoToken (tm-to-monaco-token.js:37) at eval (index.js:45) at Array.map () at Object.tokenize (index.js:42) at TokenizationSupport2Adapter.tokenize2 (standaloneLanguages.js:208) at safeTokenize (textModelTokens.js:372) at TextModelTokenization._updateTokensUntilLine (textModelTokens.js:296) at TextModelTokenization._tokenizeOneInvalidLine (textModelTokens.js:282) at TextModelTokenization._revalidateTokensNow (textModelTokens.js:233) at Object.eval [as callback] (textModelTokens.js:220) at eval (errors.js:20)

index.js

// import * as monaco from "monaco-editor";
// or
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
// if shipping only a subset of the features & languages is desired

import { loadWASM } from "onigasm"; // peer dependency of 'monaco-textmate'
import { Registry } from "monaco-textmate"; // peer dependency
import { wireTmGrammars } from "monaco-editor-textmate";

async function liftOff() {
  await loadWASM(`https://cdn.jsdelivr.net/npm/onigasm@2.2.5/lib/onigasm.wasm`); // See https://www.npmjs.com/package/onigasm#light-it-up

  const registry = new Registry({
    getGrammarDefinition: async (scopeName) => {
      console.log(scopeName);

      return {
        format: "plist",
        content: await (
          await fetch(
            `https://raw.githubusercontent.com/textmate/javascript.tmbundle/master/info.plist`
          )
        ).text(),
      };
    },
  });

  // map of monaco "language id's" to TextMate scopeNames
  const grammars = new Map();
  grammars.set("javascript", "source.js");

  monaco.editor.defineTheme("vs-code-theme-converted", {
    // Theme data
  });

  const editor = monaco.editor.create(document.getElementById("container"), {
    value: [`console.log('Hello')`].join("\n"),
    language: "javascript", // this won't work out of the box, see below for more info,
    theme: "vs-code-theme-converted", // very important, see comment above
  });

  setTimeout(() => {
    wireTmGrammars(monaco, registry, grammars, editor);
  }, 3000);
}

liftOff();

webpack.config.js

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.ttf$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new MonacoWebpackPlugin({
      languages: ["javascript"],
    }),
  ],
  mode: "development",
  resolve: { fallback: { path: require.resolve("path-browserify") } },
};
zikaari commented 3 years ago

Run this command in your project directory:

npm install git://github.com/miketromba/monaco-editor-textmate.git#patch-1

(or the yarn equivalent)

If the error you're seeing goes away, let me know, I'll just merge this patch into the main branch.

golmujik commented 3 years ago

Hii I will check and tell

IamAfnanSk commented 3 years ago

I have fixed this problem and even tested it, it is working perfectly.

20