I am currently importing alot of svg files using the normal import statement like the following.
index.vue
<script>
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
components: {
danalock,
smartlock,
light,
clicker,
battery100,
environmental,
batter25charge,
...
},
I already searching for some workarounds like making a folder in components like components/images/ and made an image.js and put all the import statement there like the following
components/images/images.js
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
danalock,
smartlock,
light,
clicker,
...
}
and tried accessing it in my vue file like the follow but can't find good results
index.vue
<script>
import { danalock, smartlock } from "~/components/images/images.js"
export default {
components: {
danalock,
smartlock,
...
}
the template of my index.vue
<template>
<smartlock />
</template>
throws the following error
Unknown custom element: <smartlock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Related
I had been using Ckeditor 4 for a long time in my React project and I didn't have any problem with it.
For adding a plugin that it provides adding video (video Html5 tag), I had to use Ckeditor 5 instead of Ckeditor 4. So I built an editor via CKEditor 5 online builder according according to this document step by step.
This is a directory of Ckeditor in my project:
The ckeditor.js (ckeditor5/src/ckeditor.js) file is:
/**
* #license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Code from '#ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight.js';
import HtmlEmbed from '#ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '#ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '#ckeditor/ckeditor5-link/src/linkimage.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '#ckeditor/ckeditor5-typing/src/texttransformation.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
BlockQuote,
Bold,
CKFinder,
CKFinderUploadAdapter,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
HtmlEmbed,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
LinkImage,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
export default Editor;
And I used the Editor in this way:
import React, { useState, FunctionComponent } from "react";
import Editor from "ckeditor5-custom-build/build/ckeditor";
import CKEditor from "#ckeditor/ckeditor5-react";
export interface CreateNewArticleProps {}
const CreateNewArticle: FunctionComponent<CreateNewArticleProps> = () => {
const [articleFormData, setArticleFormData] = useState({
articleBody: "",
});
const editorConfiguration = { toolbar: ["bold", "italic"] };
const ckeditorDataChangeHandler = (event) => {
setArticleFormData({
...articleFormData,
articleBody: event.editor.getData(),
});
};
return (
<CKEditor
editor={Editor}
config={editorConfiguration}
data={articleFormData.articleBody}
onChange={ckeditorDataChangeHandler}
/>
);
};
export default CreateNewArticle;
The editorConfiguration constant is the simplest configuration for the CKEditor component, but none of the toolbars doesn't work.
I need all toolbar that exists in the ckeditor.js (ckeditor5/src/ckeditor.js) file.
Please consider that my main goal in using Ckeditor5 is to benefit from the ability to add a video in text.
Change handler as following:
const ckeditorDataChangeHandler = (event, editor) => {
setArticleFormData({
...articleFormData,
articleBody: editor.getData(),
});
};
Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'
Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
The Error:
TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function
Modal.js:14
11 |
12 |
13 | function Modal(props) {
> 14 | return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
15 | }
16 |
17 |
The code:
import React from "react";
import ReactDOM from "react-dom";
const JSX_MODAL = (
<div className="ui dimmer modals visible active">
<div className="ui standard modal visible active">
THIS IS SOME TEXT IN THE MODAL // add some UI features here
</div>
</div>
);
function Modal(props) {
return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}
export default Modal;
Which is called up in the render function on another component using {Modal()}.
index.html (body section only):
<body>
<div id="root"></div>
<div id="modal"></div>
</body>
Dependencies:
"react": "^16.8.6
"react-dom": "^16.0.0-alpha.13",
Background:
I am trying to use React portals to render content for a modal to it's own DOM node. I was following this tutorial, which basically presents a simplified proof of concept for what is presented in the React Docs.
What I have tried:
I could only find one instance of people experiencing a similar issue, and they were able to resolve it by installing a version of React > 16.3.0. I am running React version 16.8.6.
I had this error, though it was a simple fix. I had stated:
import ReactDOM from 'react';
instead of:
import ReactDOM from 'react-dom';
Although it doesn't answer the original poster's issue, it may answer for future developers.
I found this will work and no warnings in Chrome console:
import React from 'react'
import ReactDOM from 'react-dom/client'
import PortalReactDOM from 'react-dom'
//...
class Modal extends React.Component {
//...
render() {
return PortalReactDOM.createPortal(this.props.children, this.el);
}
}
//...
const root = ReactDOM.createRoot(appRootEl);
root.render(<Parent />);
That is, use react-dom to createPortal, and use react-dom/client to creatRoot.
In my case instead of using below:
import ReactDOM from 'react-dom/client
changed to:
import ReactDOM from 'react-dom'
and working now.
I had similar problem but analyzing the problem we just have to import ReactDom from 'react-dom' itself.
import ReactDOM from 'react-dom/client'
as
import ReactDOM from 'react-dom'
this works then
I had similar problem and I use
import PortalReactDOM from 'react-dom'
instead of
`import ReactDOM from 'react-dom'`
and code looks like
const Loader = () => {
return PortalReactDOM.createPortal(
<div className="wrapper">
<div className="loader">
<img src={loaderImage} alt="Loading..." />
</div>
</div>,
document.getElementById("loader")
)
I had similar issue, what I had was
import ReactDOM from "react";
Later, I changed it to
import ReactDOM from "react-dom";
and the issue was resolved and it worked as expected.
I'm importing many FA icons:
import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt }
from '#fortawesome/free-solid-svg-icons'
library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)
How can I declare that list once and then re-use it? Would it be an array? Or an object ... of what?
I was thinking
const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}
import icons from '#fortawesome/free-solid-svg-icons'
But of course that doesn't work. And what would I do for library.add()?
What is that object-looking thing that follows import ?
One solution is to create a new module that exports your specific icons.
// icons.js
export {
faUsers,
faCut,
faBullhorn,
faPenNib,
faCircle,
faPalette,
faVolumeUp,
faSmile,
faGrin,
faShekelSign,
faTv,
faUserTie,
faFolder,
faPaintBrush,
faCircleNotch,
faSignOutAlt
} from '#fortawesome/free-solid-svg-icons';
Then you can simply import your new module and consume it using spread syntax.
// library.js
import {library} from '#fortawesome/fontawesome-svg-core'
import * as icons from './icons';
library.add(...Object.values(icons));
import and export are defined to be statically analyzable, so they cannot depend on runtime information. Therefore, it is not possible with import statement.
The object looking like thing after import is called named imports that are used to get selected items from the list of exported items. For instance, fontawesome has all the icons objects exported via a single file. Now you can use import { ... } to import only the items you need.
I have multiple images instead of importing each image in my content.js like this eg:
import myimg1 from './myimg1.png'
import myimg2 from './myimg2.png'
import myimg3 from './myimg3.png'
import myimg4 from './myimg4.png'
I have made images.js and then imported each image inside images.js and exported it so that I can access those images in content.js:
images.js:
import java from './images/java.png';
import neural from './images/neural.png';
import logo from './images/logo.png';
import dsa from './images/dsa.png';
import dl from './images/dl.jpeg';
import ds from './images/ds.jpeg';
import boy from './images/boy.jpeg';
import ml from './images/ml.jpeg';
import phone from './images/phone.png';
export default {
java,
logo,
dsa,
dl,
ds,
boy,
ml,
neural,
phone
}
In content.js:
import React, { Component } from 'react';
import images from './images';
<img src={images.java} alt="Java" height="65" width="65"></img>
<img src={images.neural} alt="Neural Network" height="65" width="65"></img>
I have made images folder which contains all images but I am not able to access the images and display it in content.js component.
See there is no class named images in your images.js, so
import images from './images'
will do nothing in content.js...So try this way
images.js
import java from './images/java.png';
import logo from './images/logo.png';
export {
java,
logo
}
content.js
import React, { Component } from 'react';
import { java, logo } from './images';
<img src={java} alt="" height="65" width="65">
<img src={logo} alt="" height="65" width="65">
the export default is just used for when there is only one import function, in your case you should do export without default
export {
java,
logo,
dsa,
dl,
ds,
boy,
ml,
neural,
phone
}
Then, in your file, you'd import all inside brackets
import { java, logo, dsa.. } from './yourFilePath'