Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Build fails with react-static 6.3.6

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
jchipcommented, Feb 20, 2019

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

2reactions
jchipcommented, Feb 18, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to resolve dependency tree Reactjs
This happens when you are trying to clone a project which is built a long time ago, and project dependencies have moved on...
Read more >
How to fix build failures with `create-react-app` in production
If your build is using create-react-app and has been failing since approximately the 18th of June 2020, this post will help you fix...
Read more >
A guide to using React Router v6 in React apps
React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the...
Read more >
Error Decoder
In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent...
Read more >
SDK Changelog | Localytics Documentation
Known Bug: has an issue reporting data for some returning customers. ... This version of the Localytics SDK was built with the Xcode...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Bug?] out of the box vendor bundle too big?

Next page

[Bug] Lerna + react hooks