[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

AryanJ-NYC · 2019-04-26T04:14:27Z

Bug Report

Describe the bug
Running gatsby build when using standard Markdown anchor tag syntax throws an error:

To Reproduce

git clone https://github.com/AryanJ-NYC/docz-theme-example
cd docz-theme-example
npm i && gatsby build
See error

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  624 |     const docs = useDocs();
  625 |     const toCheck = useMemo(() => [
> 626 |         location.pathname
      | ^
  627 |             .split(separator)
  628 |             .slice(0, -1)
  629 |             .join(separator)


  WebpackError: ReferenceError: location is not defined
  
  - index.esm.js:626 Link.Object
    [lib]/[docz-theme-default]/dist/index.esm.js:626:1
  
  - bootstrap:17 Object.useMemo
    lib/webpack/bootstrap:17:1
  
  
  - index.esm.js:625 Link
    [lib]/[docz-theme-default]/dist/index.esm.js:625:28
  
  - bootstrap:22 c
    lib/webpack/bootstrap:22:1
  
  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1
  
  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1
  
  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1
  
  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1
  
  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1
  
  
  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9
  
  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1
  
  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1
  
  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

Expected behavior
Lack of error. Please note that gatsby develop works fine.

Environment

OS: MacOS 10.14.4
Node/npm version: Node 10.14.1/npm 6.9.0]

The text was updated successfully, but these errors were encountered:

jsjoeio · 2019-04-27T18:19:27Z

Hey @AryanJ-NYC ! 👋🏼

I believe this is happening because location is not defined at build time (because it's a web API and the build process is run with Node. You should be able to fix this by adding this

const docs = useDocs();
if (typeof window === 'undefined') return
const toCheck = useMemo(() => [
// the rest of your code...

Let me know if that fixes it!

AryanJ-NYC · 2019-04-27T20:54:38Z

Hey @jsjoeio! Appreciate the feedback.

I've tried to fix that in const Link of docz-theme-default. I've also tried the fix Gatsby suggests here AND I've upgraded to gatsby-source-filesystem 2.0.32.

All those potential fixes lead to the same error message:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

   8 |  else
   9 |          root["lib"] = factory(root["@reach/router"], root["core-js/fn/object/assign"], root["core-js/modules/es6.array.find"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.object.is-extensible"], root["core-js/modules/es6.object.to-string"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/es7.object.entries"], root["core-js/modules/web.dom.iterable"], root["crypto"], root["fs"], root["lodash"], root["lodash/fp"], root["lodash/get"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_fn_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_find__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_is_extensible__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es7_object_entries__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_crypto__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_lodash_fp__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return 


  WebpackError: Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Link for the full message or use the non-mi  nified dev environment for full errors and additional helpful warnings.
  
  - universalModuleDefinition:10 ba
    lib/webpack/universalModuleDefinition:10:2
  
  
  - bootstrap:21 Ra
    lib/webpack/bootstrap:21:1
  
  
  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1
  
  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1
  
  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1
  
  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1
  
  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1
  
  
  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9
  
  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1
  
  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1
  
  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1
  
  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

jsjoeio · 2019-04-27T22:18:59Z

Hmm...that's strange. Okay I'll see if I can reproduce this later with the repo you provided and hopefully we can figure out a fix.

jsjoeio · 2019-04-28T17:20:51Z

After some investigating, I think your issue is valid. I believe this error stems from the Link component.

I wonder if it would be as "easy" as changing this:

const docs = useDocs()
  const toCheck = useMemo(
    () =>
      [
        location.pathname
          .split(separator)
          .slice(0, -1)
          .join(separator)
          .slice(1),
        (href || '').replace(/^(?:\.\/)+/gi, ''),
      ].join('/'),
    [separator]
)

to this:

const docs = useDocs()
  const toCheck = useMemo(
    () => {
     if (typeof window === 'undefined') return
     return [
        location.pathname
          .split(separator)
          .slice(0, -1)
          .join(separator)
          .slice(1),
        (href || '').replace(/^(?:\.\/)+/gi, ''),
      ].join('/'),
    [separator]
     }
)

AryanJ-NYC · 2019-04-28T21:00:23Z

@jsjoeio Made your proposed change in node_modules/docz-theme-default/dist/index.esm.js. I get the following error:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

   8 |  else
   9 |          root["lib"] = factory(root["@reach/router"], root["core-js/fn/object/assign"], root["core-js/modules/es6.array.find"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.object.is-extensible"], root["core-js/modules/es6.object.to-string"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/es7.object.entries"], root["core-js/modules/web.dom.iterable"], root["crypto"], root["fs"], root["lodash"], root["lodash/fp"], root["lodash/get"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_fn_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_find__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_is_extensible__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es7_object_entries__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_crypto__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_lodash_fp__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return 


  WebpackError: Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Link for the full message or use the non-mi  nified dev environment for full errors and additional helpful warnings.
  
  - universalModuleDefinition:10 ba
    lib/webpack/universalModuleDefinition:10:2
  
  
  - bootstrap:21 Ra
    lib/webpack/bootstrap:21:1
  
  
  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1
  
  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1
  
  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1
  
  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1
  
  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1
  
  
  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9
  
  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1
  
  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1
  
  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1
  
  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

Hopefully some weekday help tomorrow will lead us to finding the fix.

jsjoeio · 2019-04-28T22:19:48Z

Ah, bummer. Yeah, hopefully we can get someone who knows more to help us figure this out!

AryanJ-NYC · 2019-05-06T14:20:37Z

I updated gatsby-theme-docz to 1.1.0 and gatsby to 2.4.2. I am now getting the following, similar error when running gatsby build:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  683 |   } = useConfig();
  684 |   const docs = useDocs();
> 685 |   const toCheck = useMemo(() => [location.pathname.split(separator).slice(0, -1).join(separator).slice(1), (href || '').replace(/^(?:\.\/)+/gi, '')].join('/'), [separator]);
      |                          ^
  686 |   const matched = docs && docs.find(doc => doc.filepath === toCheck);
  687 |   const nHref = matched ? matched.route : href;
  688 |   const isInternal = nHref && nHref.startsWith('/');


  WebpackError: ReferenceError: location is not defined
  
  - index.esm.js:685 Link.Object
    [lib]/[docz-theme-default]/dist/index.esm.js:685:26
  
  - bootstrap:17 Object.useMemo
    lib/webpack/bootstrap:17:1
  
  
  - index.esm.js:685 Link
    [lib]/[docz-theme-default]/dist/index.esm.js:685:26
  
  - bootstrap:22 c
    lib/webpack/bootstrap:22:1
  
  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1
  
  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1
  
  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1
  
  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1
  
  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
    lib/.cache/static-entry.js:206:18
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1
  
  
  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9
  
  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1
  
  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1
  
  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

Anyone?

check environment before using global `location` variable in link component fixes doczjs#832

AryanJ-NYC · 2019-05-07T03:06:17Z

@jsjoeio Now that gatsbyjs/gatsby#13641 is fixed, your suggested fix at #832 (comment) works. Thanks!

check environment before using global `location` variable in link component fixes doczjs#832

jsjoeio · 2019-05-07T13:39:29Z

@AryanJ-NYC awesome! Glad to that fixed it 🙌🏼

check environment before using global `location` variable in link component fixes #832

AryanJ-NYC changed the title ~~gatsby-theme-docz 1.0.4 does not build with gatsby 2.3.27~~ Using Standard Markdown Link Syntax [LinkName](http://url.com) Breaks Gatsby Build Apr 27, 2019

AryanJ-NYC changed the title ~~Using Standard Markdown Link Syntax [LinkName](http://url.com) Breaks Gatsby Build~~ Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build Apr 27, 2019

AryanJ-NYC changed the title ~~Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build~~ [gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build Apr 27, 2019

jsjoeio mentioned this issue Apr 28, 2019

[docs site] Webassembly Error When Building gatsbyjs/gatsby#13641

Closed

AryanJ-NYC added a commit to AryanJ-NYC/docz that referenced this issue May 7, 2019

feat(docz-theme-default): allow use of link component in ssr

ed002e3

check environment before using global `location` variable in link component fixes doczjs#832

AryanJ-NYC added a commit to AryanJ-NYC/docz that referenced this issue May 7, 2019

feat(docz-theme-default): allow use of link component in ssr

e288fd1

check environment before using global `location` variable in link component fixes doczjs#832

AryanJ-NYC mentioned this issue May 7, 2019

fix(docz-theme-default): allow use of link component in ssr #854

Merged

AryanJ-NYC added a commit to AryanJ-NYC/docz that referenced this issue May 7, 2019

fix(docz-theme-default): allow use of link component in ssr

6b0c600

check environment before using global `location` variable in link component fixes doczjs#832

pedronauck pushed a commit that referenced this issue May 8, 2019

fix(docz-theme-default): allow use of link component in ssr (#854)

90c27e0

check environment before using global `location` variable in link component fixes #832

pedronauck closed this as completed May 8, 2019

pedronauck pushed a commit that referenced this issue May 8, 2019

fix(docz-theme-default): allow use of link component in ssr (#854)

64a95da

check environment before using global `location` variable in link component fixes #832

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

AryanJ-NYC commented Apr 26, 2019 •

edited

Loading

jsjoeio commented Apr 27, 2019

AryanJ-NYC commented Apr 27, 2019 •

edited

Loading

jsjoeio commented Apr 27, 2019

jsjoeio commented Apr 28, 2019

AryanJ-NYC commented Apr 28, 2019 •

edited

Loading

jsjoeio commented Apr 28, 2019

AryanJ-NYC commented May 6, 2019 •

edited

Loading

AryanJ-NYC commented May 7, 2019

jsjoeio commented May 7, 2019

[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

Comments

AryanJ-NYC commented Apr 26, 2019 • edited Loading

Bug Report

jsjoeio commented Apr 27, 2019

AryanJ-NYC commented Apr 27, 2019 • edited Loading

jsjoeio commented Apr 27, 2019

jsjoeio commented Apr 28, 2019

AryanJ-NYC commented Apr 28, 2019 • edited Loading

jsjoeio commented Apr 28, 2019

AryanJ-NYC commented May 6, 2019 • edited Loading

AryanJ-NYC commented May 7, 2019

jsjoeio commented May 7, 2019

AryanJ-NYC commented Apr 26, 2019 •

edited

Loading

AryanJ-NYC commented Apr 27, 2019 •

edited

Loading

AryanJ-NYC commented Apr 28, 2019 •

edited

Loading

AryanJ-NYC commented May 6, 2019 •

edited

Loading