how to use tinemce in nuxt js - vue.js

i'm trying to get an editor but i keep getting
Cannot find module '#tinymce/tinymce-vue'
this is my html and script component in which i want to display the editor
<template>
<div id="app">
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
/>
</div>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
after installing tinymce i get the error shown below
✖ Nuxt Fatal Error │
│ │
│ Error: │
│ │
│ Vue packages version mismatch: │
│ │
│ - vue#3.2.40 │
│ - vue-server-renderer#2.6.14 This may cause things to work incorrectly. Make sure to use the same version for both.
this is my package.json file, as written here tinymce is installed
{
"name": "admin",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/pwa": "^3.3.5",
"#tinymce/tinymce-vue": "^5.0.0",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"cloudinary": "^1.28.1",
"connect-multiparty": "^2.2.0",
"core-js": "^3.15.1",
"nedb": "^1.8.0",
"nuxt": "^2.15.7",
"pusher": "^5.0.1"
},
}
please how can i go about this

Related

Importing Fontawesome to VueJS

I've been trying to add Fontawesome to a Vue 3 project but it is breaking the app.
When I try to import the fontawesome nodemodules I get a network 504 failure.
In main.js
I try to import the library as follows:
/* import the fontawesome core */
import { library } from '#fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
This breaks the app and when I check the Network tab I see that my the path to these resources is set as:
http://localhost:5173/node_modules/.vite/deps/#fortawesome_free-solid-svg-icons.js?v=de8afee4
but this fails and creates a 504 Gateway Timeout
When I check in my node_modules folder I can see the #fortawesome folder it is there as expected.
I suspect it may be something to do with how .Vite is constructing the build that is wrong.
My package.json file looks like this:
{
"name": "litreach",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-brands-svg-icons": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/vue-fontawesome": "^3.0.2",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"vue": "^3.2.45"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.1.2",
"sass": "^1.56.1",
"sass-loader": "^13.2.0",
"vite": "^3.1.8"
}
}
I deleted my node_modules folder and reinstalled and rebuilt again, but the same problem persists.

Failed to mount component: template or render function not defined. found in ---> <Library Component> from library to project through npm pack

I am trying to import one of my local vue library component in vue project. Created library components and installed in project using npm install dialogue-box-0.1.0.tgz, its a local vue library not published to npm.
Below is library package.json
{
"name": "dialogue-box",
"version": "0.1.0",
"private": false,
"main": "dist/dialogue-box.common.js",
"files": ["dist/*", "types/*"],
"types": "./types/index.d.ts",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib": "vue-cli-service build --target lib --name dialogue-box './src/index.js' && npm pack",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Below is the index.js file of my library
import App from './App.vue'
import AlertComponent from './components/AlertComponent.vue';
import HelloWorld from './components/HelloWorld.vue';
export default {
App,
AlertComponent,
HelloWorld
}
Created index.d.ts stating as below
declare module "dialogue-box";
When i imported the HelloWorld Component in my actual project template and ran server getting below error.
enter image description here
Issue with not properly configured to a library.
Please use below link, have configured properly and able to integrate the local build vue library to any other vue project.Follow the Readme in git to configure in any project.
https://github.com/MohanaDevarasetty/dialogue-box.git

Yarn - Workspaces - Lerna - I fail to use the workspaces feature to add my packages

I have this folder tree:
my_project_tree
|
├── lerna.json
├── package.json
├── package-lock.json
├── packages
│ └── editor_implementation
│ ├── dist
│ ├── package.json
│ └── src
│
├── yarn-error.log
└── yarn.lock
My editor_implementation/package.json has the following content:
{
"name": "#my_project_tree/editor_implementation",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
my root folder my_project_tree/package.json has the following content:
{
"name": "hocotext",
"version": "1.0.0",
"description": "",
"main": "index.js",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^6.0.0"
},
"devDependencies": {
"lerna": "^3.4.0"
}
}
My lerna.json at root level has the following content:
{
"version": "patch",
"command": {
"publish": {
"ignoreChanges": [
"ignored-file",
"node_modules",
"*.md"
]
},
"bootstrap": {
"ignore": "component-*",
"npmClientArgs": ["--no-package-lock"]
}
},
"npmClient": "yarn",
"useWorkspaces": true,
"packages": ["packages/*"]
}
When I run from root:
yarn workspace packages/editor_implementation add °some packages°
yarn workspace packages/* add °some packages°
lerna add °some packages°
All commands fails with a message abstractable as :
Uknow package...
Package {} not found...
I can't figure out what is wrong since It seems to me I have following all the requirements, if someone has any hint, would be great.
In order to spot your workspaces, you simply have to run :
yarn workspaces info
In my case it returns:
{
"#hoco_editor/editor_implementation": {
"location": "packages/editor_implementation",
"workspaceDependencies": [],
"mismatchedWorkspaceDependencies": []
}
}
So I have run my commands with #hoco_editor/editor_implementation as following:
yarn workspace #hoco_editor/editor_implementation add °some packages°
And it works like a charm.

React native-eslint error description is unclear

I created the react-native project and was doing some experiments with style guides and plugin, I created some mistakes to check how eslint error description work. Here is some code which I wrote and put an error(a comma) in app.js file.
app.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
const App = () => (, <---------------------- this is the error(a comma)
<View style={{ flex: 1 }}>
<Text>hi</Text>
</View>
)
export default App
Following is the error screenshot:
As we can see that in the error description of the eslint, there are some "[39m 36m" embedded in between. What could be the reason for this unstructured error message? please help.
Here is some other files attached.
.eslintrc file
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "flowtype", "jsx-a11y", "import"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prefer-stateless-function": [1, { "ignorePureComponents": true }],
"react/forbid-prop-types": [0, { "forbid": [] }],
"import/extensions": [1, "never", { "svg": "always" }],
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true,
"optionalDependencies": false,
"peerDependencies": false
}
],
"semi": ["error", "never"]
},
"env": {
"jest": true
}
}
package.json
{
"name": "auth1",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint src",
"pretty":
"prettier --semi false --print-width 100 --single-quote --trailing-comma all --write \"src/**/*.js\"",
"precommit": "lint-staged && yarn test",
"flow": "flow",
"flow stop": "flow stop",
"flow status": "flow status",
"flow coverage": "flow coverage"
},
"lint-staged": {
"*.js": ["yarn pretty", "git add"]
},
"dependencies": {
"react": "16.3.0-alpha.1",
"react-native": "0.54.0"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-jest": "22.4.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react-native": "4.0.0",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"flow-bin": "0.65.0",
"husky": "^0.14.3",
"jest": "22.4.2",
"lint-staged": "^7.0.0",
"prettier": "^1.11.1",
"react-test-renderer": "16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}
Also, I installed eslint and Flow-bin, both can identifies the error(as you can see in screenshot above under problems tab), but do we need to use both and if not which one to prefer or if both have different purpose please help me understand.
Thanks in Advance.
You probably need to specify the --no-color option to eslint. Those are ANSI escape sequences, which is how color is added to the console messages. If you get the same problem in your terminal, that might also need configuring to handle ANSI, or use the CLI option to disable color.
eslint and flowtype serve different purposes. Flow will pick up certain syntax errors, but eslint will pick up more esoteric code constructs that can cause problems (assuming configured to do so).
Flow will interpret the types you specify and warn/error when you are trying to use incompatible types (in assignment, parameters, returns etc).
With color:
> eslint . "--color"
[4m/Users/xxxx/yyyy.js[24m
[2m7:13[22m [31merror[39m Parsing error: Unexpected token
[0m [90m 5 | [39m}[0m
[0m [90m 6 | [39m[0m
[0m[31m[1m>[22m[39m[90m 7 | [39m[36mfunction[39m f({[33m,[39m[0m
[0m [90m | [39m [31m[1m^[22m[39m[0m
[0m [90m 8 | [39m [90m// $FlowFixMe[39m[0m
[0m [90m 9 | [39m a [33m=[39m [35m1[39m[33m,[39m[0m
[0m [90m 10 | [39m}[33m:[39m [33mParams[39m) {[0m
[31m[1m✖ 1 problem (1 error, 0 warnings)[22m[39m
[31m[1m[22m[39m
Without color:
> eslint . "--no-color"
/Users/xxxx/yyyy.js
7:13 error Parsing error: Unexpected token
5 | }
6 |
> 7 | function f({,
| ^
8 | // $FlowFixMe
9 | a = 1,
10 | }: Params) {
✖ 1 problem (1 error, 0 warnings)
I think it is the issue with ESLINT(dbaeumer.vscode-eslint) plugin in vscode.

Angular Universal - Server rendered app not functioning as expected

I've followed several workthroughs https://youtu.be/gxCu5TEmxXE on deploying Angular Universal and am currently doing so on firebase. I've successfully got the server rendering the app, BUT for some reason the app isn't bootstrapping from the server code. What I mean to say, is that when I load the app rendered by the server, the actual app itself doesn't function correctly.
I'm not sure if this is because of incompatibility for example with Angular Material https://github.com/angular/universal#in-progress or if I've made some errors in the configuration.
For example, if I load up my homepage via the normal compiled app and navigate to a form, I see the 'expected' form. However, if I load same page via the server rendering then I see the rendered form but I cannot interact with it.
Rendered form that you cannot interact with
Expected result if you navigate through the app
It feels like I am missing a key part of in the integration to make the server side rendered HTML transition into the normal app. What am I missing to make sure that the server rendered HTML transitions and functions in the same way as the normal app?
app.server.module
import {NgModule} from '#angular/core';
import {ServerModule} from '#angular/platform-server';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';
#NgModule({
imports: [
// The AppServerModule should import your AppModule followed
// by the ServerModule from #angular/platform-server.
AppModule,
ServerModule
],
// Since the bootstrapped component is not inherited from your
// imported AppModule, it needs to be repeated here.
bootstrap: [AppComponent],
})
export class AppServerModule {}
server.ts
import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';
export let ssrapp = angularUniversal.trigger({
index: __dirname + '/browser/index.html',
main: __dirname + '/server/main.bundle',
enableProdMode: true,
browserCacheExpiry: 1200,
cdnCacheExpiry: 600
});
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssrapp"
}
]
},
"functions": {
"predeploy": "npm --prefix functions run build",
"source": "functions"
}
}
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"generate:prerender": "cd dist && node prerender",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.1.0",
"#angular/cdk": "5.0.1",
"#angular/common": "^5.1.0",
"#angular/compiler": "^5.1.0",
"#angular/core": "^5.1.0",
"#angular/flex-layout": "git+https://github.com/angular/flex-layout-builds.git",
"#angular/forms": "^5.1.0",
"#angular/http": "^5.1.0",
"#angular/material": "5.0.1",
"#angular/material-moment-adapter": "^5.0.0",
"#angular/platform-browser": "^5.1.0",
"#angular/platform-browser-dynamic": "^5.1.0",
"#angular/platform-server": "^5.2.0-beta.0",
"#angular/router": "^5.1.0",
"#angular/service-worker": "^5.1.0",
"#nguniversal/express-engine": "^5.0.0-beta.5",
"#nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"#types/moment": "^2.13.0",
"angular-ssr": "^0.10.40",
"angular2-universal": "^2.1.0-rc.1",
"body-parser": "^1.18.2",
"braintree-web": "^3.26.0",
"core-js": "^2.4.1",
"moment": "^2.20.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},