I want to use a vue3 datepicker component. However, I can't seem to get it started.
After installing datepicker using npm -i vue3-datepicker, I entered the supplied code into a local html file:
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const picked = ref(new Date())
</script>
<template>
<datepicker v-model="picked" />
</template>
I saved and opened the file, but the code doesn't seem to do anything.
The example code doesn't even have an input element to connect the calendar to.
The error from the Chrome console is
Uncaught SyntaxError: Cannot use import statement outside a module
How can I get a datepicker up and running? What am I missing? Can someone help with a more complete example (totally working code?)
Related
So I'm just working with an ecom website with products.
So I created a product list row which will show all of the product and then if the user clicks any of the products it will redirect to the product page which will fetch the specific product information from an api endpoint create in the project (sveltekit) and then I fetch in the +page.ts file of mine and then I export the data as the code below and then I extract the info out. So when I use an image I just put the products.src to it. The products.src looks like this "$lib/assets/images/phone1.svg" but the it log out the error is says
Not found: /products/$lib/assets/images/phone2.svg
I just wanna know where does the /products/ came from when the products.src is "$lib/assets/images/phone1.svg" which I have checked by console it out already
<script>
// Get data
export let data;
const { products } = data;
</script>
<section class="product-page">
<div class="product-image">
<img src={products.src}>
</div>
</section>
I just wanna expect the answer for it plssss.
$lib is an alias for a directory that can only be used statically e.g. in import statements not as part of a dynamic source string.
You can put static asset files in the static directory at the root of the project and reference them directly, e.g. for the file:
/static/images/img.svg
The src path would be
/images/img.svg
Assets that are not in static have to imported or referenced in CSS so they are included in the build. E.g.
<script>
import img from '$lib/images/img.svg';
</script>
<img src={img} />
In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
I'm running a Playwright script on a Jenkins page that has input elements. When I try to fill one of the inputs with text, it fails with this error:
(node:3337) UnhandledPromiseRejectionWarning: page.fill: Protocol error (Page.insertText): error in channel "content::page": exception while running method "insertText" in namespace "page": Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsITextInputProcessor.commitCompositionWith] _insertText#chrome://juggler/content/content/PageAgent.js:891:32
I've tried running with DEBUG=pw:api environment enabled but the logs there aren't too helpful. From the normal console log I get the following log:
waiting for selector "input[name="_.buildNumber"]"
selector resolved to visible <input value="" type="text" name="_.buildNumber" class=…/>
elementHandle.fill("54")
waiting for element to be visible, enabled and editable
element is visible, enabled and editable
So it seems like the element exists and can be edited but for some reason Playwright is unsuccessful at trying to fill it. What am I missing here?
This is a Playwright bug that is specific to Firefox. To get around it for now, you should be able to switch to using either Chrome or Safari in your import statement. So either:
import { chromium } from 'playwright';
Or using Safari:
import { webkit } from 'playwright';
Scenario
The index page uses "getInitialProps" to load data. Then we create a dialog which can create a new data. After creating a new data, the current page should be reloaded.
Problem
We use Router.replace('/') to reload the page. But it triggers a server-side rendering.
Question
What we need is a client-side reload. The "getInitialProps" function should be called in the browser. So, how to do the client-side reload?
Assume, a user is on the
http://www.example.com/profile
the user has edited the profile and for some reason, you need to reload the same page.
If your case is similar to this, you could use Router.reload();
Remember, you must import Router object like this import Router from "next/router";
For more information: https://nextjs.org/docs/api-reference/next/router#routerreload
A better option is to use router.replace(router.asPath)
replace does not create a new history item so Back button works as expected
Details explained in this article
https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/
Didn't see an answer that was really what I was looking for,
this worked for me:
import Router from 'next/router'
Router.reload(window.location.pathname);
as of of NextJs 13 Being released the new router Object has the refresh() method, which allows you to refresh ( re-fetch ) the data client-side only without having to do a full page reload.
it can be used like the following :
import { useRouter } from "next/navigation";
export default function Component(){
const router = useRouter();
//this will reload the page without doing SSR
router.refresh();
}
Please keep in mind that this is feature of NextJs 13 Which is currently in beta.
check the beta docs here
credits to fireship for showing the feature
https://www.youtube.com/watch?v=__mSgDEOyv8
Running the following code
pages/index.js
import Router from 'next/router';
function Index({ isServer }) {
console.log('render', new Date());
return (
<div>
<h1>Home page. Is it on server? - {isServer ? 'Yes' : 'No'}</h1>
<button type="button" onClick={() => Router.push('/')}>
Reload me
</button>
</div>
);
}
Index.getInitialProps = async ({ req }) => {
return { isServer: !!req };
};
export default Index;
I can see that it console.logs render only once on the server even after clicking "Reload me". I can see that isServer equals to false after "reload" as well.
How do you exactly reload the page so you see it is rendered on server side?
PS
Here are screenshots:
initial load
after clicking reload
It may help someone, If you are using nextjs Link its actually preloades page if you need default reload you need to use a tag not a Link
I'm attempting to put my first full-stack application together and am getting an unexpected syntax error:
"Uncaught SyntaxError: Unexpected token {"
The error is coming from this line of code in my map.js file:
import {userInput} from './algorithm/searchingAlgorithm.js';
ejs file:
<head>
<script type="text/javascript" src="../javascripts/map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCx0LvEwPUgGhpLjCErr24dOnk-VWjo83g&callback=initMap">
</script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
from './algorithm/searchingAlgorithm.js':
export default async function userInput(origin, destination){
I've done a lot of searching and have yet to come up with an answer. I'm using node.js/express and express generator, javascript. I'm also utilizing the google maps api.
The import and export statements are used frequently in web development, but they do not currently work automatically in a browser because they are newer features in the JavaScript language. You need to "build" the code into a format that the browser can execute. Example code on the web tends to assume that you are already doing this.
There are different tools that allow you to do this, such as Rollup or Webpack.
Heads up for anyone running into this issue like I was.
TLDR; make sure to run the import statement from GLOBAL SCOPE.
I ended up trying to insert my first import {test_exported_function} from "./test.js";
from inside of my main function which waits for the DOM content to load before running all of my scripts.
Didn't realize that I needed to execute that line from global scope of the script.
Once I realized that, it suddenly hit me how dumb I was for trying to import from a function scope.
(ﾉ≧ڡ≦) Teehee~!