I have wirtten some lines in python and want to integrate them into my website. As soon as I want to use them I recieve an error-message stating that the module can't be found:
JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429,
in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py",
line 300, in run coroutine = eval(self.code, globals, locals) File "", line 1,
in ModuleNotFoundError: No module named 'theblockchainapi' )
The html is very basic:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>Document</title>
</head>
<body>
<div>
<input type="text" id = "address"> <br>
<button id="button">Verify NFT</button>
<div id="out">none</div>
</div>
</body>
</html>
<py-env>
- theblockchainapi
</py-env>
<py-script>
from theblockchainapi import SolanaAPIResource, SolanaNetwork
</py-script>
The package theblockchainapi requires the SSL module. The SSL modules, along with requests are not supported in web browsers. This is a security limitation for all browser applications and not just PyScript.
The solution will require modifying theblocckchainapi package to use supported browser APIs.
Related
I want to convert to PDF a <div> that contains images using JS libraries locally, so I use the html2canvas library to convert from .png to base64 and jsPDF 1.5.2 from here, but when I tried opening the generated PDF on Adobe Acrobat it shows me the error 110: There was an error processing a page Ther was a problem reading this document, though it opened on the web browser (Chrome and Edge).
I looked for a solution and got this. It worked fine with v1.5.3, but then I found out that latest version was v2.5.1 on jsPDf GitHub repository and wanted to use it (latest the better... I think).
So I cloned it, used jspdf.es.min.js and ran into an issue: Uncaught TypeError: Failed to resolve module specifier "#babel/runtime/helpers/typeof". Relative references must start with either "/", "./", or "../". But there was no #babel folder.
I tried installing it with node.js npm install jspdf --save and solved that error (and other with fflate) by changing the import URL and referencing those files on the HTML file.
import _typeof from './../../#babel/runtime/helpers/typeof.js';
import { zlibSync, unzlibSync } from './../../fflate/lib/index.js';
or
import _typeof from './../../#babel/runtime/helpers/typeof.js';
import { zlibSync, unzlibSync } from './../../fflate/lib/index.d.ts';
Instead of
import _typeof from '#babel/runtime/helpers/typeof';
import { zlibSync, unzlibSync } from 'fflate;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<title>pdf test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="./html2pdf/html2canvas/html2canvas.min.js"></script>
</head>
<body>
<script type="module" src="./node_modules/jspdf/dist/jspdf.es.js"></script>
<script type="" src="./node_modules/fflate/lib/index.js" ></script>
<script type="" src="./node_modules/#babel/runtime/helpers/typeof.js"></script>
<div class="button-container">
<button id="createPDF" >Generate PDF</button>
</div>
<div id="toPrint" data-page="0">
<div >
<img src= "./image.png" >
</div>
<script type="module" src="./html2pdf.js"></script>
</div>
</body>
</html>
html2pdf.js
import sizes from './sizes.json' assert {type: 'json'};
import {jsPDF} from "./node_modules/jspdf/dist/jspdf.es.js"
document.getElementById("createPDF").addEventListener("click", () =>
{
let content = document.getElementById("toPrint");
console.table(sizes)
const page = Number(content.dataset.page)
console.log(page)
let title = document.getElementsByTagName("title")[0].text
let { PDFheight, PDFwidth} = sizes[page]
PDFheight = Number(PDFheight)
PDFwidth = Number(PDFwidth)
let doc = new jsPDF()
html2canvas(content).then((canvas) => {
let base64img = canvas.toDataURL("image/png")
console.log(base64img)
doc.addImage(base64img, 'PNG', 0, 0 , PDFwidth, PDFheight)
doc.save( title + ".pdf")
})
})
Also, I tried with jspdf.es.js and jspdf.umd.js. The thing is that when I solve those, other errors start to show up like:
Uncaught SyntaxError: The requested module './node_modules/jspdf/dist/jspdf.umd.js' does not provide an export named 'jsPDF' (at html2pdf.js:2:9) (html2pdf.js is my program)
Refused to execute script from 'http://127.0.0.1:5501/node_modules/fflate/lib/index.d.ts' because its MIME type ('video/mp2t') is not executable.
Uncaught ReferenceError: module is not defined at typeof.js:11:1
Uncaught ReferenceError: exports is not defined at index.js:6:1
Uncaught SyntaxError: The requested module './../../#babel/runtime/helpers/typeof.js' does not provide an export named 'default' (at jspdf.es.js:51:8)
I've tried including the CDN from cdnjs.com without success. I'm new to using JS libraries and want to gain experience working with GitHub and node.js How can I get started with this version of jsPDF?
I have an html file where I import a JS module from chessboard.js
<html lang="en">
<head>
<link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script id="import" src="./chessboardFiles/js/chessboard-1.0.0.js"></script>
<title></title>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board2 = Chessboard("board1", "start");
</script>
</body>
</html>
The only problem is that I want to write what's in the body's <script> tag in a separate JS file then add it to this html document via <script src='...'> however the <script id="import" ...> file that is imported is not exactly a module so I cant just do import * as C from chessboard-1.0.0.js in a new JS file because I get a
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. error in the console.
So is there any way to get the variables available in the HTML document (i.e Chessboard()) available in an external JS file? How could I do this?
You could write to global window variables, or have everything in the window scope. Ex: window.board = Chessboard(...), and you can access that from different files if the script is run later than the definition.
I am just trying to have fun with JS, I am creating a small project trying to implement a new architecture that I di not use before, I was always using js in React apps, or using native JS but not creating an app with it, I was using it to create some animations and handle some changes in my pages, nothing complex).
I want to learn how to create a JS app, implementing a MVC architecture ! I am not following any tutorial, so here is my folder structure :
Here is my index.html :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
And that's my app.js :
import { loadApp } from './MVC/controllers/loadApp';
loadApp();
And that's is my loadApp.js :
const loadApp = () => {
const showUsersOption = document.createElement('button');
const showProductsOption = document.createElement('button');
showUsersOption.createTextNode('Users');
showProductsOption.createTextNode('Products');
const app = document.getElementById('root');
app.appendChild(showUsersOption);
app.appendChild(showProductsOption);
}
export default loadApp;
So I think what I am trying to do is simple, adding two buttons to the root element, But I got this :
app.js:1 Uncaught SyntaxError: Cannot use import statement outside a
module
Based on this comment to the question, I added type module in my script like that :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="app.js"></script>
</body>
</html>
But I got this :
Access to script at
'file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https.
GET file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js
net::ERR_FAILED
Based on the comments in this question here, I have to restart my editor or run npm install, but I am not using node modules or anything, my app is simpler than that.
Any idea ? Any help would be much appreciated.
I'm new to Angular JS , trying to develop little application on Calculations .
My Code is as follows"
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
</head>
<body>
<div ng-app="Calculator">
<div ng-controller="Operations">
<div>
Number 1 : <input type="number" ng-model="Number1" />
Number 2: <input type="number" ng-model="Number2" />
<p>
The addition of above two numbers is {{Number1+Number2}}
</p>
</div>
</div>
</div>
<script>
var module = angular.module('Calculator', []);
module.controller('Operations', function ($scope) {
$scope.Number1 = 1;
$scope.Number2 = 10;
});
</script>
</body>
</html>
I have the Javascripts files available in My project, When I run the app, the browser console indicates that the JS are not being loaded. Don't know why !
The Expression {{Number1+Number2}} is the same in browser . It is not executing the expression
The Browser console has following errors:
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Uncaught ReferenceError: angular is not defined
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
You are not loading angular.js and angular-route.js properly, check your paths.
Your project structure has to look like
index.html
scripts
|---angular.js
|---angular-route.js
If you use
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
Please note , you might need to disable adblocks if necessary.
Drag and drop in visual studio doesn't work if you are using HTML pages but it does work for mvc ,asp.netwebforms.
I figured this after one hour
I am beginner in JavaScript and I am trying to use rtlcss library to conver css files from ltr to rtl. I am using this code but it displays 2 errors:
Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined
My code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
(function myfunction() {
rtlcss = require('rtlcss');
var output = rtlcss.process('css/main.css');
console.log(output);
$("#result_textarea").val(output);
})();
</script>
</body>
</html>
I believe i am doing something wrong, it's not library problem.. so anyone can help?
This is a node package, as #haakym mentioned, you should be using NPM (node package manager). For more details on how to install and use NPM, follow the Getting Started guide.
If you want to use it in the browser, you can use Browserify; it lets you require('modules') in the browser by bundling up all of your dependencies.
After you have node/npm setup complete, do the following:
From the command line, run these commands to install RTLCSS and Browserify
npm install rtlcss
npm install -g browserify
Create a file with the following contents and save it as main.js :
rtlcss = require('rtlcss');
Run this command to create a browser usable bundle:
browserify main.js -o bundle.js
Include the resulting script in your page:
<script src="bundle.js"></script>
That's all, Now you'll be able to use it in the browser:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="bundle.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
$('button').click(function(){
var output = rtlcss.process($('#source_textarea').val());
$("#result_textarea").val(output);
});
</script>
</body>
</html>
Online Demo