npm run build results in an error: ReferenceError: document is not defined

[flbe78]

npm start runs fine, but npm run build failes:

flbe@cpx-laptop08:/home/testzone/frontend$ npm run build

> frontend@0.0.0 build
> preact build --template src/templates/index.html --no-prerender

(node:827945) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
⚠ WARN Could not find sw.js in /media/ssd/projects/vumc/testzone/frontend/src. Using the default service worker.
 Build  [========            ] 40% (8.0s) building[BABEL] Note: The code generator has deoptimised the styling of /media/ssd/projects/vumc/testzone/frontend/node_modules/jodit/build/jodit.min.js as it exceeds the max of 500KB.
 Build  [==================  ] 90% (12.8s) additional chunk assets processing[BABEL] Note: The code generator has deoptimised the styling of /media/ssd/projects/vumc/testzone/frontend/node_modules/jodit/build/jodit.min.js as it exceeds the max of 500KB.

                           bundle.201c5.css ⏤  2.6 kB
                        bundle.*****.esm.js ⏤  279 kB (+9.08 kB)
                     polyfills.*****.esm.js ⏤  2.31 kB
      route-about-by-author.chunk.80c60.css ⏤  290 B
   route-about-by-author.chunk.*****.esm.js ⏤  1.2 kB
     route-about-by-keyword.chunk.d08d1.css ⏤  919 B
  route-about-by-keyword.chunk.*****.esm.js ⏤  1.72 kB
             route-admin.chunk.*****.esm.js ⏤  628 B
       route-art-by-keyword.chunk.98d64.css ⏤  614 B
    route-art-by-keyword.chunk.*****.esm.js ⏤  1.38 kB
           route-art-detail.chunk.4a22b.css ⏤  1.03 kB
        route-art-detail.chunk.*****.esm.js ⏤  1.92 kB
          route-artist-page.chunk.0c682.css ⏤  518 B
       route-artist-page.chunk.*****.esm.js ⏤  1.21 kB
          route-author-page.chunk.69d41.css ⏤  513 B
       route-author-page.chunk.*****.esm.js ⏤  1.54 kB
          route-book-detail.chunk.7da5a.css ⏤  1.05 kB
       route-book-detail.chunk.*****.esm.js ⏤  2.44 kB
        route-film-by-genre.chunk.4c25e.css ⏤  415 B
     route-film-by-genre.chunk.*****.esm.js ⏤  1.35 kB
          route-film-detail.chunk.18806.css ⏤  771 B
       route-film-detail.chunk.*****.esm.js ⏤  1.96 kB
            route-film-page.chunk.ce054.css ⏤  528 B
         route-film-page.chunk.*****.esm.js ⏤  1.43 kB
                 route-home.chunk.04363.css ⏤  1.4 kB
              route-home.chunk.*****.esm.js ⏤  5.17 kB (+39 B)
     route-pathography-list.chunk.5e3f2.css ⏤  514 B
  route-pathography-list.chunk.*****.esm.js ⏤  1.5 kB
     route-poems-by-keyword.chunk.1f088.css ⏤  511 B
  route-poems-by-keyword.chunk.*****.esm.js ⏤  1.4 kB
     route-poetry-by-author.chunk.62a47.css ⏤  754 B
  route-poetry-by-author.chunk.*****.esm.js ⏤  1.9 kB
        route-poetry-detail.chunk.1e651.css ⏤  782 B
     route-poetry-detail.chunk.*****.esm.js ⏤  1.92 kB
    route-quotes-by-keyword.chunk.0bcf0.css ⏤  492 B
 route-quotes-by-keyword.chunk.*****.esm.js ⏤  1.42 kB
       route-roman-by-genre.chunk.cbea6.css ⏤  415 B
    route-roman-by-genre.chunk.*****.esm.js ⏤  1.4 kB
     route-titels-by-author.chunk.a5f61.css ⏤  513 B
  route-titels-by-author.chunk.*****.esm.js ⏤  1.44 kB (+13 B)
    route-titels-by-keyword.chunk.8cdf1.css ⏤  637 B
 route-titels-by-keyword.chunk.*****.esm.js ⏤  1.64 kB
          route-work-detail.chunk.2cdad.css ⏤  439 B
       route-work-detail.chunk.*****.esm.js ⏤  1.19 kB
                      23.chunk.*****.esm.js ⏤  671 B
                                  sw-esm.js ⏤  12.3 kB (+5 B)
                                      sw.js ⏤  12.3 kB (+2 B)
                         polyfills.86c2f.js ⏤  2.41 kB
       route-about-by-author.chunk.c9cf6.js ⏤  1.8 kB
      route-about-by-keyword.chunk.43120.js ⏤  2.31 kB
                 route-admin.chunk.ceec8.js ⏤  1.17 kB
        route-art-by-keyword.chunk.6089e.js ⏤  1.98 kB
            route-art-detail.chunk.29031.js ⏤  2.53 kB
           route-artist-page.chunk.d6bc2.js ⏤  1.81 kB
           route-author-page.chunk.6310d.js ⏤  2.19 kB
           route-book-detail.chunk.d2a5b.js ⏤  3.06 kB
         route-film-by-genre.chunk.153b5.js ⏤  1.95 kB
           route-film-detail.chunk.371de.js ⏤  2.56 kB
             route-film-page.chunk.1242c.js ⏤  2.04 kB
      route-pathography-list.chunk.e8273.js ⏤  2.1 kB
      route-poems-by-keyword.chunk.fc507.js ⏤  2.01 kB
      route-poetry-by-author.chunk.4e177.js ⏤  2.48 kB
         route-poetry-detail.chunk.0f95b.js ⏤  2.53 kB
     route-quotes-by-keyword.chunk.d8bc7.js ⏤  2.02 kB
        route-roman-by-genre.chunk.99af5.js ⏤  1.99 kB
      route-titels-by-author.chunk.670e2.js ⏤  0 B (-2.04 kB)
     route-titels-by-keyword.chunk.cd82c.js ⏤  2.22 kB
           route-work-detail.chunk.b263e.js ⏤  1.75 kB
                          23.chunk.2a2d0.js ⏤  668 B
                                 index.html ⏤  1 kB
                                   200.html ⏤  961 B
                            bundle.2a339.js ⏤  0 B (-279 kB)
                  route-home.chunk.a6e8b.js ⏤  0 B (-6.62 kB)
                            bundle.96830.js ⏤  289 kB (+289 kB)
                  route-home.chunk.8f740.js ⏤  6.66 kB (+6.66 kB)
      route-titels-by-author.chunk.2e992.js ⏤  2.05 kB (+2.05 kB)

✖ ERROR   ReferenceError: document is not defined
  
  - nwsapi.js:215 
    [frontend]/[nwsapi]/src/nwsapi.js:215:21
  
  - nwsapi.js:245 Factory
    [frontend]/[nwsapi]/src/nwsapi.js:245:6
  
  - selectors.js:32 exports.addNwsapi
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/helpers/selectors.js:32:24
  
  - ParentNode-impl.js:62 DocumentImpl.querySelector
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/ParentNode-impl.js:62:21
  
  - document-base-url.js:7 exports.documentBaseURL
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/helpers/document-base-url.js:7:30
  
  - document-base-url.js:39 exports.parseURLToResultingURLRecord
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/helpers/document-base-url.js:39:27
  
  - utils.js:115 exports.reflectURLAttribute
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/utils.js:115:21
  
  - HTMLLinkElement-impl.js:40 get href
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/HTMLLinkElement-impl.js:40:12
  
  - HTMLLinkElement-impl.js:78 isExternalResourceLink
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/HTMLLinkElement-impl.js:78:21
  
  - HTMLLinkElement-impl.js:22 HTMLLinkElementImpl._attach
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/HTMLLinkElement-impl.js:22:9
  
  - Node-impl.js:243 HTMLHeadElementImpl.insertBefore
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/Node-impl.js:243:18
  
  - Node-impl.js:368 HTMLHeadElementImpl.appendChild
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/living/nodes/Node-impl.js:368:17
  
  - parse5-adapter-parsing.js:44 JSDOMParse5Adapter.appendChild
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/browser/parse5-adapter-parsing.js:44:16
  
  - index.js:548 Parser._attachElementToTree
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:548:30
  
  - index.js:555 Parser._appendElement
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:555:14
  
  - index.js:1158 Object.startTagInHead [as START_TAG_TOKEN]
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:1158:11
  
  - index.js:657 Parser._processToken
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:657:55
  
  - index.js:684 Parser._processInputToken
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:684:18
  
  - index.js:440 Parser._runParsingLoop
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:440:18
  
  - index.js:344 Parser.parse
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/parser/index.js:344:14
  
  - index.js:10 Object.parse
    [frontend]/[critters-webpack-plugin]/[jsdom]/[parse5]/lib/index.js:10:19
  
  - htmltodom.js:64 HTMLToDOM._parseWithParse5
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/browser/htmltodom.js:64:19
  
  - htmltodom.js:48 HTMLToDOM._doParse
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/browser/htmltodom.js:48:42
  
  - htmltodom.js:44 HTMLToDOM.appendToDocument
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/jsdom/browser/htmltodom.js:44:17
  
  - api.js:44 new JSDOM
    [frontend]/[critters-webpack-plugin]/[jsdom]/lib/api.js:44:29
  
  - critters.js:14 createDocument
    [frontend]/[critters-webpack-plugin]/dist/critters.js:14:20
  
  - critters.js:203 Critters.<anonymous>
    [frontend]/[critters-webpack-plugin]/dist/critters.js:203:20
  
  - new Promise
  
  - critters.js:197 Critters.process
    [frontend]/[critters-webpack-plugin]/dist/critters.js:197:12
  
  - critters.js:152 
    [frontend]/[critters-webpack-plugin]/dist/critters.js:152:24
  
  
  - new Promise
  
  
  - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - index.js:673 promisedApplyPluginsAsyncWaterfall
    [frontend]/[html-webpack-plugin]/index.js:673:47
  
  - index.js:196 
    [frontend]/[html-webpack-plugin]/index.js:196:18
  
  - task_queues:95 process.processTicksAndRejections
    node:internal/process/task_queues:95:5
  

[JoviDeCroock]

In npm run build --prerender a prerender happens which runs in a Node environment afaik so you would have to guard against document being accessed. You could go to [frontend]/[nwsapi]/src/nwsapi.js:215:21 and guard the usage with typeof document !== 'undefined'.

[rschristian]

They're using --no-prerender. It's been a while, but I don't think that's preact-cli's prerender output either

[JoviDeCroock]

Oh gotcha, that must be critter then

[rschristian]

It looks like critters is failing there, though I'm not familiar enough to know why (& it's no longer maintained), but you can try adding --no-inline-css or --inline-css false to disable it I believe

[flbe78]

it works now with the --no-inline-css added, I get a working bundle in the build folder. I have to place the files in the root of the webserver. Is it possible to specify a subfolder?

[rschristian]

Sorry, what do you mean? Like to serve the app from https://example.com/subfolder?

[flbe78]

yes, like https://example.com/subfolder

[rschristian]

// preact.config.js
export default (config, env, helpers) => {
    config.output.publicPath = '/subfolder/';
};

In webpack this is called the "public path"

[flbe78]

adding --no-inline-css did the trick