How to compile js files that are not web pages in gatsbyjs

Question

EDIT

I am trying to find a way in gatsby that

1. I can place JS files (not react components that become pages)
2. The JS files get compiled (eg test.ts -> asdf9a8s7d8f7as.js)
3. The JS files go under public which means they are accessible on a web server.

---

Let's say I have a js file that I want to link to from web pages.

// src/pages/functions.js it's more complicated than this
someUsefulFunction = () => { ... }

// src/pages/index.jsx
render(){
  return(
    <div>
      my web page.
      <script src="./functions.js" />
    </div>
  )
}

src/pages/functions.js is not a react component It is just a js files with some functions in it.
Since fuctions.js needs to be accessible on a web server, it is under src/pages .

When I do gatsby develop with the setups like above, it works fine, but when I do gatsby build , it show errors like this

WebpackError: Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

It looks very stupid to use script tag when you can just import the file, but I am working on a project where there are conditions that I need to link my js files through script tag.
Am I doing it wrong? or it's not possible to compile simple js files?

Answer 1

Do you have any other files under ./src/pages/ Other files can confuse gatsby( idk how but it can.)

check this here