[Bug] Build fails with react-static 6.3.6

[Herohtar]

My site was building fine with react-static 6.3.2, but after updating to 6.3.6 the build fails. You can see the repository here: https://github.com/Herohtar/thalion-herohtar/tree/6.3.6

The update to react-static is the only thing different from the previous commit.

Environment

  System:
    OS: Windows 10
    CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
    Memory: 5.25 GB / 15.96 GB
  Binaries:
    Node: 11.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.12.3 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
    Internet Explorer: 11.0.17763.1
  npmPackages:
    react: ^16.8.2 => 16.8.2
    react-dom: ^16.8.2 => 16.8.2
    react-hot-loader: ^4.6.5 => 4.6.5
    react-jss: ^8.6.1 => 8.6.1
    react-markdown: ^4.0.6 => 4.0.6
    react-moment: ^0.8.4 => 0.8.4
    react-static: ^6.3.6 => 6.3.6

Error

> react-static build --staging


=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute urls and also
required to automatically generate a sitemap.xml.

=> Cleaning dist...
=> [✓] Dist cleaned (0.4s)
=> Cleaning artifacts...
=> [✓] Artifacts cleaned
=> Building Routes...
=> [✓] Routes Built (0.3s)
=> Building Templates
=> [✓] Templates Built
=> Copying public directory...
=> [✓] Public directory copied (0.4s)
=> Bundling App...
Version: webpack 4.29.4
Time: 20034ms
Built at: 02/17/2019 8:39:36 PM
                                 Asset      Size  Chunks  Chunk Names
                      main.6f8f129b.js  7.57 KiB       0  main
                  main.6f8f129b.js.map  14.7 KiB       0  main
    templates/vendors~main.ad78449a.js   352 KiB       1  vendors~main
templates/vendors~main.ad78449a.js.map  1.24 MiB       1  vendors~main
  [0] C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/react/index.js 189 bytes {1} [built]
  [1] C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/react-hot-loader/index.js 824 bytes {1} [built]
  [2] C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/@babel/runtime/helpers/typeof.js 817 bytes {1} [built]
  [4] (webpack)/buildin/module.js 552 bytes {1} [built]
 [10] (webpack)/buildin/global.js 582 bytes {1} [built]
 [13] ../lib/browser/index.js 24.6 KiB {1} [built]
 [15] C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/@babel/runtime/regenerator/index.js 49 bytes {1} [built]
 [22] ../lib/browser/components/StaticInfo.js 3.02 KiB {1} [built]
 [51] C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-browser-plugins.js 151 bytes {0} [built]
 [59] C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-templates.js 3.5 KiB {0} [built] [failed] [1 error]
 [90] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
 [91] ../lib/bootstrapPlugins.js 942 bytes {1} [built]
[118] ../lib/bootstrapTemplates.js 715 bytes {1} [built]
[119] ../lib/bootstrapApp.js 1.98 KiB {1} [built]
[223] C:/Users/Me/Desktop/HTML/thalion-herohtar/src/index.js + 2 modules 3.67 KiB {0} [built]
      | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/index.js 975 bytes [built]
      | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/App.js 2.46 KiB [built]
      | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/theme.js 212 bytes [built]
    + 209 hidden modules

ERROR in C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-templates.js 1:1026
Module parse failed: Unexpected token (1:1026)
You may need an appropriate loader to handle this file type.
> import _path5 from"path";import _universalImport5 from"babel-plugin-universal-import/universalImport";import _path4 from"path";import _universalImport4 from"babel-plugin-universal-import/universalImport";import _path3 from"path";import _universalImport3 from"babel-plugin-universal-import/universalImport";import _path2 from"path";import _universalImport2 from"babel-plugin-universal-import/universalImport";import _path from"path";import _universalImport from"babel-plugin-universal-import/universalImport";import universal,{setHasBabelPlugin}from'C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/react-universal-component/dist/index.js';setHasBabelPlugin();var universalOptions={loading:function loading(){return null;},error:function error(props){console.error(props.error);return React.createElement("div",null,"An error occurred loading this page's template. More information is available in the console.");}};var t_0=universal(_universalImport({id:"../src/pages/404.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-404' */'../src/pages/404.js')]).then(function(proms){return proms[0];});},path:function path(){return _path.join(__dirname,'../src/pages/404.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/404.js');},chunkName:function chunkName(){return"src-pages-404";}}),universalOptions);var t_1=universal(_universalImport2({id:"../src/pages/blog.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-blog' */'../src/pages/blog.js')]).then(function(proms){return proms[0];});},path:function path(){return _path2.join(__dirname,'../src/pages/blog.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/blog.js');},chunkName:function chunkName(){return"src-pages-blog";}}),universalOptions);var t_2=universal(_universalImport3({id:"../src/containers/Post",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-containers-Post' */'../src/containers/Post')]).then(function(proms){return proms[0];});},path:function path(){return _path3.join(__dirname,'../src/containers/Post');},resolve:function resolve(){return require.resolveWeak('../src/containers/Post');},chunkName:function chunkName(){return"src-containers-Post";}}),universalOptions);var t_3=universal(_universalImport4({id:"../src/pages/blog",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-blog' */'../src/pages/blog')]).then(function(proms){return proms[0];});},path:function path(){return _path4.join(__dirname,'../src/pages/blog');},resolve:function resolve(){return require.resolveWeak('../src/pages/blog');},chunkName:function chunkName(){return"src-pages-blog";}}),universalOptions);var t_4=universal(_universalImport5({id:"../src/pages/index.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-index' */'../src/pages/index.js')]).then(function(proms){return proms[0];});},path:function path(){return _path5.join(__dirname,'../src/pages/index.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/index.js');},chunkName:function chunkName(){return"src-pages-index";}}),universalOptions);// Template Map
| export default{'../src/pages/404.js':t_0,'../src/pages/blog.js':t_1,'../src/containers/Post':t_2,'../src/pages/blog':t_3,'../src/pages/index.js':t_4};export var notFoundTemplate="../src/pages/404.js";
 @ ../lib/bootstrapTemplates.js 4:15-63 15:20-68
 @ multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js

                => There were ERRORS during the prod build stage! :(
                => Fix them and try again!
              
Version: webpack 4.29.4
Time: 6911ms
Built at: 02/17/2019 8:39:23 PM
                 Asset     Size  Chunks  Chunk Names
    static.9533ad46.js  143 KiB       0  main
static.9533ad46.js.map  172 KiB       0  main
 [0] external "react-hot-loader" 42 bytes {0} [built]
 [1] external "react" 42 bytes {0} [built]
 [2] (webpack)/buildin/module.js 552 bytes {0} [built]
 [3] external "@babel/runtime/helpers/typeof" 42 bytes {0} [built]
 [4] ../lib/browser/index.js 24.6 KiB {0} [built]
 [5] external "@babel/runtime/regenerator" 42 bytes {0} [built]
 [6] ../lib/browser/utils/index.js 18.3 KiB {0} [built]
 [8] ../lib/browser/components/StaticInfo.js 3.02 KiB {0} [built]
[16] C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-browser-plugins.js 151 bytes
{0} [built]
[19] C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-templates.js 3.5 KiB {0} [built] [failed] [1 error]
[26] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
[27] ../lib/bootstrapPlugins.js 942 bytes {0} [built]
[30] ../lib/bootstrapTemplates.js 715 bytes {0} [built]
[31] ../lib/bootstrapApp.js 1.98 KiB {0} [built]
[39] C:/Users/Me/Desktop/HTML/thalion-herohtar/src/index.js + 2 modules 3.67 KiB {0} [built]
     | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/index.js 975 bytes [built]
     | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/App.js 2.46 KiB [built]
     | C:/Users/Me/Desktop/HTML/thalion-herohtar/src/theme.js 212 bytes [built]
    + 25 hidden modules

ERROR in C:/Users/Me/Desktop/HTML/thalion-herohtar/artifacts/react-static-templates.js 1:1026
Module parse failed: Unexpected token (1:1026)
You may need an appropriate loader to handle this file type.
> import _path5 from"path";import _universalImport5 from"babel-plugin-universal-import/universalImport";import _path4 from"path";import _universalImport4 from"babel-plugin-universal-import/universalImport";import _path3 from"path";import _universalImport3 from"babel-plugin-universal-import/universalImport";import _path2 from"path";import _universalImport2 from"babel-plugin-universal-import/universalImport";import _path from"path";import _universalImport from"babel-plugin-universal-import/universalImport";import universal,{setHasBabelPlugin}from'C:/Users/Me/Desktop/HTML/thalion-herohtar/node_modules/react-universal-component/dist/index.js';setHasBabelPlugin();var universalOptions={loading:function loading(){return null;},error:function error(props){console.error(props.error);return React.createElement("div",null,"An error occurred loading this page's template. More information is available in the console.");}};var t_0=universal(_universalImport({id:"../src/pages/404.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-404' */'../src/pages/404.js')]).then(function(proms){return proms[0];});},path:function path(){return _path.join(__dirname,'../src/pages/404.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/404.js');},chunkName:function chunkName(){return"src-pages-404";}}),universalOptions);var t_1=universal(_universalImport2({id:"../src/pages/blog.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-blog' */'../src/pages/blog.js')]).then(function(proms){return proms[0];});},path:function path(){return _path2.join(__dirname,'../src/pages/blog.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/blog.js');},chunkName:function chunkName(){return"src-pages-blog";}}),universalOptions);var t_2=universal(_universalImport3({id:"../src/containers/Post",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-containers-Post' */'../src/containers/Post')]).then(function(proms){return proms[0];});},path:function path(){return _path3.join(__dirname,'../src/containers/Post');},resolve:function resolve(){return require.resolveWeak('../src/containers/Post');},chunkName:function chunkName(){return"src-containers-Post";}}),universalOptions);var t_3=universal(_universalImport4({id:"../src/pages/blog",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-blog' */'../src/pages/blog')]).then(function(proms){return proms[0];});},path:function path(){return _path4.join(__dirname,'../src/pages/blog');},resolve:function resolve(){return require.resolveWeak('../src/pages/blog');},chunkName:function chunkName(){return"src-pages-blog";}}),universalOptions);var t_4=universal(_universalImport5({id:"../src/pages/index.js",load:function load(){return Promise.all([import(/* webpackChunkName: 'src-pages-index' */'../src/pages/index.js')]).then(function(proms){return proms[0];});},path:function path(){return _path5.join(__dirname,'../src/pages/index.js');},resolve:function resolve(){return require.resolveWeak('../src/pages/index.js');},chunkName:function chunkName(){return"src-pages-index";}}),universalOptions);// Template Map
| export default{'../src/pages/404.js':t_0,'../src/pages/blog.js':t_1,'../src/containers/Post':t_2,'../src/pages/blog':t_3,'../src/pages/index.js':t_4};export var notFoundTemplate="../src/pages/404.js";
 @ ../lib/bootstrapTemplates.js 4:15-63 15:20-68
 @ multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js

                => There were ERRORS during the node build stage! :(
                => Fix them and try again!
              
=> [✓] App Bundled (22.2s)
=> Fetching Site Data...
=> [✓] Site Data Downloaded
=> Fetching Route Data...
=> [=================] 17/17 100% 2429/s 0.0s
=> [✓] Route Data Downloaded (0.1s)
=> Exporting HTML across 8 threads...
  Error: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type und  efined

  - validators.js:125 validateString
    internal/validators.js:125:11

  - loader.js:652 Module.require
    internal/modules/cjs/loader.js:652:3

  - helpers.js:22 require
    internal/modules/cjs/helpers.js:22:18

  - exporter.threaded.js:22 require
    [thalion-herohtar]/[react-static]/src/static/exporter.threaded.js:22:18

  - runtime.js:62 tryCatch
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:288 Generator.invoke [as _invoke]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:288:22

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:114:21

  - runtime.js:62 tryCatch
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:350 maybeInvokeDelegate
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:350:18

  - runtime.js:262 Generator.invoke [as _invoke]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:262:32

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:114:21

  - exporter.threaded.js:23 asyncGeneratorStep
    [thalion-herohtar]/[react-static]/lib/static/exporter.threaded.js:23:103

  - exporter.threaded.js:25 _next
    [thalion-herohtar]/[react-static]/lib/static/exporter.threaded.js:25:194

  - next_tick.js:77 process.internalTickCallback
    internal/process/next_tick.js:77:7


  Error:

  Error: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type und  efined

  - validators.js:125 validateString
    internal/validators.js:125:11

  - loader.js:652 Module.require
    internal/modules/cjs/loader.js:652:3

  - helpers.js:22 require
    internal/modules/cjs/helpers.js:22:18

  - exporter.threaded.js:22 require
    [thalion-herohtar]/[react-static]/src/static/exporter.threaded.js:22:18

  - runtime.js:62 tryCatch
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:288 Generator.invoke [as _invoke]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:288:22

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:114:21

  - runtime.js:62 tryCatch
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:350 maybeInvokeDelegate
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:350:18

  - runtime.js:262 Generator.invoke [as _invoke]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:262:32

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [thalion-herohtar]/[regenerator-runtime]/runtime.js:114:21

  - exporter.threaded.js:23 asyncGeneratorStep
    [thalion-herohtar]/[react-static]/lib/static/exporter.threaded.js:23:103

  - exporter.threaded.js:25 _next
    [thalion-herohtar]/[react-static]/lib/static/exporter.threaded.js:25:194

  - next_tick.js:77 process.internalTickCallback
    internal/process/next_tick.js:77:7


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! thalion-herohtar@0.1.0 stage: `react-static build --staging`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the thalion-herohtar@0.1.0 stage script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Me\AppData\Roaming\npm-cache\_logs\2019-02-18T02_39_43_639Z-debug.log
The terminal process terminated with exit code: 1

[swyxio]

hey OP,

i can replicate your issue with npm, however, when i removed package-lock.json and node_modules and then ran yarn on it, it worked! 😅

sooo... might wanna use yarn for the time being. i know its not a satisfying answer.

[jchip]

I installed with npm 6.8.0 and save the node_modules, and run the command:

find . -name package.json | xargs grep ^\ \ \"version\" > ../6.3.6.npm.txt

and

find . -name package.json | xargs grep ^\ \ \"version\" > ../6.3.2.npm.txt

And then diff 6.3.2.npm.txt 6.3.6.npm.txt, looks like uglifyjs-webpack-plugin is the only change:

[thalion-herohtar]$ !diff
diff 6.3.2.npm.txt 6.3.6.npm.txt
839c839
< ./react-static/package.json:  "version": "6.3.2"
---
> ./react-static/package.json:  "version": "6.3.6"
1122,1130d1121
< ./uglifyjs-webpack-plugin/node_modules/pkg-dir/package.json:  "version": "3.0.0"
< ./uglifyjs-webpack-plugin/node_modules/p-locate/package.json:  "version": "3.0.0"
< ./uglifyjs-webpack-plugin/node_modules/p-limit/package.json:  "version": "2.1.0"
< ./uglifyjs-webpack-plugin/node_modules/find-up/package.json:  "version": "3.0.0"
< ./uglifyjs-webpack-plugin/node_modules/find-cache-dir/package.json:  "version": "2.0.0"
< ./uglifyjs-webpack-plugin/node_modules/source-map/package.json:  "version": "0.6.1"
< ./uglifyjs-webpack-plugin/node_modules/p-try/package.json:  "version": "2.0.0"
< ./uglifyjs-webpack-plugin/node_modules/locate-path/package.json:  "version": "3.0.0"
< ./uglifyjs-webpack-plugin/package.json:  "version": "2.1.1"

[jchip]

So the problem seems to be webpack depends on acorn@6 but npm hoist acorn@5 to the top, and webpack has acorn@6 installed to its own node_modules.

I added acorn@6 to package.json to force it hoist to the top and it works.

yarn hoist acorn@6 to top automatically.

[Herohtar]

Hmm... I managed to get it working, as can be seen in the main branch, but I'm not sure how. I tried installing acorn@6, but that didn't work, so I uninstalled it and played around with deleting node_modules and package-lock.json and it magically started working.

However, if I now delete node_modules and package-lock.json and run npm i I get a warning specifically about acorn:

npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

After this, the build fails again, but installing acorn doesn't fix it and I can't figure out how to reproduce whatever happened the first time to fix it. It seems like there are only some minor differences in the package-lock.json related to acorn.

[arcanis]

Note that applications properly defined in their package.json should work regardless of the hoisting. If the problem is purely due to "npm has a different hoisting than Yarn", then I don't think (imo as a Yarn maintainer) that npm is at fault here.

Is there a package somewhere that doesn't list its acorn dependency properly?

[swyxio]

hi! thanks for coming by! struggling to figure this out due to ignorance 😅 this is a helpful pointer, i can try to trace the acorn dependencies. surprised to hear that npm is not at fault, i had heard yarn had more subjectively “correct” hoisting as a key feature.

[swyxio]

ok i think i have it.

https://github.com/react-tools/eslint-config-react-tools published by @tannerlinsley is relying on an out of date eslint which relies on an out of date espree. if we bump deps of eslint-config-react-tools we should fix it?

[arcanis]

i had heard yarn had more subjectively “correct” hoisting as a key feature.

Hoisting is hard and as you say it's very subjective what's a "correct" hoisting - should a good hoisting prioritize correctness (and only merge strictly identical versions), or size (and always merge when the ranges overlap)? When multiple different versions of the same package can be hoisted to the same level, which one prioritize? Etc. Lots of heuristics are possible, so in the end the only guarantee Yarn and npm can do is: don't rely on the hoisting to obtain your dependencies.

https://github.com/react-tools/eslint-config-react-tools published by @tannerlinsley is relying on an out of date eslint which relies on an out of date espree. if we bump deps of eslint-config-react-tools we should fix it?

It seems like webpack 4.28.4 depended on ^5.6.2, but ^4.29.5 depends on ^6.0.5. Bumping webpack should hopefully enforce it to the new version (bumping eslint-config-react-tools might not be a bad idea either, though).

[jchip]

I want to add some note regarding npm/yarn hoisting. I think this is still due to some bug in npm because if I add acorn@5 to the top package.json to force it to top level, yarn install still works.

There's a peerDependencies bug in npm recently that cause webpack 4.29 to fail and I am not sure the fix has been released yet.

• Parsing of import() fails in 4.29.0 (Compilation issue, related to dynamic import) webpack/webpack#8656
• install/dedupe: fix hoisting of packages with peerDeps npm/cli#147

Another behavior I've observed is that npm sometimes doesn't create private node_modules/.bin for packages that has a dep overshadowed by a package hoisted to the top.

Finally, debugging dependencies is something I have to deal with regularly. I wrote a blog related to the webpack 4.29 incident recently. https://medium.com/walmartlabs/debug-nodejs-dependencies-51eb40f484ec

[swyxio]

joel, you're a legend. glad you are helping us out with your knowledge. npm acknowledges the bug and has not fixed it yet.

[jchip]

You are welcome. Glad I could help.

[johnreynoldsventure]

I installed 6.3.5 and the build works as expected.
This after trying the suggestions in the thread.

[gpoole]

@tannerlinsley it looks like @sw-yx has put up a PR on eslint-config-react-tools that might help work around this issue in the short term, at least for the basic template. Could you please take a look and see if it's ok to merge? Thanks!

[tannerlinsley]

Yeah I'll get that merged and released asap

[gpoole]

Awesome, thanks, that's got it!