Hi there, I’ve been trying to import the PDF.js library and by extenstion pdfjs-dist into my ember app however I receive this error:
ERROR in ./node_modules/pdfjs-dist/build/pdf.js 1361:17
Module parse failed: Unexpected character '#' (1361:17)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class PDFDocumentLoadingTask {
> static #docId = 0;
|
| constructor() {
@ /tmp/broccoli-18121rh8YKoSzZQDd/cache-334-bundler/staging/app.js 19:44-123
Build Error (Bundler)
webpack returned errors to ember-auto-import
Stack Trace and Error Report: /tmp/error.dump.8d142691655ddaa06585780d1a612a8f.log
Dependancies:
{
"name": "super-rentals",
"version": "0.0.0",
"private": true,
"description": "Small description for super-rentals goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build --environment=production",
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
"lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
"lint:hbs": "ember-template-lint .",
"lint:hbs:fix": "ember-template-lint . --fix",
"lint:js": "eslint . --cache",
"lint:js:fix": "eslint . --fix",
"start": "ember serve",
"test": "npm-run-all lint test:*",
"test:ember": "ember test"
},
"devDependencies": {
"@ember/optional-features": "^2.0.0",
"@ember/render-modifiers": "^2.0.4",
"@ember/test-helpers": "^2.4.2",
"@glimmer/component": "^1.0.4",
"@glimmer/tracking": "^1.0.4",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"ember-auto-import": "^1.11.3",
"ember-cli": "~3.28.3",
"ember-cli-app-version": "^5.0.0",
"ember-cli-babel": "^7.26.6",
"ember-cli-dependency-checker": "^3.2.0",
"ember-cli-htmlbars": "^5.7.1",
"ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-terser": "^4.0.2",
"ember-data": "~3.28.0",
"ember-export-application-global": "^2.0.1",
"ember-fetch": "^8.1.1",
"ember-load-initializers": "^2.1.2",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-page-title": "^6.2.2",
"ember-qunit": "^5.1.4",
"ember-resolver": "^8.0.2",
"ember-source": "~3.28.0",
"ember-template-lint": "^3.6.0",
"ember-wavesurfer": "0.0.5",
"ember-welcome-page": "^4.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-ember": "^10.5.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-qunit": "^6.2.0",
"loader.js": "^4.7.0",
"npm-run-all": "^4.1.5",
"pdfjs": "^2.4.7",
"pdfjs-dist": "^3.1.81",
"prettier": "^2.3.2",
"qunit": "^2.16.0",
"qunit-dom": "^1.6.0"
},
"engines": {
"node": "12.* || 14.* || >= 16"
},
"ember": {
"edition": "octane"
},
"dependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
Component:
import Component from '@glimmer/component';
import PDFJS from 'pdfjs-dist';
// import pdfjsLib from 'pdfjs-dist/webpack';
import EmberObject from '@ember/object';
export default class PDFPreviewComponent extends Component {
}
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function (defaults) {
let app = new EmberApp(defaults, {
// Add options here
autoImport: {
webpack: {
entry: {
"pdf.worker": "pdfjs-dist/build/pdf.worker.entry",
}
}
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree();
};
Any help will be much appreciated, I’ve been trying to figure this out for too long haha