Fail to import css in vue-cli

[yjl9903]

I'm trying to use pseudocode.js in a vue component.

But when I import pseudocode/build/pseudocode.min.css, vue-cli fails to build the app.

I think that maybe it losses some fonts? This is the error log.

ERROR  Failed to compile with 8 errors
These relative modules were not found:

These relative modules were not found:

* ./fonts/KaTeX_SansSerif-Bold.eot in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.ttf in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.woff in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.woff2 in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.eot in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.ttf in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.woff in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.woff2 in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css

And This is my component.

<template>
  <pre ref="pre" style="display:hidden;"><slot></slot></pre>
</template>

<script>
import pseudocode from 'pseudocode';
import 'pseudocode/build/pseudocode.min.css';

export default {
  name: 'Pseudocode',
  props: {
    lineNumber: Boolean,
    lineNumberPunc: String
  },
  mounted() {
    this.$nextTick(() => {
      pseudocode.renderElement(this.$refs.pre, {
        lineNumber: this.lineNumber,
        lineNumberPunc: this.lineNumberPunc
      });
    });
  }
}
</script>

[Ir1d]

@yjl9903 did you make it work? 😂

[yjl9903]

@yjl9903 did you make it work? 😂

Use cdn instead of importing it in node.js...

[Ir1d]

Hi @SaswatPadhi could you guide us on how to use pseudocode.js in node? it would be great to use this on server side vue/react projects ❤️

[SaswatPadhi]

Hi @Ir1d and @yjl9903, thank you for trying this project! :) Glad you found it useful. Sorry for the delayed response -- last month was super busy. I just merged the pending PRs and am on this issue right now. Will update here soon.

[SaswatPadhi]

@Ir1d I just published version 2.2.0 with a bunch of fixes and improvements. Your component above looks okay. Please try now if the build issues are resolved and let me know.

Thanks!

[Ir1d]

👍 Thanks for your work! The above component is from @yjl9903 actually.

I'm rushing a few deadlines now, and will try this new version next week (hopefully) in my React (Gatsbyjs) project.

[SaswatPadhi]

Ah, sorry! I got confused.

@yjl9903 Please give it another shot when you get a chance, and let us know if the issue is fixed. Thanks!

[yjl9903]

Ah, sorry! I got confused.

@yjl9903 Please give it another shot when you get a chance, and let us know if the issue is fixed. Thanks!

When I only use katex and pseudocode, it works well now (except a warning below).

 WARNING  Compiled with 1 warnings                                                                                            0:40:06
 warning  in ./node_modules/pseudocode/src/Renderer.js

Module not found: Error: Can't resolve 'mathjax' in 'path\to\node_modules\pseudocode\src'

But when only use mathjax and pseudocode, it seems not to render the Latex (and similar warning for katex).

[SaswatPadhi]

I see. Thanks for the quick response.

Let me debug and understand what's going on. I'm reopening this issue.

[SaswatPadhi]

Hello,

Sorry that this issue fell out of focus.

I just had a chance to investigate this. It looks like the issue was that KaTeX is a depedency, but was listed as a devDependency and so was not being installed in non-dev environments.

I fixed this in 23c0cfc, and added MathJax as an optionalDependency as well. I also tried your original snippet and confirmed that it compiles now.

Thanks again for bringing this to my attention! Please feel free to reopen if this isn't resolved to your expectation.