blikblum / pdfkit-webpack-example Goto Github PK
View Code? Open in Web Editor NEWSimple example of using PdfKit with webpack
Simple example of using PdfKit with webpack
I was running into the same errors as this issue and was particularly confused about this error:
Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
at new AFMFont (pdfkit.es5.js:2453)
at new StandardFont (pdfkit.es5.js:2700)
at Function.open (pdfkit.es5.js:3096)
at PDFDocument.font (pdfkit.es5.js:3170)
at PDFDocument.initFonts (pdfkit.es5.js:3132)
at new PDFDocument (pdfkit.es5.js:4890)
at new PDFBuilder (PDFBuilder.js:42)
at PDFCreator.createID (index.jsx:40)
at PDFCreator.componentDidMount (index.jsx:72)
The proposed workaround was to do a direct import from raw-loader
:
import Helvetica from '!!raw-loader!pdfkit/js/data/Helvetica.afm'
This was strange to me as removing the !!raw-loader!
portion still seemed to work and furthermore adding !!raw-loader!
to the require.context
call did not fix the error.
Turns out you just needed to use the default export of the files to avoid the error:
fs.writeFileSync(`data/${match[0]}`, ctx(key).default);
Not sure if this was a pdfkit update or what but it'd be good to update that line.
"pdfkit": "^0.10.0"
"webpack": "^4.39.2"
"arraybuffer-loader": "^1.0.7"
"raw-loader": "^3.1.0"
"transform-loader": "^0.2.4"
ERROR in ./node_modules/_fontkit@1.9.0@fontkit/dist/module.mjs 7463:26
Module parse failed: Unexpected token (7463:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| };
| class $5340de7a86f3ae85$export$2e2bcd8739ae039 {
static zeroMarkWidths = 'AFTER_GPOS';
| static plan(plan, glyphs, features) {
| // Plan the features we want to apply
@ ./node_modules/_pdfkit@0.10.0@pdfkit/js/pdfkit.es5.js 5:0-30 3640:15-22 3642:15-22 3644:15-22
@ ./src/index.js
how can i solve this promble? i dont kown what error happend
I've used your webpack example to extend my create-react-app setup.
I've added your rules to my webpack.config.js but there must a problem with the asset inlining.
in fact this does nothing in my generated webpack chunk:
{ loader: 'raw-loader', test: /\.afm$/ }
this is applied to the webpack output, which indicates that this a problem on the loader side and not a problem with your registerAFMFonts
:
var map = {
"./Helvetica.afm": "./node_modules/pdfkit/js/data/Helvetica.afm"
};
But when i double check the chunk contents there are no inlined glyphs.
That's a pity because i really appreciated the approach with kicking out all the unnecessary embedded fonts. In fact everything up the stack trace works well until the PDFDocument constructor tries to load the standard Helvetica font file, then the app crashes with an uncaught error...
The only thing i modified is the pattern which chooses the font variants. I only want the standard Helvetica to be inlined, like this:
registerAFMFonts(require.context('pdfkit/js/data', false, /Helvetica\.afm$/));
Here's the trace:
Uncaught (in promise) Error: File 'data/Helvetica.afm' not found in virtual file system
at VirtualFileSystem.readFileSync (virtual-fs.js:22)
at Object.Helvetica (pdfkit.es5.js:2658)
at new StandardFont (pdfkit.es5.js:2700)
at Function.open (pdfkit.es5.js:3096)
at PDFDocument.font (pdfkit.es5.js:3170)
at PDFDocument.initFonts (pdfkit.es5.js:3132)
at new PDFDocument (pdfkit.es5.js:4890)
at new PDFBuilder (PDFBuilder.js:42)
at PDFCreator.createID (index.jsx:40)
at PDFCreator.componentDidMount (index.jsx:72)
Any ideas how to ensure that the file will be inlined into the chunk or safely referenced in the virtual file system?
Cheers and thx in advance
getting this:
Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[5].loader: transform-loader?brfs)
at RuleSetCompiler.error (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:365:10)
at /Users/.../node_modules/webpack/lib/rules/UseEffectRulePlugin.js:160:29
at Hook.eval [as call] (eval at create (/Users/.../node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:41:1)
at RuleSetCompiler.compileRule (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:175:19)
at /Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compileRule (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:182:30)
at /Users/kelly/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.