I have the following main.js:
import Test from './components/Test.vue'
Vue.component('test', Test);
var vm = new Vue({
el: '.vue-wrap',
components: { Test },
});
window.vm = vm;
And I have the folllowing Test.vue:
<template>
<li>
Hello World
</li>
</template>
<script>
export default {
name: 'Test',
}
</script>
I build the application and I copy the content of "dist" folder in my website's "vue" folder. I have the following HTML file:
<!DOCTYPE html><html><head><meta charset=utf-8><link rel=apple-touch-icon sizes=76x76 href=static/img/apple-icon.png><link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>My App!</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet><link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet><link href=static/css/themify-icons.css rel=stylesheet><link href=/vue/static/css/app.d9b210b92ea60ad0856c8dc063cccfec.css rel=stylesheet></head><body><div class=wrapper id=app></div><script type=text/javascript src=/vue/static/js/manifest.bdf9878acc459aaa413c.js></script><script type=text/javascript src=/vue/static/js/vendor.0eae82ab4e0e2a32fd9c.js></script><script type=text/javascript src=/vue/static/js/app.aa1500d2bdd1b2f93122.js></script>
<div class="vue-wrap">
<test></test>
</div>
</body>
</html>
My package.json file:
{
"name": "vue-paper-dashboard-pro",
"version": "1.1.0",
"description": "A premium Vue.js admin dashboard for bootstrap. Coded by Cristi Jora, designed by Creative Tim.",
"author": "cristian.jora <cristian.jora#corebuild.eu>",
"private": true,
"scripts": {
"dev": "cross-env ENABLE_ESLINT=false node build/dev-server.js",
"build": "cross-env ENABLE_ESLINT=false node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"axios": "^0.18.0",
"chartist": "^0.11.0",
"easy-pie-chart": "^2.1.7",
"element-ui": "^2.0.3",
"fullcalendar": "^3.6.2",
"google-maps": "^3.2.1",
"jquery": "^3.2.1",
"jvectormap-next": "^3.0.0",
"jwt-decode": "^2.2.0",
"perfect-scrollbar": "0.7.1",
"postcss-import": "^11.1.0",
"postcss-url": "^7.3.2",
"router": "^1.3.2",
"sweetalert2": "^6.11.4",
"vee-validate": "^2.0.0-rc.21",
"vue": "^2.5.2",
"vue-axios": "^2.1.1",
"vue-beautify": "^1.1.3",
"vue-clickaway": "^2.1.0",
"vue-form-wizard": "^0.7.0",
"vue-google-autocomplete": "^1.1.0",
"vue-nav-tabs": "^0.5.4",
"vue-notifyjs": "^0.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-component": "^0.9.1",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.1.0",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-node": "^4.2.3",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"marked": "^0.3.6",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-sass": "^4.5.3",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"raw-loader": "^0.5.1",
"sass-loader": "^5.0.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"vue-test-utils": "^1.0.0-beta.3",
"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
Shouldn't VueJs populate the "test" tag directly with HTML? Because in my case all css/js files are loaded ok, if I enter "vm" in console I can see the Vue object, but still, the template part is not inserted in HTML. How can I do that? My page is empty. I want to load multiple components and they should be inserted in the component slots if these are found in HTML.
If you are using it as the root component, you can just directly use that component using render()
import Test from './components/Test.vue'
var vm = new Vue({
el: '.vue-wrap',
render: h => h(Test)
});
Can you try to add template part:
var vm = new Vue({
el: '.vue-wrap',
components: { Test },
template: '<Test/>
});
If you'd want to be able to specify components Vue is using by wrapping it in the "main" <div class="vue-wrap"> you can make use of slots.
var vm = new Vue({
el: '.vue-wrap',
template: "<slot></slot>",
components: {
/* all components injected by "slots" */
Test,
SomeComponent
},
});
... then you can inject your <test></test> component by adding it as a child of a main div.
<div class="vue-wrap">
<test></test>
<some-component></some-component>
</div>
Otherwise, if you're able to write your template inside Vue components, you should use template key/option as suggested by #latovic.
var vm = new Vue({
el: '.vue-wrap',
template: `
<test></test>
<some-component></some-component>
`,
components: { Test, SomeComponent }
});
If you're building your application, in other words, if you can use .vue files, then you can write template inside your single-file components.
UPDATE (DUE TO QUESTION UPDATES)
In your particular example, try removing Vue.component('test', Tree); asi it may cause some problems because of case in-sensitive names (this way you're creating global component test and you already imported and registered component Test).
Also, as mentioned before, if you want to pass <test></test> to your HTML and not a template, you'd need a <slot></slot>.
import Test from "/path/to/component";
var vm = new Vue({
el: '.vue-wrap',
template: "<slot></slot>",
components: {
/* all components injected by "slots" */
Test
},
});
But if your index.html is completely empty, it's an issue with your build process, which we cannot help with, as we have no information about it.
Related
I know there's Lexical-Vue that is built around Vue 3. But I want to try implementing it on Vue 2 app and it's apparently not working well.
The error says I need an appropriate loader for Lexical module but I'm not quite sure what it wants. My questions are, is the error from my Vue code or webpack? if then, what are the suggested solutions?
<template>
<div ref="editorRef"></div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import { createEditor } from 'lexical'
export default {
name: 'App',
components: {
HelloWorld
},
mounted: function () {
const config = {
namespace: 'lex'
}
const editor = createEditor(config)
editor.setRootElement(this.$refs.editorRef)
}
}
</script>
error in ./node_modules/lexical/Lexical.dev.js
Module parse failed: Unexpected token (8753:13)
You may need an appropriate loader to handle this file type.
|
| exportJSON() {
| return { ...super.exportJSON(),
| type: 'paragraph',
| version: 1
# ./node_modules/lexical/Lexical.js 8:57-84
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
{
"name": "lexical-test-vue",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"lexical": "^0.6.0",
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
i work on a new project and my vscode look like this:
Unfortunately, nothing helped at the moment.
uninstall Volar (Vue 3)
add in jsconfig.json following lines:
"allowJs": false,
"checkJs": false
In this Project we use nuxt and vuetify.
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/proxy": "^2.1.0",
"core-js": "^3.15.1",
"json-server": "^0.17.0",
"nuxt": "^2.15.7",
"vue-beautiful-chat": "^2.5.0",
"vue-tree-list": "^1.5.0",
"vuelidate": "^0.7.7",
"vuetify": "^2.5.5"
},
"devDependencies": {
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/vuetify": "^1.12.1",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"prettier": "2.5.1",
"tailwindcss": "^3.1.2"
}
This is the error message:
Hello I'm new to vue and jest. I added jest to already existing vue project.
And I want get test coverage result from .js and .vue file.
But. It dosen't go well.
When I try run
vue-cli-service test:unit
Return below Error
Failed to collect coverage from D:\work\project\src\components\service\sidebar\partials\menu.vue
ERROR: Falsy value found in plugins
Here is my config files
.babelrc
{
"presets": [
["env"], "stage-2"
],
"plugins": ["dynamic-import-node"],
"comments": true
}
jset.config.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
collectCoverage :true,
moduleFileExtensions: [
'js',
'json',
'vue'
],
transform: {
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "vue-jest",
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverageFrom: [
'**/*.{js,vue}',
'!**/plugins/**',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
package.json
{
"name": "web-application",
"version": "1.0.0",
"private": true,
"description": "web-application",
"author": "John",
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
},
"dependencies": {
...
"copy-webpack-plugin": "^4.6.0",
"dotenv": "^8.1.0",
"element-ui": "^2.10.0",
"eslint-plugin-vue": "^5.2.3",
"fs": "0.0.1-security",
"log4js": "^5.0.0",
"lottie-web": "^5.5.5",
"pm2": "^3.5.1",
"recordrtc": "^5.5.8",
"request": "^2.88.0",
"sweetalert2": "^8.13.0",
"vue": "^2.6.10",
"vue-croppie": "^1.3.13",
"vue-drag-select": "^0.1.5",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-raven": "^1.0.3",
"vue-router": "^3.1.3",
"vue-tilt.js": "^1.0.2",
"vue-toasted": "^1.1.27",
"vue2-scrollbar": "0.0.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-unit-jest": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^6.25.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^25.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-hot-loader": "^1.4.4",
"css-loader": "^1.0.1",
"es6-promise": "^4.2.8",
"eslint": "^4.19.1",
"eslint-config-prettier": "^6.5.0",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-prettier": "^3.1.1",
"file-loader": "^1.1.11",
"file-saver": "^1.3.8",
"glob": "^7.1.4",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pkg": "^4.4.0",
"postcss-loader": "^2.0.6",
"sass-loader": "^7.1.0",
"secure-web-storage": "^1.0.2",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.11.2",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.2",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"bin": {
"app": "./server.js"
},
"lint": "eslint --ext .js,.vue src",
"pkg": {
"assets": [
"dist/**/*"
]
}
}
Please tell me if you need more information. I'll add it.
Thank you for read this question.
This is self answer. Well it was silly problem.
There are three problem
preset: '#vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform option useless
removed
Jest 24 dosen't support babel 6.
it should be
babel-jest": "^23.6.0"
transform's location was wrong
it should be like
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
Now i fixed three problem. and working good.
I leave this answer because I want my shameful behavior to help others.
I have a set of components in my page like this:
BlogEntryPointComponent that contains NewBlogComponent and BlogEditComponent
both NewBlogComponent and BlogEditComponent use the following code:
import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'
export default {
components:{
ckeditor: BlogEditor.ckeditor
},
data(){
return{
editor: BlogEditor.editor,
editorConfig: BlogEditor.config
}
},
...
so now I mount BlogEntryPointComponent but the problem is that this is causing error ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated
The error page help talks about using two different builds on one page; I guess I am in this case... but those are are two different independent components; how can this be ?
So I tried building the editor from source as per what the doc recommends and I have the same problem..
the editor is the same imported file in both components.
here is the editor:
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '#ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '#ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ListPlugin from '#ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import AlignmentPlugin from '#ckeditor/ckeditor5-alignment/src/alignment';
import EmbedPlugin from '#ckeditor/ckeditor5-media-embed/src/mediaembed';
import MentionPlugin from '#ckeditor/ckeditor5-mention/src/mention';
import HighlightPlugin from '#ckeditor/ckeditor5-highlight/src/highlight'
import ClassicEditorBase from '#ckeditor/ckeditor5-editor- classic/src/classiceditor';
import CKEditor from '#ckeditor/ckeditor5-vue/dist/ckeditor.js'
export default {
ckeditor: CKEditor.component,
editor:ClassicEditorBase,
config:{
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
AlignmentPlugin,
ListPlugin,
HeadingPlugin,
BlockQuotePlugin,
AutoformatPlugin,
UploadAdapterPlugin,
EmbedPlugin,
MentionPlugin,
HighlightPlugin
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'alignment',
'link',
'bulletedList',
'numberedList',
'mediaEmbed',
'blockQuote',
'highlight',
'undo',
'redo'
]
}
}
}
package.json
{
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.4.5",
"#babel/preset-typescript": "^7.1.0",
"#babel/register": "^7.0.0",
"#ckeditor/ckeditor5-adapter-ckfinder": "^11.0.1",
"#ckeditor/ckeditor5-alignment": "^11.1.0",
"#ckeditor/ckeditor5-autoformat": "^11.0.1",
"#ckeditor/ckeditor5-basic-styles": "^11.1.0",
"#ckeditor/ckeditor5-block-quote": "^11.0.1",
"#ckeditor/ckeditor5-dev-utils": "^12.0.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"#ckeditor/ckeditor5-easy-image": "^11.0.1",
"#ckeditor/ckeditor5-editor-classic": "^12.1.0",
"#ckeditor/ckeditor5-essentials": "^11.0.1",
"#ckeditor/ckeditor5-heading": "^11.0.1",
"#ckeditor/ckeditor5-image": "^13.0.1",
"#ckeditor/ckeditor5-link": "^11.0.1",
"#ckeditor/ckeditor5-list": "^12.0.1",
"#ckeditor/ckeditor5-paragraph": "^11.0.1",
"#ckeditor/ckeditor5-theme-lark": "^13.0.1",
"#ckeditor/ckeditor5-undo": "^11.0.1",
"#types/jquery": "^3.3.22",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"imports-loader": "^0.8.0",
"jquery": "^3.3.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"select2": "^4.0.6-rc.1",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"to-string-loader": "^1.1.5",
"toastr": "^2.1.4",
"ts-loader": "^5.2.2",
"tslint": "^5.11.0",
"typescript": "^3.1.3",
"url-loader": "^1.1.2",
"vue-cool-select": "^1.6.2",
"vue-loader": "^15.6.1",
"vue-select": "2.4.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.32.2",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4",
"webpack-notifier": "^1.7.0",
"write-file-webpack-plugin": "^4.4.1"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^12.1.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^12.1.0",
"#ckeditor/ckeditor5-highlight": "^11.0.1",
"#ckeditor/ckeditor5-media-embed": "^11.1.0",
"#ckeditor/ckeditor5-mention": "^10.0.0",
"#ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"axios": "^0.19.0",
"moment": "^2.24.0",
"postcss-loader": "^3.0.0",
"pretty-checkbox-vue": "^1.1.9",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"vue": "^2.5.22",
"vue-date-pick": "^1.1.0",
"vue-router": "^3.0.2",
"vuelayers": "^0.11.4"
}
What I did is I updated all the packages related to ckeditor5 and added #ckeditor/ckeditor5-ui#latest
When I updated all the packages related to ck5editor I encounred this new multiple errors
plugincollection-plugin-name-conflict through duplicate.....
https://github.com/ckeditor/ckeditor5/issues/1505
so I deleted the node_modules and package.lock or yarn.lock and npm install again
Most probably the cause of the errors is if you have newer version of some plugins and also have older version, it will return an error since it seems you are using both the new and old version or you can't use newer version of plugins with older version of core plugins
{
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 9001 -c .storybook ",
},
"dependencies": {
...
},
"devDependencies": {
"#sambego/storybook-styles": "^1.0.0",
"#storybook/addon-actions": "^4.1.7",
"#storybook/addon-info": "^4.1.7",
"#storybook/addon-knobs": "^4.1.7",
"#storybook/addon-links": "^4.1.7",
"#storybook/addon-notes": "^4.1.7",
"#storybook/addon-viewport": "^4.1.7",
"#storybook/addons": "^4.1.7",
"#storybook/react": "^4.1.7",
"autoprefixer": "7.1.1",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react-app": "^3.0.2",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^3.2.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.6",
"react-styleguidist": "^5.5.7",
"react-svg": "^6.0.21",
"react-svg-loader": "^2.1.0",
"storybook-addon-jsx": "^6.0.0",
"storybook-readme": "^4.0.5",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^0.4.3",
"url-loader": "^0.5.8",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-middleware": "^3.5.1",
"webpack-dev-server": "^3.1.14"
},
"babel": {
"presets": [
"react-app"
]
},
}`
this is my package.json ,i use 'STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook' cmd,but it didn't work. this is storybook official website to explain the using of Environment Variables.,did i use it in the wrong way?
Storybook will not pull in env variables that do not start with STORYBOOK_
To workaround this you can do a 1:1 mapping of your existing env variables in .storybook/main as part of your configuration object.
env: (config) => ({
...config,
REACT_ENV_VARIABLE: process.env.REACT_ENV_VARIABLE,
OTHER_VARIABLE: process.env.OTHER_VARIABLE,
}),
This will allow you to use these env variables inside stories like you would inside the rest of your code through the standard process.env.REACT_ENV_VARIABLE
Related documentation https://storybook.js.org/docs/react/configure/environment-variables
this Q has been figured out.I'm using windows system,i have to input 'set STORYBOOK_THEME=red 'to set the Environment Variables,and then i can get this var by 'process.env.STORYBOOK_THEME'.
i changed the script as follow:
"scripts": {
"book": "set STORYBOOK_THEME=red&&start-storybook -p 9001 -c .storybook"
}
it works!