Additional loader for pdfjs-dist in react app? - javascript

I have the pdfjs-dist dependency in my react app and it isn't working - I'm not sure what I changed to cause this. I'm running node v14.16.1, npm v7.9.0, react 17.0.2, react-scripts 4.0.3, and pdfjs-dist 2.7.570. I'm getting the following error message when I run npm start:
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js 2407:53
Module parse failed: Unexpected token (2407:53)
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.
| intent: renderingIntent,
| renderInteractiveForms: renderInteractiveForms === true,
> annotationStorage: annotationStorage?.getAll() || null
| });
| }
I've tried uninstalling and reinstalling relevant packages, as well as npm update, npm audit, and so forth. I also tried adding the worker-loader npm package but it's already a peer dependency on pdfjs-dist so it made no difference. My partner on this project has the same repo and he has no issues, so I'm sure it's something on my end. I believe it has to do with support for optional chaining, but not sure how to proceed.
Thanks!

I just stumbled upon the same issue. What I did was to revert pdfjs-dist to an earlier version (2.9.359 back to 2.6.347 in my case). It all works fine now, hope it helps someone.
A possible explanation from a similar case could be found in this other question.

try to include the package in babel-loader rule
{
test: /\.[tj]sx?$/i,
include: [
/\/node_modules\/pdfjs-dist/,`enter code here`
/\/src/,
],
loader: 'babel-loader',`enter code here`
options: {},
},

Most likely you have incorrect version of webpack. Try to use es5 build
https://github.com/mozilla/pdf.js/issues/12905

This helped me,
You need to import this lib asynchronously
let pdfjs;
(async function () {
pdfjs = await import("pdfjs-dist/build/pdf");
const pdfjsWorker = await import("pdfjs-dist/build/pdf.worker.entry");
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
})();

You Need to downgrade the package version to
("pdfjs-dist": "2.5.207")
This works fine for me.

Related

Invariant Violation: Module `AppRegistry` is not a registered callable module (calling `runApplication`). and etc

I am making a project using react-native, when I added drawer navigation it started giving me an error as:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
so when I search for the solution I came across this answer https://github.com/software-mansion/react-native-reanimated/issues/846#issuecomment-943267584 - But when I followed the procedure as given in this link it started giving me two error - Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?, js engine: hermes and also the above error. I am using react-native 0.67. please help if you can.
try to add this line in your babel.config.js file; Then run again, may be helps you
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
"react-native-reanimated/plugin"
]
};
After adding the react-native-reanimated to your project
Add Reanimated's Babel plugin to your babel.config.js:
module. Exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
for me, it seems that the new react native version 0.70 is not compatible with react native navigation package,
after removing the navigation package, and clearing the cache the code works!
yarn remove #react-native-navigation
yarn start --reset-cache

After upgrading Angular, webpack module source-map-loader is throwing "this.getOptions is not a function"

I am currently building my angular project via webpack with source-map-loader to extract source maps, like so:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
This works fine with my Angular 11 build.
Once I upgrade my angular packages to Angular 12, I begin to get the following error:
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (./node_modules/source-map-loader/dist/index.js:21:24)
Removing this section from my webpack module allows the build to succeed but I am no longer extracting the source maps, causing my bundle to increase in size.
I have tried upgrading source-map-loader to latest version and did not change the error.
I have dug into the node_module and it is complaining about this section of code:
async function loader(input, inputMap) {
const options = this.getOptions(_options.default);
I have seen may other questions on here in regards to sass-loader and other style loaders for Vue but this is for Angular and is mad about extracting source maps.
There are some breaking changes when going to Angular 12 but upgrading to webpack 5.0.0 did not seem to make a difference
What are some other things I can do to debug this?
By looking at the source code v1.1.3 we do see
import { getOptions } from "loader-utils";
But after v2.0 or even v3.0, this import was deleted.
It came from the library loader-utils
Since v2.0, package.json doesn't import it anymore.
Looks like it has been deprecated, getOptions should be use from Webpack type instead of loader-utils.
Maybe your error come from a conflict with an old dependencie from your node_modules, you should remove the old one from your directory and try again
rm -rf node_modules/#types/loader-utils
rm -rf node_modules/loader-utils

Webpack's UglifyJsPlugin throws error with Node modules containing let

This is the relevant code (I'm using Vue.js' Webpack official template):
.babelrc:
"presets": [
"babel-preset-es2015",
"babel-preset-stage-2",
]
webpack.prod.config.js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: shouldDropConsole
},
sourceMap: true
}),
This is the error I get when I do npm run build:
ERROR in static/js/vendor.a6271913414e87e123c2.js from UglifyJs
Unexpected token: name (_months)
[./node_modules/calendar-js/index.js:56,0][static/js/vendor.a6271913414e87e123c2.js:90602,6]
This is the offending line:
let _months = MONTHS;
(If I replace all the let's to vars the project is built without problems. And the const's don't seem to bother Webpack/UglifyJS.)
Do I need to configure something so that Webpack/UglifyJS build node modules containing let's? (The let's in my actual project don't give me problems.)
This could be because you might be using an older version of node which does not support es6 syntax.
let, const, arrow functions etc. are part of es6 syntax. To know more follow this link http://es6-features.org/
You might need the older version of node for your other projects so install nvm. NVM is a node version manager which will help you to switch between node versions easily. Follow the link for documentation and installation process https://github.com/creationix/nvm
Node v6+ supports ES6 syntax try upgrading to that.
UPDATE
On the comments of this answer, it's confirmed that it was not a version issue and got resolved by following this GitHub issue thread https://github.com/joeeames/WebpackFundamentalsCourse/issues/3.
Peace!

Unexpected value '...' imported by the module '...'. Please add a #NgModule annotation

Using Angular.
Steps:
Cloned this simple UI lib that demonstrates the current Angular package standards: https://github.com/jasonaden/simple-ui-lib
Created a new test app with ng new testApp
npm link the simple-ui-lib/dist
npm link simple-ui-lib in the testApp
Imported the example module from simple-ui-lib into testApp:
In the app.module.ts file:
import { BoxModule } from 'simple-ui-lib';
...
#NgModule({
...
imports: [
...
BoxModule
]
})
Webpack compiles fine, but I get this error in the browser and nothing loads:
compiler.es5.js:1540 Uncaught Error: Unexpected value 'BoxModule'
imported by the module 'AppModule'. Please add a #NgModule annotation.
I've tried:
Clearing my npm cache
Re-installing all node modules
Forcing all Angular modules to be the same version in both projects
Checked that all Angular modules are the same version in both projects
Checked that the TypeScript version is the same in both projects
Using other sample module packages instead of simple-ui-lib
Created an entirely new project with the same setup
Downgrading the rollup version used in simple-ui-lib to a build from January
If I console log the BoxModule, I can see the value exists and it seems to be registered as an #NgModule, so I'm confused about what this error is trying to tell me.
I've seen this error around in my searches, but it looks like they are almost always caused by a version mismatch between the library and the host application. In my case, the versions are the same.
Versions:
TypeScript: 2.2.0
#angular/cli: 1.0.4
#angular/common: 4.1.3
Any ideas?
Update: Investigating more, looks like this is a problem with #angular/cli itself. Opened a bug here: https://github.com/angular/angular-cli/issues/6429, but if you have any suggestions please let me know.
Try to use es6 compiler instead of es5.
I encountered similar issue before and chaging the compilation mode solved the problem
I also recommand you To use the last angular cli version and upgrade to angular 5

Error: unknown package in top-level dependencies in Meteor app

I'm making a small Meteor package. It employs two other packages that are explicitly listed in its package.js. For test purposes, I add this package from local system (it's not published on Atmosphere). And I keep getting error messages after I run the app:
=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:
While selecting package versions:
error: unknown package in top-level dependencies: whoever:whatever
I even added required packages explicitly to the app but it didn't help.
The package.js:
Package.describe({
name: 'whoever:whatever',
version: '0.0.1',
summary: 'Whatever the summary is',
git: 'https://github.com/whoever/whatever',
documentation: 'README.md'
});
Package.onUse(function(api) {
api.versionsFrom('1.1.0.3');
api.use('http');
api.use('jparker:crypto-sha1', 'server');
api.use('simple:reactive-method', 'client');
api.addFiles('for-a-server.js', 'server');
api.addFiles([
'for-a-client.js',
'for-a-client.html'
], 'client');
});
What am I doing wrong? What should I look for next?
As was mentioned in your comments, it was due to a problem with symlinking. However, for googlers who come by developing their own meteor packages and also getting this message -- they need to check their env vars have $PACKAGE_DIRS defined in the terminal calling meteor to start their app.
I didn't and this caused the same problem!
Make sure to both init and update your submodules. This should work:
git submodule update --init --recursive
Can you please try and replace the single quotes with double quotes and try... something like below. Please type the quotes.
Package.describe({
name: "whoever:whatever",
version: "0.0.1",
summary: "Whatever the summary is",
git: "https://github.com/whoever/whatever",
documentation: "README.md"
});

Categories