I want to use this library : https://hello-week.vercel.app/
I'm having a hard time to understand how to use it. I know JS and I never used Typescript or Nodejs. I found the .js and .css of this library but it's seems not to work
"calendar.js:1 Uncaught ReferenceError: HelloWeek is not defined"
Can I included like a normal js file ?
Yes the installation guide is not really clear, here is how to get it done:
First of all this line is simply wrong
new Hello Week({
There should not be a space there, do this instead
new HelloWeek({
Also, you will need the language file. Ether host it in its particular directory hierarchy or use the langFolder option to specify where it is.
dist
-- langs
-- -- en.json
Finally, this dose not work when not in a server due to a CORS issue. Serve the files through a server and you will have it working.
You can find the basic usage in the Installation page of the docs. Just ensure to reference hello.week.min.js, hello.week.min.css and hello.week.theme.min.css. Typescript or Node.JS don't seem to be necessary.
Here is a quick HTML + JS example:
<link href="hello.week.min.css" rel="stylesheet" />
<link href="hello.week.theme.min.css" rel="stylesheet" />
<div class="calendar"></div>
<script type="text/javascript" src="hello.week.min.js"></script>
<script>
new HelloWeek({
selector: '.calendar'
});
</script>
Related
There could be several reasons for a JavaScript "Unhandled Runtime Error" to occur. Some common causes include:
Syntax errors in the code: This can happen if there is a typo or incorrect syntax in the code.
Reference errors: This can happen if a variable or function is not defined before it is used.
Type errors: This can happen if a variable is used in a way that is not consistent with its data type.
Unhandled exceptions: This can happen if an exception is thrown and not caught by a try-catch block.
Unhandled promise rejection: This can happen if a promise is rejected and not handled with a .catch() block.
It's recommended to check the error message and the line number provided by the browser console and the code surrounding that line to understand the reason for the error.
What was my case
Reference error. What does reference error mean exactly?
Let's have a look then more details about of Reference error
A reference error in JavaScript occurs when a variable or function is used before it has been defined. This means that the JavaScript interpreter cannot find a reference to the variable or function in its current scope.
For example, if you have a line of code that uses a variable called "x" but you haven't defined "x" anywhere in your code, JavaScript will throw a reference error.
It's also possible to have a reference error if you try to access a property or method of an object that doesn't exist.
The error message associated with a reference error typically includes the name of the variable or function that caused the error, and the line number in the code where the error occurred.
For example console.log(x); where x is not defined anywhere will throw a reference error.
It's important to make sure that all variables and functions used in your code are properly defined and initialized before they are used in order to avoid reference errors.
In my project I ware using jQuery with the Nextjs app. both libraries' design patterns were not the same and for this reason, we can't use as like other js libraries(moment, date, etc.)
So, What's the way to use jQuery with the NextJs app?
Here are the details
Next.js is a JavaScript framework for building server-rendered React applications. To use jQuery with a Next.js app, you will need to include the jQuery library in your project. You can either include it as a local file or reference it from a Content Delivery Network (CDN).
Here is an example of how to include jQuery in your Next.js app using a CDN:
In your JSX file, add the following script tag to include the jQuery library:
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
In your JavaScript code, you can now use jQuery as you normally would. Alternatively, you can use npm package manager to install jQuery and import it in your .js file as:
npm install jquery
then in your .js file:
import $ from 'jquery'
If those solution doesn't solve your problem(Unhandled Runtime Errorre: Referenceerror $ is not defined), there is another method
Use Script from 'next/script'
import Script from 'next/script';
And now have a look at where we wrongly setup "next/script"
## strategy
<Script strategy="lazyOnload" src="./assets/js/jquery.min.js" />
<Script strategy="lazyOnload" src="./assets/js/popper.min.js" />
<Script strategy="lazyOnload" src="./assets/js/bootstrap.min.js" />
<Script strategy="lazyOnload" src="./assets/js/jquery.sticky-sidebar.min.js" />
<Script strategy="lazyOnload" src="./assets/js/slick.min.js" />
<Script strategy="lazyOnload" src="./assets/js/custom.js" />
Try to understand the meaning of "strategy" and use exactly what you need.
Next Script has a total of four strategies
"lazyOnload" | "afterInteractive" | "beforeInteractive" | "worker"
The default setup is afterInteractive but when we have to use "lazyOnload", "beforeInteractive" and "worker"?
At this point I also did the mistake.
but the solution is very simpler
https://nextjs.org/docs/basic-features/script
You can have a look at both Script setups and try to match what's the difference between them.
## strategy
<Script strategy="beforeInteractive" src="./assets/js/jquery.min.js" />
<Script strategy="beforeInteractive" src="./assets/js/popper.min.js" />
<Script strategy="beforeInteractive" src="./assets/js/bootstrap.min.js" />
<Script strategy="beforeInteractive" src="./assets/js/jquery.sticky-sidebar.min.js" />
<Script strategy="beforeInteractive" src="./assets/js/slick.min.js" />
<Script strategy="lazyOnload" src="./assets/js/custom.js" />
#Wish you, Hope your issue will fix...
At the moment, the files setup looks like this:
File Setup
in the merkur.html file I use this to go to the JS files:
<script src="../scripts/ui.js"></script>
<script src="../scripts/index.js"></script>
The JS is only working on the index.html, in the merkur.html I get the error: Error Message
Can somebody help me?
In your index.html file, keep the links to your JavaScript files as bellow.
<script src="scripts/ui.js"></script>
<script src="scripts/index.js"></script>
In your merkur.html file, keep the links to your JavaScript files as bellow.
<script src="../scripts/ui.js"></script>
<script src="../scripts/index.js"></script>
If you are still getting errors, you may have do something wrong in your JavaScript codes. Maybe you are trying to search for an HTML element which doesn't exist in your relevant HTML code.
Thanks and best regards!
You can use js files in any html document. The only one problem here is a path you wrote for merkur.html file.
So just read how to deal with path to files. Especially ../ & ./
Do web components really isolate dependencies inside each component?
I've imported two components in the same page and I get the following error:
Uncaught TypeError: JSON.stringify is not a function
Each of the components works fine when is alone in the page. Any ideas of how to fix this?
Thank you.
It does not isolate dependencies, and it does not run in a sandboxed JavaScript. However, you can use Web Component imports to make sure your dependencies are downloaded and run only once:
1) Add the import to each of your Web Components html:
<link rel="import" href="dependencies.html" />
2) Then dependencies.html should contain any scripts you need to be run only once:
<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
....
The browser will download dependencies.html only once on a page, and run it only once. It will simply ignore the other imports of this same file after the first time.
More info here:
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
Update, if you have different dependencies for each webcomponent:
1) Add all the needed imports to each of your Web Components html:
<link rel="import" href="import-mootools-1.2-core-nc.html" />
<link rel="import" href="import-mootools-1.2-more.html" />
2) Then the import files should contain each one a single script you need to be run only once:
File import-mootools-1.2-core-nc.html contains only this line:
<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
File import-mootools-1.2-more.html contains only this line:
<script type="text/javascript" src="mootools-1.2-more.js"></script>
Note: If after that you still have problems, then it's not because you are including the dependencies more than once. See the Network tab at your console, and you will see it's downloaded only once. You probably have other issues there.
No, Web Components won't isolate external dependencies in general, if they deal with global objects or global context.
Your problem is that you are importing (at least) one library twice, and that library won't allow it.
Nothing related to Web Components anyway.
Update: also the polyfill webcomponents.js should not be imported twice.
I would like to have a React Bootstrap JavaScript file in my markup, and then use Bootstrap components from Clojurescript. I understand this simple approach (not using a cljs library) should be possible. However I am stuck at the beginning with a problem even loading the static html page.
The body section of the page looks like this:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
<script src="/js/devcards.js" type="text/javascript"></script>
</body>
The react-bootstrap.min.js file is being loaded/executed and returning this error in the browser console:
Navigated to http://localhost:3449/cards.html
Uncaught TypeError: Cannot read property 'createClass' of undefined
PanelGroup.js:7
bootstrap 35d834203e0f472d9612:19
react-bootstrap.min.js:7481
Am I going about this the wrong way?
There is a bootstrap project that uses Om.
https://github.com/racehub/om-bootstrap
Hopefully there will be a better answer than this very direct one. I discovered including all the files recommended here gets me past that particular error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
But is this really the best way to go about it with ClojureScript? No! React is normally already included (via Reagent or Om) as part of a ClojureScript development stack. Seems like I'm discovering why it is best to stick with libraries for Bootstrap.
oHi guys, on page load i see this error in console:
"Uncaught ReferenceError: _ is not defined"
i have this code in head:
<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Typeahead -->
<script src="js/typeahead/typeahead.js"></script>
I have no idea whats happening, and i cannot google anything about this kind of typeahead.js problem.
I will appreciate any help.
Thanks
Where did you get your tipeahead script? Looks like it relies on Underscore.js or Lo-Dash
We need more information anyway (stacktrace, how you load the typeahead script, and its content).
I got this error when I was referencing typeahead.bundle.js from the /src/ (source) folder of the bower package instead of the /dist/ (distribution) folder by mistake.
By pointing at the /dist/typeahead.bundle.js instead it works fine without the need to add Underscore.js or Lo-Dash manually.
If you look here you'll see the instructions for installing this library. The _ that it's missing is defined in bloodhound.js. You can see where it is defined in this file around line 6.
Try adding that link before your typeahead script and see if that fixes the problem.
This all may be included with the typeahead script you're loading, which would make my answer wrong, but try it out and see if that fixes it.
Edit: here is the definitions of _ in the github repo