pdfMake in deno from a CDN - cdn

I want to use pdfMake in deno and not host the pdfMake files and vfs_fonts on my server, by using a CDN line CDNJS or esm.sh.
I have the following code in the to of my app.js file:
import pdfMake from "https://esm.sh/pdfmake"
import * as pdfFonts from "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.min.js"
but I get the following errors:
[!] [#0] starting `deno run -A app.js`
Download https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js
Download https://deno.land/x/md5/mod.ts
error: Uncaught TypeError: Cannot read properties of undefined (reading 'pdfMake')
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
^
at https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js:1:21
[E] [daem] app crashed - waiting for file changes before starting ...
I am not sure how to import or load the vfs_fonts from the CDN. Please note that my aim is to use a CDN for getting pdfMake and it's fonts.

I've changed the app.js file so that I only load the pdfmake from the CDN. I then load the fonts seperatly from the CDN into the pdfMake object:
import pdfMake from "https://esm.sh/pdfmake"
pdfMake.fonts = {
Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
},
Merriweather: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-MediumItalic.ttf'
},
}

Related

nx adds dist/packages to my paths mappings

Question: Why does TypeScript/Nx add dist/packages to my path mappings?
I'm converting my polyrepo project to nx monorepo. In my polyrepo, I have a repo mpg-common with src folder, and all other repos import from it: import { Bla } from 'mpg-common/lib/services/.... I want to preserve this import syntax when moving to monorepo, so in tsconfig.base.json I put compilerOptions: { "paths": { "mpg-common/lib/*": ["packages/mpg-common/src/*"]
However, these imports fail. To debug I set "traceResolution": true, and then I see:
Module name 'mpg-common/lib/inversify.config', matched pattern 'mpg-common/lib/*'.
Trying substitution 'dist/packages/mpg-common/lib/*', candidate module location: 'dist/packages/mpg-common/lib/inversify.config'.
So, question: Why does TypeScript/Nx add these dist/packages to my path mappings?
Turns out my package.json had "name": "mpg-common", which caused nx to auto-map mpg-common => dist/packages/mpg-common, which is taken from packages/mpg-common/project.json => targets/build/options/outputPath.
So, solution: change in package.json to "name": "#myworkspace/mpg-common"

A module requiring 'fs' does not work inside storybook, but does work in-browser

I've got a basic create-react-app setup. A part of the CRA application is a lexer and a parser generated by antlr4ts.
In-browser, everything runs fine.
However, Storybook (installed via npx sb init) refuses to build, throwing:
ERROR in ./node_modules/antlr4ts/misc/InterpreterDataReader.js
Module not found: Error: Can't resolve 'fs' in '/home/rijndael/projects/antlr-truth-table-generator/node_modules/antlr4ts/misc'
# ./node_modules/antlr4ts/misc/InterpreterDataReader.js 16:11-24
# ./node_modules/antlr4ts/misc/index.js
# ./src/antlr/index.ts
# ./src/store/slices/tables/index.ts
# ./src/components/TruthTable/index.tsx
# ./src/components/TruthTable/stories/index.stories.tsx
# ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)stories\/(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
# ./.storybook/generated-stories-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Indeed, a module I'm requiring has import { Interval } from "antlr4ts/misc";.
However, antlr4ts/misc/index.js doesn't seem to require InterpreterDataReader. Perhaps one of its children does, however why it's then not listed in the require stack trace?
antlr4ts/misc/index.js
__export(require("./ANTLRInputStream"));
__export(require("./BailErrorStrategy"));
__export(require("./BufferedTokenStream"));
__export(require("./CharStreams"));
__export(require("./CodePointBuffer"));
__export(require("./CodePointCharStream"));
__export(require("./CommonToken"));
__export(require("./CommonTokenFactory"));
__export(require("./CommonTokenStream"));
__export(require("./ConsoleErrorListener"));
__export(require("./DefaultErrorStrategy"));
__export(require("./Dependents"));
__export(require("./DiagnosticErrorListener"));
__export(require("./FailedPredicateException"));
__export(require("./InputMismatchException"));
__export(require("./InterpreterRuleContext"));
__export(require("./IntStream"));
__export(require("./Lexer"));
__export(require("./LexerInterpreter"));
__export(require("./LexerNoViableAltException"));
__export(require("./ListTokenSource"));
__export(require("./NoViableAltException"));
__export(require("./Parser"));
__export(require("./ParserInterpreter"));
__export(require("./ParserRuleContext"));
__export(require("./ProxyErrorListener"));
__export(require("./ProxyParserErrorListener"));
__export(require("./RecognitionException"));
__export(require("./Recognizer"));
__export(require("./RuleContext"));
__export(require("./RuleContextWithAltNum"));
__export(require("./RuleDependency"));
__export(require("./RuleVersion"));
__export(require("./Token"));
__export(require("./TokenStreamRewriter"));
__export(require("./VocabularyImpl"));
Inside InterpreterDataReader.js we indeed do have a const fs = require("fs");. However, it's no less weird, as everything does run when built by react-scripts.
How do I make it run inside Storybook as well?
Why does it run when built by react-scripts, but not inside Storybook?
.storybook/main.js:
module.exports = {
"stories": [
"../src/**/stories/*.stories.mdx",
"../src/**/stories/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
]
}
Update
I fixed it by importing directly import { Interval } from "antlr4ts/misc/Interval";, thus omitting the giant require block in antlr4ts/misc/index.js. However, I'm no less interested in why it runs inside the browser, but not in Storybook.

cx_freeze include css file and image in dash app

I have some difficulties to apply a css file to my dash app when using cx_freeze. If I run python app.py the layout is properly applied, however not if I am executing the .exe generated by cx_freeze. Then the default html layout is displayed. The css and the image appear in the same directory where the .exe is located.
This is how my setup.py looks like.
from setuptools import find_packages
from cx_Freeze import setup, Executable
options = {
'build_exe': {
'includes': [
'cx_Logging', 'idna', 'idna.idnadata'
],
'packages': [
'asyncio', 'flask', 'jinja2', 'dash', 'plotly', 'waitress'
],
'excludes': ['tkinter'],
'include_files': [
'assets/logo.jpg', 'assets/style.css'
],
}
}
executables = [
Executable('server.py',
base='console',
targetName='dash_app.exe')
]
setup(
name='BI_Report',
packages=find_packages(),
version='0.0.1',
description='rig',
executables=executables,
options=options
)
To load the external files I use a helper function as suggested here:
def find_data_file(filename):
if getattr(sys, 'frozen', False):
# The application is frozen
datadir = os.path.dirname(sys.executable)
else:
# The application is not frozen
# Change this bit to match where you store your data files:
datadir = os.path.dirname(__file__)
return os.path.join(datadir, filename)
app = dash.Dash(__name__,
assets_folder=find_data_file('assets/'))
I am using:
Python 3.7.6
dash 1.9.1
cx-freeze 6.1
Any help much appreciated!

Module not found: Error: Can't resolve './firebase' in 'C:

I'm getting this error in my vuejs webApp, hope some one tell me how to solve it:
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue
Module not found: Error: Can't resolve './firebase' in
'C:\Users\#####\Desktop\#####\src\components'
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue 17:0-32
# ./src/components/Envio.vue
# ./src/routes.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./src/main.js
this is the script in my vue file:
<script>
import { db } from './firebase'
export default {
data: {
mensaje: null,
... }
}
</script>
I assume you have installed firebase via a node package manager using npm command. If so, the following import statement should fix the problem.
import { db } from 'firebase'

Adding sbt native packager plugin in SBT

I have a very organized build file that is composed of the following scala files:
Build.scala - the main Build file
Dependencies.scala - where I define the dependencies and the versions
BuildSettings.scala - where I define the build settings
plugins.sbt
A snippet of the Build.scala is as below:
import sbt._
import Keys._
object MyBuild extends Build {
import Dependencies._
import BuildSettings._
import NativePackagerHelper._
// Configure prompt to show current project
override lazy val settings = super.settings :+ {
shellPrompt := { s => Project.extract(s).currentProject.id + " > " }
}
// Define our project, with basic project information and library dependencies
lazy val project = Project("my-project", file("."))
.settings(buildSettings: _*)
.settings(
libraryDependencies ++= Seq(
Libraries.scalaAsync
// Add your additional libraries here (comma-separated)...
)
).enablePlugins(JavaAppPackaging, DockerPlugin)
}
All the 4 files that I mentioned above are in the same directory which is inside the project directory. But when I run this build file, I get the following error:
not found value: NativePackagerHelper
Any clues why his this?
I figured out what the problem was. I had to use the following in my build.properties
sbt.version=0.13.11
I originally had 0.13.6 and it was causing the import statements to fail!

Resources