Merge pull request #3 from transcom/I-12947-Node-Canvas

I-12947 node canvas

.github/workflows/webpack.yml

@@ -24,5 +24,8 @@ jobs:
 
     - name: Build
       run: |
+        if [ "${{ matrix.node-version }}" == "18.x" ]; then
+          export NODE_OPTIONS=--openssl-legacy-provider
+        fi
         npm install
         npx webpack

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.20.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcom/react-file-viewer",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Extendable file viewer for web",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
   },
   "scripts": {
     "dev": "webpack -d --watch",
-    "build": "webpack -p --progress",
+    "build": "webpack --mode production --progress",
     "start": "node ./scripts/start.js",
     "lint": "eslint --ext js,jsx src",
     "test": "jest --env=jsdom ",
@@ -68,7 +68,6 @@
     "inquirer": "^7.2.0",
     "jest": "^26.1.0",
     "lint-staged": "^10.2.11",
-    "node-sass": "^8.0.0",
     "postcss-loader": "^4.2.0",
     "prettier": "^2.0.5",
     "react": "^16.6.3",
@@ -79,13 +78,14 @@
     "url-loader": "^4.1.0",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "pdfjs-dist": "^4.2.67",
     "prop-types": "^15.5.10",
     "react-visibility-sensor": "^5.0.2",
+    "sass": "^1.77.2",
     "three": "0.137.0"
   },
   "resolutions": {

src/components/drivers/pdf-viewer.jsx

@@ -2,10 +2,8 @@
 
 import React from 'react'
 import VisibilitySensor from 'react-visibility-sensor'
-import { PDFJS } from 'pdfjs-dist/build/pdf.combined'
-import 'pdfjs-dist/web/compatibility'
+import * as PDFJS from 'pdfjs-dist';
 
-PDFJS.disableWorker = true
 const INCREASE_PERCENTAGE = 0.2
 const DEFAULT_SCALE = 1.1
 

webpack.config.js

@@ -2,6 +2,7 @@
 // Modified work Copyright 2020, Trussworks, Inc.
 
 const path = require('path')
+const { experiments } = require('webpack')
 
 const BUILD_DIR = path.resolve(__dirname, './dist')
 const APP_DIR = path.resolve(__dirname, './src')
@@ -11,6 +12,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 
 const config = {
   entry: `${APP_DIR}/components`,
+  mode: 'production',
   output: {
     path: BUILD_DIR,
     filename: 'index.js',
@@ -21,7 +23,7 @@ const config = {
     modules: [path.resolve(__dirname, './src'), 'node_modules'],
     extensions: ['.js', '.jsx', '.json'],
   },
-  plugins: [new BundleAnalyzerPlugin()],
+  plugins: [new BundleAnalyzerPlugin({analyzerMode: 'disabled'})],
   externals: [
     {
       react: {
@@ -83,6 +85,9 @@ const config = {
       },
     ],
   },
+  experiments: {
+    topLevelAwait: true,
+  },
 }
 
 module.exports = config