Gatsby: Loading another script from markdown - issues

[joeshub]

I have a simple markdown file which includes an external JS file like so:

loadJSFile.md

---
title: "Simple JS test"
---

<script type="text/javascript" src="./test.js"></script>

<button onClick="runTest()">run Test</button>

and the JS file sits in the same directory

test.js

function runTest () {
  console.log('run a test')
}

When I run gatsby develop and load the page, the test.js file is not loaded by the browser, meaning no request is even made, although I do see the script tag in the DOM. Therefore clicking the button results in an error.

Now if I run gatsby build and gatsby serve-build I see a 404 for the test.js file

Any ideas on how to approach this problem would be appreciated. Thank you!

gatsby --version 0.12.45

[KyleAMathews]

The script is escaped. Also when a script tag is inserted into the DOM by
react, it won't get executed as react.js uses innerHTML which disallows
executing script tags.

On Thu, Apr 20, 2017, 10:38 AM Joe Seifi [e-mail] wrote:

I have a simple markdown file which includes an external JS file like so:

loadJSFile.md

---title: "Simple JS test"---

run Test

and the JS file sits in the same directory

test.js

function runTest () {
console.log('run a test')
}

When I run gatsby develop and load the page, the test.js file is not
loaded by the browser, meaning no request is even made, although I do see
the script tag in the DOM. Therefore clicking the button results in an
error.

Now if I run gatsby build and gatsby serve-build I see a 404 for the
test.js file

Any ideas on how to approach this problem would be appreciated. Thank you!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/833, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh3FErdVpQaHLG4pXCNSeCJ4_wls6ks5rx5gEgaJpZM4NDWaC
.

[joeshub]

I see that's a big pain point for making basic use of static files, especially for novice users ide say.

I wonder if there's a way to address this, besides converting markdown to JS and using import to bring in dependencies.

Also on the built version, is there a way to have the dev server find the asset? It is copied over but a 404 so must be a path issue.

[KyleAMathews]

Given that everything goes through React, it's a bit hard.

One way to handle this is when rendering markdown, extract out scripts with a regex and eval them.

Not sure what you mean by the last paragraph?

[Piyush3dB]

@joeshub you mentioned converting markdown to JS in your previous comment. How do I go about doing that? Is it an intermediate file generated by the build system, or do I have to grep for it in the bundled JS?

What I'd like to do is to convert my markdown source into JS and make changes to it so that I can use some stateless react components in the page.

What's sort of work flow should I follow to achieve this? I don't mind if it's a bit of a hack - I'd just like to use some react components (which are stateless and take no props) in my page..

[jbolda]

@Piyush3dB were you able to figure it out? You can actually use js/jsx directly, and import a markdown file for your text. It becomes a bit of a pain if you want to lace react components within your text though. FYI, any file in /pages with dealt with. Js/x files will be used directly, and markdown will be transformed. Also anything prepended with an underscore will be used, but not put into the pages array. That means you can do _mycontent.md and require/import it into your jsx. It will be transformed to html markup so just dangerously set inner html to put it in your component.

The 1.0 branch is actively discussing how to write jsx in markdown though if you are interested.

I am going to close this as it's old and the questions are answered, but feel free to ask more questions.

[Piyush3dB]

For reference, in issue #312 @stereoboost has posted https://react-styleguidist.js.org/ that is trying to address this. Example markdown file.

mdxc is another example how to approach this.