I'm trying to use some protocol buffer code generated with protoc for javascript. I got some javascript files that i can import (after choosing the commonjs style) into other javascript files.
I've installed an npm dependency called google-protobuf and am able to bundle all javascript with webpack. When i try to run the page in firefox i get no errors related to this, chrome however gives me:
Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
I've tried adding some additional tags to <meta> and <script> and they don't work. I've never seen an error like this and don't know where to start looking.
The end goal is, i'd like all my npm i and all my import { Foo } from 'foo.js' to work on a web page without errors.
What webpack injected using HTMLWebpackPlugin is:
<script type="text/javascript" src="frontseat.bundle.js"></script>
Originally there are no <meta> tags, i just added the one under head so it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
Try to update your regex to this regex below:
[Ö‘\-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]
And your meta tag is like this? <meta charset="utf-8"> with this charset
I got the same issue as you have.I cannot upgrade google-protobuf over than 3.6.1. Only version 3.6.1 works for me before. All versions later 3.6.1 raise the same errors in my project.
However, the <meta charset="utf-8"> helps now on my side. I create a minimum sample and hope it can give you some idea.
google-protobuf version: 3.11.2
index.js
import * as pb from 'google-protobuf';
console.log(pb);
build command
npx webpack index.js -o bundle.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bundle.js"></script>
</head>
</html>
Then, you should be able to see something like this on chrome devtools console without the error.
{Map: ƒ, Message: ƒ, BinaryReader: ƒ, BinaryWriter: ƒ, ExtensionFieldInfo: ƒ, …}
Related
I am currently working on a CNC project, I want to be able to parse DXF files into objects in JS.
I started with SVGs instead but the drawings did not export as shapes but as lines (a square as four lines and not a shape with four points). So I began to search for a JS library that would help me work with DXF files, I found "dxf-parser" and "three-dxf". I wasn't able to run an example with neither... That might be because I have a very limited experience with vanilla JS , I usually use P5.
So, in conclusion, I am searching for a working example projects of any of these libraries.
What I did by now was to write in the command line:
npm init -y
npm i dxf parser
Then I opened an html file:
<!DOCTYPE html>
<html lang="en">
<head>
</script>
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script type="module" src="index.js"></script>
</body>
</html>
And a JS file:
// Grab fileText in node.js or browser
import parse from 'dxf-parser';
const fileText = "./dxfTests/test.dxf";
try {
const dxf = parse(fileText);
}catch(err) {
console.log(err.stack);
}
Then I start click the go live button in VScode and i get this error:
127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "dxf-parser". Relative references must start with either "/", "./", or "../".
Help would be very much appreciated!
I am not completely sure if this is wrong or not, but when I generate prod build with angular:
"ng build --outputPath=.. --base-href="./path" --prod"
the static resources are still fetch from ./ root like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ask</title>
<base href="./path">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js">
</script><script type="text/javascript" src="es2015-polyfills.358ed1827c991dd2afb0.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.d1ac828f1974a06a0fe5.js"></script>
</body>
</html>
Shouldn't it be prefixed with base-href?
href="path/styles.3ff695c00d717f2d2a11.css"
src="path/runtime.a5dd35324ddfd942bef1.js
I ended up here searching for a solution where we have a fixed
<base href="/APP-NAME">
in the index file. The statement of JanS "That way the browser does the prefixing when fetching the resources" triggered me that something was wrong, because the styles.css was fetched from the url without the "/APP-NAME" added, from https://localhost:43468/styles.css instead of https://localhost:43468/APP-NAME/styles.css.
Now that I write it down it seems pretty obvious, we needed to add the slash at the end:
<base href="/APP-NAME/">
The misleading issue here was that it worked when we started our .NET Core Angular application from Visual Studio 2017, but didn't work anymore when using Visual Studio 2019. It appeared that starting the app with Visual Studio 2017 on IIS Express launches the app both on
https://localhost:43468
and
https://localhost:43468/APP-NAME
Therefore it worked to retrieve the static resources from the 'wrong' url. They seem to have fixed the issue of starting 2 ulr's in IIS Express.
The --base-href "xyz" (notice the missing =) option should generate a <base href="xyz"> in the <head> of your index.html.
That way the browser does the prefixing when fetching the resources.
You should remove the equal sign and quotes from the command.
ng build --outputPath=.. --base-href ./path --prod
I've been using Webpack for some time, but it was a little bit too extensive for me.
That's why I wanted to start off with Parcel, to get the basics of bundling projects together.
Let us say I have a basic index.html file, which has a link to a JavaScript file.
Within this javascript file, I have a couple of dependencies imports.
It should look a little bit like this.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Helloo</h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
and script.js
import "../styles/sass/main.scss";
import is from "is_js";
const myString = "Hello World";
Now, when I bundle the index.html file using
parcel bundle index.html --public-url .
i would like to use chrome developer tools console to console (from the console) some javascript as e.g. myString
But because parcel bundles everything inside one function, this variable is not accessible and the console returns:
Uncaught ReferenceError: sections is not defined
at :1:1
How can i still debug my projects inside the console using parcel as a bundle processor?
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
I have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.