How to create a script within my React Native app

Question

I have a React Native app. As part of the release process, I need to run a script that uses some of the code in my app to generate a static file. Specifically, my app is a game that uses pre-computed boards, that are costly to compute, so I'm building a script to generate the boards during the release phase and storing them in a local file. I would like to create a script within the same code-base as my app that will import other parts of the code base to generate boards. For example, a subset of my working tree is:

-lib
 \-Helper.tsx
  -Solver.tsx
-scripts
 \-GenerateBoards.js
  -generated_boards.out
App.tsx
package.json
tsconfig.json

Helper.tsx and Solver.tsx are standalone files with no imports. GenerateBoards.js needs to import those two files and use its own internal logic to generate boards and write them out to generated_boards.out.

I have a version of GenerateBoards.js that will write the file, e.g.:

fs = require('fs');
function main() {
  fs.writeFile(
    './scripts/generated_boards.out',
    'Hello, World!',
    function (err) {
      if (err) return console.log(err);
      console.log("Finished writing file.");
    });
}
main();

I can use node scripts\GenerateBoards.js to create the file. The next step is to import Helper.tsx or Solver.tsx, but I cannot figure out any incantation to get it to work. I've tried Helper = require("../lib/Helper.tsx"), but that gives me some MODULE_NOT_FOUND error. I've tried converting GenerateBoards.js to a .tsx file and doing import * as Helper from "../lib/Helper", but that complains because I'm not allowed to import from outside of a module.

It seems that there's some concept around modules or defining modules that I'm not understanding. Typescript's module docs state that "any file containing a top-level import or export is considered a module", so it seems that by doing import * as ..., I'm creating a module. But, the compiler/transpiler/runner seem to claim the opposite.

What exact functionality are you trying to import into GenerateBoards and for what purpose? It seems a bit strange that you're trying to import .tsx files into node. — ksav
– ksav, Commented Mar 7, 2021 at 3:56
Maybe this will help blog.logrocket.com/how-to-use-ecmascript-modules-with-node-js — ksav
– ksav, Commented Mar 7, 2021 at 4:01
Thanks for the link. I tried .mjs but didn't have much luck. Frankly, I was only trying to use JS at this point (despite wanting to use TS) because I had gone down a rabbit hole and getting TS to work was getting (seemingly) complex. That said, I was able to solve the issue on my own using a Typescript environment, which I will add as an answer to my own question. Thanks again for taking the time to share and help! — John Jenkins
– John Jenkins, Commented Mar 9, 2021 at 1:19

John Jenkins · Accepted Answer · 2021-03-09 01:24:17Z

I was able to solve this by properly setting up a Module in a sub-directory of my React Native project.

Structure

-lib
 \-Helper.tsx
  -Solver.tsx
-scripts
 \-GenerateBoards.tsx
  -index.tsx*
  -package.json*
  -tsconfig.json*
  -generated_boards.out
App.tsx
package.json
tsconfig.json

index.tsx

import { GenerateBoards } from "./GenerateBoards";

async function main() {
  const generateBoards = new GenerateBoards();

  await generateBoards.generate();
}

main().then(() => console.log("Complete."));

package.json

{
  "module": "esnext"
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "strict": true,
    "noImplicitAny": false,
    "target": "es2017"
  }
}

Now, my normal Typescript development environment works as expected; GenerateBoards.tsx can import Helper.tsx and Solver.tsx. To run my script and/or add dependencies to it, I first cd into that folder and then run commands like it were any other Typescript environment, e.g.:

cd scripts
npm i some_package
npx ts-node index.tsx

This is nice because it is completely isolated from my "base" package.json, which has all of my app dependencies which would otherwise get polluted with things that are only needed in my script.

Collectives™ on Stack Overflow

How to create a script within my React Native app

1 Answer 1

Structure

index.tsx

package.json

tsconfig.json

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Structure

index.tsx

package.json

tsconfig.json

Comments

Your Answer

Sign up or log in

Post as a guest

Related