I'm trying to use Tooltip with Svelte and SvelteStrap and need a hand :)
Minimal working example is:
<script>
import {
Button,
Tooltip,
} from 'sveltestrap';
</script>
<Button id="btntest">test</Button>
<Tooltip target="btntest" placement="top" />
After hovering the button, it shows a tooltip (not exactly properly aligned) and immediatelly throws an error:
Uncaught (in promise) ReferenceError: process is not defined
at Object.setOptions (createPopper.js:80)
at createPopper (createPopper.js:214)
at Object.$$self.$$.update (Tooltip.svelte:29)
at update (index.mjs:760)
at flush (index.mjs:732)
Package.json:
"devDependencies": {
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.37.0"
},
"dependencies": {
"sirv-cli": "^1.0.0",
"sveltestrap": "^3.14.0"
}
What shall I do to make this work? :)
It seems there was an issue in Sveltestrap itself. Reported and solved here:
GitHub issue
Now this works as intended.
Related
I'm running into some major compatibility issues it seems. I am getting this error when I am directed to a page with a map that is meant for the user to draw a radius using react-leaflet-draw. Here is the error:
Here is the code that is the source of the problem:
<Map
className="map-container"
center={CENTER}
zoom={DEFAULT_ZOOM}
maxZoom={MAX_ZOOM}
ref={mapContainer}
>
<div className="vignette"></div>
<Marker position={CENTER} />
<FeatureGroup>
<EditControl
onCreated={_onCreated}
onDeleted={_onDeleted}
draw={{
polyline: false,
polygon: false,
rectangle: false,
marker: false,
circlemarker: false
}}
edit={{
edit: false
}}
/>
{
sessionStorage.getItem("coverageCoordinates") &&
<Circle
center={JSON.parse(sessionStorage.getItem("coverageCoordinates"))}
color="#00FFFF"
opacity="0.4"
radius={radius * MILES_TO_METERS}
/>
}
</FeatureGroup>
The reason I know the issue lies there is because when I comment out the EditControl component, the error disappears. I have also tried using different versions of each package to test if the issue was compatibility but the versions that I tried didn't work. Here is a small part of my package.json to show which versions.
"leaflet": "^1.3.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-leaflet": "^2.0.0",
"react-leaflet-draw": "^0.19.7",
"react-leaflet-geosearch": "^0.3.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"leaflet-draw": "^1.0.3",
"leaflet-geosearch": "^3.2.1",
I have tried using leaflet v4 paired with react v18, leaflet v2 with react v18, leaflet v2 with react v17, and leaflet v4 with react v17. The only way for the error message to go away is if I remove the EditControl component but it's needed for this web app. Any insight would be much appreciated.
I have a navbar component that simply just displays a logo. It works just fine in a dev environment and when a build the production version and view it locally too. Once it is uploaded to Netlify tho is when the image goes missing randomly. I do have another image that is being used in the same public folder in css for a bg-image and it works fine.
Below is the component that is the navbar and a link to the site to view the issue.
import Navbar from 'react-bootstrap/Navbar';
import Image from 'next/image'
import styles from './navbar.module.css';
import logo from '../../public/logo.jpg';
export default function NavigationBar() {
return(
<>
<Navbar className={styles.navbarContainer}>
<Navbar.Brand href="#home">
<Image
src={logo}
className={styles.logo}
alt="Rumba 405 logo"
width="75"
height="75"
/>
</Navbar.Brand>
</Navbar>
</>
)
}
I might add that I am using React-Bootstrap too tho I doubt that matters.
Here is the link to the current live site: https://rumba405.netlify.app/
When I opened your image reference, it resolves to
https://rumba405.netlify.app/_ipx/w_96,q_75/%2F_next%2Fstatic%2Fmedia%2Flogo.3aab2839.jpg?url=%2F_next%2Fstatic%2Fmedia%2Flogo.3aab2839.jpg&w=96&q=75
Which then complains of this error
{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module 'ipx'\nRequire stack:\n- /var/task/node_modules/#netlify/ipx/dist/index.js\n- /var/task/.netlify/functions-internal/_ipx/_ipx.js\n- /var/task/_ipx.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","trace":["Runtime.ImportModuleError: Error: Cannot find module 'ipx'","Require stack:","- /var/task/node_modules/#netlify/ipx/dist/index.js","- /var/task/.netlify/functions-internal/_ipx/_ipx.js","- /var/task/_ipx.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at _loadUserApp (/var/runtime/UserFunction.js:202:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"," at Object.<anonymous> (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"," at internal/main/run_main_module.js:17:47"]}
You can try adding ipx as a dependency to your project so it resolves it
Netlify itself notes that they are trying to optimize images on top of next/image
Others are complaining as well .
I'm trying to create a tree structure view from a json model using SAPUI5.
I haven't found solutions on the internet so this is why I'm asking here.
Basically, despite having used the right code over and over again, It fails to load the TreeTable.js file, I have tried using multiple codes but no luck.
I am loading the TreeTable on a Dialog. This is the code:
<core:FragmentDefinition
xmlns="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
xmlns:u="sap.ui.unified"
xmlns:core="sap.ui.core">
<m:Dialog horizontalScrolling="true" showHeader="true" state="None" stretch="false" title="{Soluzione}" type="Standard" verticalScrolling="true" contentWidth="90%">
<m:content>
<TreeTable
id="Tree"
rows="{path: 'applicationModel>/AlberoSoluzioni'}"
selectionMode="MultiToggle"
enableSelectAll="false"
ariaLabelledBy="title">
</TreeTable>
</m:content>
<customHeader/>
<endButton/>
<subHeader/>
</m:Dialog>
</core:FragmentDefinition>
Wondering what I'm doing wrong.
Error in console at loading:
Uncaught Error: failed to load 'sap/ui/table/TreeTable.js' from resources/sap/ui/table/TreeTable.js: 404 - Not Found
You need to add its dependencies in the manifest.json please check if you did so.
"sap.ui5": {
"dependencies": {
"libs": {
"sap.ui.table": {}
}
}
Also, check src in the bootstrap script in index.html
I am busy moving my components from our projects into a component library for ease of use and maintainability purposes.
I am using this Vue/Nuxt Library template following the structure and processes outlined.
Currently I only have 2 components in there a TestButton.vue and a LoaderModal.vue .
The test button works fine when imported/called from an application when it sits in the library as it shows as expected and looks like it should as it is actually a mdb button (which I just used to test component imports). (we use MDB as our main component lib
The problem is with the Loading Modal. Normally you would set the show property of the modal to show or hide it like so.
<template>
<mdb-modal centered :show="showLoader">
<mdb-modal-body class="text-center">
<div class="d-flex justify-content-center" v-if="selectedLoader==='BALL'">
<div class="spinner-grow" role="status" style="color: #005250; width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<h3 class="block" style="margin-top:16px" v-if="longLoadingText!=null">{{ longLoadingText }}</h3>
<h3 class="block" style="margin-top:16px" v-else>{{ text }}</h3>
</mdb-modal-body>
</mdb-modal>
</template>
using props to show,hide and control text like so
props: {
showLoader: { default: true, type: Boolean },
text: { default: "Loading", type: String },
},
and it works fine if I run it in the component library itself using
vue serve ./src/components/LoaderModal
but when I set the showLoader prop to true from the application that imports the library it does not show. I can see the modal is in the DOM but the display is set to none.
There are no errors in the console and if I change the Display to "block" the LoadingModal Shows.
Here is the html copied from the DOM that shows it is there, but display is just set to "none"
<div data-v-bfb6b926="" data-v-6a672d6c="" class="modal" style="opacity: 1;">
<div data-v-bfb6b926="" role="document" class="modal-dialog modal-dialog-centered" style="transform: translate(0px, 0px);">
<div data-v-bfb6b926="" class="modal-content">
<div data-v-c35b1502="" data-v-6a672d6c="" class="text-center modal-body">
<div data-v-6a672d6c="" data-v-c35b1502="" class="d-flex justify-content-center">
<div data-v-6a672d6c="" data-v-c35b1502="" role="status" class="spinner-grow" style="color: rgb(0, 82, 80); width: 3rem; height: 3rem;"><span data-v-6a672d6c="" data-v-c35b1502="" class="sr-only">Loading...</span></div>
</div>
<!---->
<!---->
<h3 data-v-6a672d6c="" data-v-c35b1502="" class="block" style="margin-top: 16px;">Loading some stuff</h3>
</div>
</div>
</div>
</div>
My Library Package.json looks as follow
{
"name": "#myScope/web-commons",
"version": "0.1.23",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report --target lib --name web-commons ./src/index.js",
"lint": "vue-cli-service lint",
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
},
"main": "dist/web-commons.common.js",
"files": [
"src",
"assets",https://stackoverflow.com/posts/63504989/edit#
"dist/*.{js,css}"
],
"dependencies": {
"mdbvue": "^6.7.1",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/babel-preset-app": "^4.4.6",
"#vue/cli-plugin-babel": "^4.4.6",
"#vue/cli-plugin-eslint": "^4.4.6",
"#vue/cli-service": "^4.4.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.3.1",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"vuepress": "^1.5.2"
}
}
and the plugin looks as follows in my main project.
import Vue from 'vue'
import * as componets from '#myScope/web-commons'
Vue.use(componets)
Then it is also added to the nuxt.config as a plugin.
Please help
EDIT
Below is the value of the props from the vue dev panel
Update
The following is the link to the codesandbox project for the component library. The library is also on Npm. Try using the LoaderModal Component in any nuxt project to see problem.
Code Sandbox Component Library
Component Implementation Example Nuxt js
I see your codesandbox. There is a small mistake using the props in your code for LoaderModal component. If you use a value directly for the props you don't need to bind (:text) it. So you can use the component as below.
<LoaderModal :showLoader="true" text="Some Loading Text"/>
if you use a data element as a props then bind it:
<LoaderModal :showLoader="true" :text="variableName"/>
Here is the working demo of your codesandbox
The actual problem seem to have been that all the required css components of the mdblibrary was not being import despite being imported in the index of the component library.
It seems that when adding a plugin to nuxt it calls the install method and nothing else. The solution was to import the css into the component itself and making it "scoped" otherwise it will affect the components in the main application.
<style
scoped
>
#import "../../node_modules/mdbvue/lib/css/mdb.min.css";
</style>
I am trying to implement a datepicker whose button upon being clicked displays a calendar. For this purpose, I have wrapped datepicker() (JavaScript function) in pickDate() (user defined TypeScript function) but the button is not clicking/displaying anything. What could be going wrong?
Below are my code snippets
HTML file
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon" (click)="pickDate()">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
.ts file
import {Component} from '#angular/core';
import * as $ from 'jquery';
#Component({
selector : 'pm-datepicker', /** This is a directive which implies this Component's template can be
used as any other Component's template. */
templateUrl : './datepicker.component.html' /** Path to our HTML file */
})
export class DatePickerComponent {
pickDate() {
console.log(5); /** To check if something is logging */
$('#datetimepicker1').datepicker();
}
}
Errors on console
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).datepicker is not a function
at DatePickerComponent.webpackJsonp.../../../../../src/app/datepicker/datepicker.component.ts.DatePickerComponent.pickDate (datepicker.component.ts:18)
at Object.eval [as handleEvent] (DatePickerComponent.html:21)
at handleEvent (core.es5.js:11998)
at callWithDebugContext (core.es5.js:13467)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
at dispatchEvent (core.es5.js:8614)
at core.es5.js:9228
at HTMLSpanElement.<anonymous> (platform-browser.es5.js:2648)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
Edit 2
I carried out the following steps :
npm install jquery-ui --save
and then I included the script URLs with respect to jQuery and jQuery-ui in index.html but the errors still persist. Is there anything specifically I need to import in my component.ts or app.module.ts?
Issue might be
If there is any other library using $ variable
may be missing some files from jQuery
If nothing works then include datepicker.js also
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.js"></script>
Looks like you're going to need to include $.datepicker to get that function. Since it seems you're using webpack, this should be a simple
npm install jquery-ui to get the whole jquery-ui package or npm install jquery-datepicker to just get the datepicker module.
You'll also need to include this in your source before you use it (or add it as an entry point to webpack).