react-static: [Bug] Build fails with react-static 6.3.6

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 15 (6 by maintainers)

Most upvoted comments

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.

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

jchip on Feb 20, 2019

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.

jchip on Feb 18, 2019

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).

arcanis on Feb 19, 2019

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.

swyxio on Feb 18, 2019