I've just tried to use the vue-katex module https://www.npmjs.com/package/vue-katex.
I set up a simple example using vue-cli
$ vue init webpack-simple my-project
And then I added the vue-katex package, added the few lines of code to put some KaTeX mathematical stuff on the page and started my dev server. However, the mathematical notation is not displaying properly, and I'm getting a big black box displayed on my page.
Here's the relevant part of my package.json:
"dependencies": {
"vue": "^2.5.11",
"vue-katex": "^0.1.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
Here's my app code (I've tried to take the code directly from the vue-katex npm page above):
<template>
<div id="app">
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>
<img src="./assets/logo.png">
...
</div>
</template>
<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';
Vue.use(VueKatex);
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
And a screenshot of the result:
You can see the math doesn't render and I get this weird big black box. I've included the dev tools inspection to try to make it easier to diagnose.
I've tried to keep everything as simple as possible - if anyone could tell me what I'm doing wrong, I'd really appreciate it!
Many thanks in advance,
One step is missing from the vue-katex docs. If you go to the parent project, https://github.com/Khan/KaTeX you'll find that in their walk through they include a link to an external css file. You'll need to include this too:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">
Related
I work for an organization that try to migrate a project from Vue CLI 4 to Vue CLI 5.
The project uses Vuetify and we have SCSS files that are used in the styles/variables.scss file (required by Vuetify to customize style) and also used in Vue components files via #import (SCSS variables sometimes need to be in the <script> section).
Here some example that show how SCSS variables are used through the app:
// styles/variables.scss
#import "colors.scss";
$some-vuetify-sass-variable: $color // from (colors.scss)
// plugins/vuetify.js
import { primaryColor } from "#/style/colors.scss";
Vue.use(Vuetify);
const options = {
theme: {
dark: false,
themes: {
light: {
primary: primaryColor,
// ...
},
},
},
};
export default new Vuetify(options);
// Component.vue
<template>
<v-chip
:color="clearPrimaryColor"
text-color="primary"
/>
</template>
<script>
import { clearPrimaryColor } from "#/style/colors.scss";
export default {
name: "Component",
created() {
this.clearPrimaryColor = clearPrimaryColor;
}
}
</script>
<style lang="scss">
.some-class {
background-color: $clearPrimaryColor
}
</style>
During the Vue CLI migration, we also tried to upgrade some Vuetify dependencies (sass and vuetify-loader). Upgrading sass from 8 to 10 version triggers a compile sass error.
With this reproduction branch: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in-js (sass 8.0.0), the project does compile.
And for this one: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in -js/tree/error/sass-error (sass 10.0.0), it does not compile:
ERROR Failed to compile with 2 errors
error in ./src/styles/app.module.scss
Syntax Error: SassError: This file is already being loaded.
╷
2 │ #import "app.module.scss";
│ ^^^^^^^^^^^^^^^^^
╵
src/styles/variables.scss 2:9 #import
src/styles/app.module.scss 1:9 root stylesheet
Is there extra Vue CLI 5 configuration to allow CSS import in JS while using Vuetify sass override ?
We've submitted issues to vuetify-loader and Vue CLI but didn't receive any reply for now:
https://github.com/vuetifyjs/vuetify-loader/issues/234
https://github.com/vuejs/vue-cli/issues/7083
{
"devDependencies": {
"#babel/preset-env": "^7.11.0",
"#cypress/webpack-preprocessor": "^5.4.1",
"#mdi/font": "^6.5.95",
"#vue/cli-plugin-babel": "^4.4.5",
"#vue/cli-plugin-e2e-cypress": "^4.4.5",
"#vue/cli-plugin-eslint": "^4.4.5",
"#vue/cli-service": "^4.4.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.1",
"core-js": "^3.6.5",
"eslint": "^7.3.1",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-unused-imports": "^1.1.5",
"eslint-plugin-vue": "^7.0.0",
"eslint-plugin-vuetify": "^1.1.0",
"lint-staged": "^10.2.11",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-cli-plugin-vuetify": "^2.0.6",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.3",
}
}
Thank you for your time.
Components must avoid importing files that are already imported in the global variables stylesheet (src/styles/variables.scss). This was the case with app.module.scss (loaded in src/styles/variables.scss and in src/components/HelloWorld.vue), causing the error about the file being loaded twice.
One solution is to move the color definitions from app.module.scss into its own file, and import that in variables.scss instead of app.module.scss. Then, components could import app.mdoule.scss without running into the original problem.
/* src/styles/app.module.scss *
:export {
whitecolor: $white-color;
darkcolor: $dark-color;
lightcolor: $light-color;
mediumcolor: $medium-color;
alertcolor: $alert-color;
lightblackcolor: $light-black-color;
blackcolor: $black-color;
}
/* src/styles/colors.scss */
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;
/* src/styles/variables.scss */
#import "~vuetify/src/styles/settings/_colors.scss";
#import "colors.scss";
$material-light: (
background: map-get($grey, "lighten-1")
);
demo
This basically pertains to duplicate parsing of the import files, declared in your vuejs app.
There are 2 ways to solve it:
Use #use instead of #import where you are getting the Sass import error. Like, #import "app.module.scss"; becomes #use "app.module.scss";
Other alternative is to downgrade the sass-loader library to "^8.0.2"
Let me know if the above solutions work for you, meanwhile i will update my answer if i find any new solution.
I created a new vue project with the vue cli and then adjusted main.js to support web-components:
import Vue from 'vue';
import wrap from '#vue/web-component-wrapper';
import HelloWorld from "./components/HelloWorld";
const CustomElement = wrap(Vue, HelloWorld);
window.customElements.define('my-custom-element', CustomElement);
When running vue-cli-service build --target wc I get the following error:
ERROR Vue 3 support of the web component target is still under development.
I can not figure out why this error occurs and what i can do to fix it.
package.json:
...
"dependencies": {
"#vue/web-component-wrapper": "^1.2.0",
"core-js": "^3.6.5",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "^4.5.4",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
...
I use #vue/cli version 4.5.9.
Hello there is a update in this. Topic see
issue on github and comment on twitter looks like with vue 3.2.0 we have this feature back i created a small stackblitz but as you can see styles are not applied
Vue-CLI does not currently support web components for Vue 3, but you can do it by hand. This worked for me.
src/MyLib.js
export { default as TheFoo } from '#/components/TheFoo.vue';
export { default as TheBar } from '#/components/TheBar.vue';
src/MyLib-WC.js
import { defineCustomElement } from 'vue';
import TheFoo from '#/components/TheFoo.vue';
import TheBar from '#/components/TheBar.vue';
const TheFooWC = defineCustomElement(TheFoo);
const TheBarWC = defineCustomElement(TheBar);
export {
TheFooWC,
TheBarWC
};
export function register () {
customElements.define('the-foo', TheFooWC);
customElements.define('the-bar', TheBarWC);
}
package.json
{
"scripts": {
"build": "npm run build-lib && npm run build-wc",
"build-lib": "vue-cli-service build --name=MyLib --modern --dest=dist/lib --target=lib src/MyLib.js",
"build-wc": "vue-cli-service build --name=MyLib --modern --dest=dist/wc --target=lib --inline-vue src/MyLib-WC.js"
}
}
Then npm run build.
As #tony19 pointed out the solution is to not use Vue3, as it cureently does not support web components.
The problem for me was the misleading error message, as "still under developement" did not signal to me, that web components were completly unsupported. I understood it, as a "not everything will work perfectly".
I have a moderately simple example of a React Hooks widget whose function it is to provide context hooks to provide state that can set a few strings and switch the current Material UI theme. Here is the working demo. By clicking on the button labeled "NEXT THEME" you can see the page toggle between yellow and blue, along with some text changes indicating the name of the theme.
Its a contrived example, but the idea is that at the top of my site, I'm wrapping all content with context providers so that any nested widget can access shared state. Looks like this:
import React from "react";
import { AppContext } from "./AppContext";
import { ThemeContextProvider } from "./ThemeContext";
export default function App(props) {
return (
<div>
<ThemeContextProvider>
<AppContext>{props.children}</AppContext>
</ThemeContextProvider>
</div>
);
}
Everything is working as I said in the demo I've linked above. But when I publish this code to NPM and then use it in another project, it mostly works except for one import piece--the theme color will not change. All other state changes work right--all of the other state changes are textual and there are no problems, but the color will not change.
The theme is provided by Material UI, and I suspect that there is an issue with the way that I am rolling all this code up for publishing to NPM. I am using Rollup--here is rollup.config.js:
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import json from '#rollup/plugin-json';
const {terser} = require('rollup-plugin-terser');
import pkg from './package.json';
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
sourcemap: true
}
],
plugins: [
external(),
// url({ exclude: ['**/*.svg'] }),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
resolve({
preferBuiltins: true,
browser: true
}),
commonjs({
include: 'node_modules/**',
browser: true,
namedExports: {
'node_modules/react/index.js': [
'createContext',
'useContext',
'useEffect',
'useState'
],
'node_modules/react-is/index.js': [
'ForwardRef',
'Memo'
],
'node_modules/prop-types/index.js': [
'elementType'
]
}
}),
terser(),
json()
]
};
And here is my package.json:
{
"name": "#data-factory/theme-context-test",
"version": "0.0.1",
"description": "Code from CodeSandbox",
"author": "sellis42",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"publishConfig": {
"access": "public"
},
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w",
"prepare": "npm run build",
"predeploy": "cd example && npm install && npm run build"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.9.2",
"#material-ui/core": "^4.9.8",
"#material-ui/icons": "^4.9.1",
"#material-ui/styles": "^4.9.6",
"#rollup/plugin-json": "^4.0.2",
"cross-env": "^5.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "^3.4.0",
"rollup": "^1.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^4.2.4",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-terser": "^4.0.4",
"typeface-roboto": "0.0.75"
}
}
I feel as if there is something missing from my rollup configuration. This project is on my local development system and is slightly different that the linked code. I essentially have all the code that I publish in the root of the widget module, and an example folder that demonstrates how to use the widget. I use npm link so that the example widget can use it, and that is where I see the issue I'm trying to resolve. I can copy the entire root widget to a subfolder of the example src and import it from there instead of from NPM and it works again.
Any help or ideas would be appreciated. I can put all of my code to Git if anyone is interested in taking a deeper look.
I've sidestepped the issue altogether by not using a ThemeProvider in the ThemeContext. Here is what is returned by the ThemeContext hook (source abbreviated):
return (
<ThemeContext.Provider value={{theme, setTheme ... }}>
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
</ThemeContext.Provider>
);
I changed this to:
return (
<ThemeContext.Provider value={{theme, setTheme ... }}>
{props.children}
</ThemeContext.Provider>
);
It is the responsibility of children then to supply a ThemeProvider. As long as I avoid providing the ThemeProvider in my hooks I seem to be ok.
I'm not sure why this is, but I can live with it.
I am using Webpack + Vue + vue-fontawesome.
The code below works fine and display icons.
import #fortawesome/free-solid-svg-icons
But this one doesn't display icons.
import faCalendarCheck component in #fortawesome/free-regular-svg-icons
Similary, other components in #fortawesome/free-regular-svg-icons are not working.
Component do render comment line of HTML <\!---->.
Why #fortawesome/free-regular-svg-icons is not working?
main.js
// Font Awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faThLarge,
// faCalendarCheck,
faBell,
faAddressBook,
faCalculator,
faSitemap,
faEnvelope,
faWindowMaximize,
faFileAlt,
faNewspaper,
} from '#fortawesome/free-solid-svg-icons';
import {
faCalendarCheck,
} from '#fortawesome/free-regular-svg-icons';
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);
app.vue
<template>
<font-awesome-icon icon="calendar-check" />
</template>
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#fortawesome/vue-fontawesome": "^0.1.1"
}
You need to specify a prefix for using non solid icons.
In your example this should work:
<font-awesome-icon :icon="['far', 'calendar-check']" />
More info can be found here.
One more tip - Instead of writing this:
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
etc...
you can simplify it to:
library.add(faThLarge, faCalendarCheck, faBell);
I have strange problem with webview in react native.
Some pages, which are made in reactjs are not visible in webview
For example this code
<WebView
source={{uri: 'https://cassetterocks.github.io/react-infinite-scroller/demo/'}}
style={{marginTop: 20}}
/>
is working without problems and the page appears in webview and is visible in app.
But when i change it to this
<WebView
source={{uri: 'http://projects.wojtekmaj.pl/react-calendar/'}}
style={{marginTop: 20}}
/>
nothing is displayed, only white screen.
Has webview some special limitations or does somebody know reason for this behavior?
Thank you
EDIT:
After lot of attemps a realized that problem is not in react native but in react js. I found few pages in react-js based on this configuration
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2"
}
and they working without problem in webviews
but pages based on this configuration
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
are problematic.
But i don't known if the problem is in react version or webpack version :-(
FINAL EDIT:
Problem is in probably in react version, with 15.3.2 is everything ok, with 16.2.0 webview display nothing
UIWebView has all sorts of limits that have plagued hybrid developers for a decade now. I'm not aware of a comprehensive list of all the hairs it will make you pull out. It's generally a whack-a-mole exercise I'm afraid. Here's an article which will point to some of the pitfalls... http://undefinedvalue.com/beware-lure-ios-uiwebview.html
As your googling you may see references to Apple fixing these problems in WKWebView but alas this has it's own problems discussed in this React Native github issue: https://github.com/facebook/react-native/issues/321