Skip to content
This repository has been archived by the owner on Jan 24, 2025. It is now read-only.

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

Closed
AryanJ-NYC opened this issue Apr 26, 2019 · 9 comments
Closed

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

AryanJ-NYC opened this issue Apr 26, 2019 · 9 comments

Comments

@AryanJ-NYC
Copy link
Contributor

AryanJ-NYC commented Apr 26, 2019 •
edited
Loading

Bug Report

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

To Reproduce

  1. git clone https://github.com/AryanJ-NYC/docz-theme-example
  2. cd docz-theme-example
  3. npm i && gatsby build
  4. 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]
@AryanJ-NYC 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 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 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
Copy link

jsjoeio commented Apr 27, 2019

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
Copy link
Contributor Author

AryanJ-NYC commented Apr 27, 2019 •
edited
Loading

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
Copy link

jsjoeio commented Apr 27, 2019

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 jsjoeio mentioned this issue Apr 28, 2019
Closed
@jsjoeio
Copy link

jsjoeio commented Apr 28, 2019

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
Copy link
Contributor Author

AryanJ-NYC commented Apr 28, 2019 •
edited
Loading

@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
Copy link

jsjoeio commented Apr 28, 2019

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

@AryanJ-NYC
Copy link
Contributor Author

AryanJ-NYC commented May 6, 2019 •
edited
Loading

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?

AryanJ-NYC added a commit to AryanJ-NYC/docz that referenced this issue May 7, 2019
@AryanJ-NYC
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
@AryanJ-NYC
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 AryanJ-NYC mentioned this issue May 7, 2019
Merged
@AryanJ-NYC
Copy link
Contributor Author

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

AryanJ-NYC added a commit to AryanJ-NYC/docz that referenced this issue May 7, 2019
@AryanJ-NYC
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
@jsjoeio
Copy link

jsjoeio commented May 7, 2019

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

pedronauck pushed a commit that referenced this issue May 8, 2019
@AryanJ-NYC @pedronauck
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 pushed a commit that referenced this issue May 8, 2019
@AryanJ-NYC @pedronauck
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pedronauck @jsjoeio @AryanJ-NYC