nodejs "require not defined"

Question

I have a PDF.js project I'm trying to get working. Unfortunately, that library uses node.js (as I finally figured out from all the require statements). I've never used node.js until today.

I got node.js installed and went through w3schools tutorial to get it running. Now I'm trying to extend it to my project but getting "require not defined" again!

I start up the node.js server in a Windows cmd shell like this:

C:\Users\Greg\NodeJS_Hello_World\WebApplication1\web>node pdfjs-start.js

Here is pdfjs-start.js:

const http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function(req, res) {
    var q = url.parse(req.url, true);
    var filename = "." + q.pathname;
    console.log(filename);
    fs.readFile(filename, function(err, data) {
        if (err) {
            res.writeHead(404, {'Content-Type': 'text/html'});
            return res.end("404 Not Found");
        }  
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        return res.end();
    });

}).listen(9080, "");

I attempt to run the project from a Chrome browser like this:

http://localhost:9080/index.html

which fails with

getDocument is not defined

Here is index.html:

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #canvas_container {
                    width: 800px;
                    height: 450px;
                    overflow: auto;
                }
            </style>            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            <script type="module" src="pdf.js/src/pdf.js"></script>
            <script type="module" src="pdf.js/src/pdf.worker.js"></script>
            <script type="module" src="pdf.js/web/pdf_viewer.js"></script>
            <script type="module" src="pdf.js/web/viewer.js"></script>          
        </head>
        <body>
            <div>TODO write content</div>
            <div id="my_pdf_viewer">
                <div id="canvas_container">
                    <canvas id="pdf_renderer"></canvas>
                </div>                      
            </div>

        <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        };

        this.loadPdfDrawing = function(drawingName) {
            getDocument(drawingName).then((pdf) => {
                myState.pdf = pdf;
                render();
            });     
            var container = document.getElementById('my_pdf_viewer');
            var viewer = document.getElementById('canvas_container');

            var pdfViewer = new PDFViewer({ 
                container: container,
                viewer: viewer
            });

            var pdfFindController = new PDFFindController({
                pdfViewer: pdfViewer
            });

            pdfViewer.setFindController(pdfFindController);
        };

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');

                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        function findText(text) {
            pdfFindController.executeCommand('find', {
                caseSensitive: false, 
                findPrevious: undefined,
                highlightAll: true, 
                phraseSearch: true, 
                query: text
            });
        }

        document.addEventListener("DOMContentLoaded", function(event) { 
            loadPdfDrawing('386-5001.pdf');
            findText('12.000');
        });

        </script>
        </body>
    </html>

So why is getDocument not defined? If I look at the included pdf.js, I see it contains

exports.getDocument = pdfjsDisplayAPI.getDocument;

If I do something like this in index.html:

        var p = require('./pdf.js/src/pdf.js');
        p.getDocument(drawingName).then((pdf) => {
            myState.pdf = pdf;
            render();
        });

Then it fails with

require is not defined

And the Chrome debugger console shows:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Any nodejs experts out there who can tell me what's going on?

Have you followd [these instructions](https://github.com/mozilla/pdf.js#building-pdfjs) to *to bundle all src/ files into two production scripts and build the generic viewer* - this will be especially useful if you plan on supporting internet explorer - alternatively download the prebuilt library from https://mozilla.github.io/pdf.js/getting_started/#download and follow the instructions - there's only TWO scripts you should need, the fact that your loading 4 suggests you're doing it wrong — Jaromanda X, Mar 30 '19 at 00:13
@JaromandaX. Thanks for the link. Looks like some good stuff there. Will take a while to digest then will reply. — user3217883, Apr 01 '19 at 15:26

score 1 · Answer 1 · answered Mar 30 '19 at 00:03

1

If you use <script type=module> in the browser, you need to work with import, not with require:

import {getDocument} form './pdf.js/src/pdf.js'

Browsers don't support require, you can only use require in front-end code, if you transpile with a tool like Webpack or Babel. New browsers support modules and import without transpilation.

answered Mar 30 '19 at 00:03

user835611

2,309
2
21
29

If I add import {getDocument} from './pdf.js/src/pdf.js'; it produces error "Uncaught SyntaxError: Unexpected token {" – user3217883 Apr 01 '19 at 16:09

nodejs "require not defined"

1 Answers1