Could not find a declaration file for module 'prismjs/components/prism-core' vue-prism-editor

Question

I am just trying to use this package (vue-prism-editor) in my vuejs 3 application, but I am always getting an error as preceding.

TS7016: Could not find a declaration file for module 'prismjs/components/prism-core'. 'C:/Sibeesh/GitHub/vue-resume/node_modules/prismjs/components/prism-core.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/prismjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'prismjs/components/prism-core';` 

I did install @types/prismjs but no luck there. I followed the steps mentioned in the readme and trying exactly the same.

Below is my package.json file.

{
  "name": "vue-resume",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jsoneditor": "^9.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-prism-editor": "^2.0.0-alpha.2",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/prismjs": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "prismjs": "^1.23.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

Here is my vue component.

<template>
  <div class="hello">
    <prism-editor
      class="code-editor"
      v-model="code"
      :highlight="highlighter"
      line-numbers
    ></prism-editor>
  </div>
</template>

<script lang="ts">
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor';
  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)
  import { highlight, languages } from 'prismjs/components/prism-core';
  import 'prismjs/components/prism-javascript';

  export default {
    components: {
      PrismEditor,
    },
    data: () => ({ code: 'console.log("Hello World")' }),
    methods: {
      highlighter(code: string) {
        return highlight(code, languages.js); // languages.<insert language> to return html with markup
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

/* required class */
  .code-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }

</style>

Have you ever been able to use this plugin in vue 3 application?

Answer 1

After spending some time on this issue, I could find out what mistake I am doing. Did you notice the lang="ts" in my script? Well, that is the root cause of this issue. After removing that from <script>, the error was gone. This issue in GitHub helped me find the solution for this. One drawback of this approach is that we no longer be able to use the Type annotations as this will be supported only with TypeScript files.

The other mistake was that I was not including the reference to import 'prismjs/components/prism-clike';. We will get the preceding error if we don't include that file.

Uncaught TypeError: Cannot read property 'class-name' of undefined
    at eval (prism-javascript.js?416b:3)

The other approach:

As mentioned in the error, you can also create a .d.ts file and add the declare module 'prismjs/components/prism-core'. I created this file inside my components directory.

And then you can rewrite your script in the preceding way.

<script lang="ts">
import { PrismEditor } from "vue-prism-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "vue-prism-editor/dist/prismeditor.min.css";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-json";
import "prismjs/themes/prism-tomorrow.css";
import sampleData from "../assets/resume-template.json";
import { Options, Vue } from "vue-class-component";

@Options({
  components: {
    PrismEditor,
  },
  data: () => ({
    code: JSON.stringify(sampleData),
  }),
  methods: {
    submit() {
      console.log(this.code);
    },
    highlighter(code: string) {
      return highlight(code, languages.json);
    },
  },
})
export default class CodeEditor extends Vue {}
</script>

Just sharing as it might be helpful to someone else.

Answer 2

I try some ways with typescript, found that this is the easiest way

1. first

yarn add @types/prismjs

2. then

import { highlight, languages, highlightElement } from 'prismjs';

Answer 3

If anyone is struggling with this too, heres my solution:

PrismEditor.vue

<template>
  <prism-editor
    class="my-editor"
    v-model="code"
    :highlight="highlighter"
    line-numbers
    readonly
  ></prism-editor>
</template>

<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";

export default {
  components: {
    PrismEditor,
  },
  props: {
    code: {
      type: String,
      default: "console.log('default value')",
    },
    lang: {
      type: String,
      default: "js",
    },
  },
  methods: {
    highlighter() {
      return highlight(this.code, languages[this.lang]);
    },
  },
};
</script>

<style>
/* required class */
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  background: #2d2d2d;
  color: #ccc;

  /* you must provide font-family font-size line-height. Example: */
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}
</style>

CodeBlock.vue

<template>
  <prism-editor :code="code" :lang="lang"></prism-editor>
</template>

<script setup lang="ts">
import { ref } from "vue";
import PrismEditor from "../components/PrismEditor.vue";

const code = ref("console.log(It's working)");
const lang = ref("js");
</script>

<style></style>