Working with Remix in ESM fails to run

[AvidDabbler]

I am working with gtfs-to-html and it is causing some issues in my project. Currently I am getting this error when running it in https://github.com/ioTransit/simple-transit-site

import gtfsToHtml from "gtfs-to-html";
import { gtfsConfig } from "../config.server";
export const load = async () => {
  const { importGtfs } = await import("gtfs");
  try {
    importGtfs(gtfsConfig)
      .then(() => {
        gtfsToHtml(gtfsConfig);
      })
      .then(() => {
        console.log("HTML Generation Successful");
        process.exit();
      })
      .then(() => {
        gtfsToGeoJSON(gtfsConfig);
      })
      .catch((err) => {
        console.error(err);
        process.exit(1);
      });
  } catch (error) {
    console.error(error);
  }
};

error with import

/Users/walter/Documents/transitchat/indie-stack-main/build/index.js:78
    import_gtfs_to_html = __toESM(require("gtfs-to-html"));
                                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/walter/Documents/transitchat/indie-stack-main/node_modules/.pnpm/gtfs-to-html@2.6.10_typescript@5.5.3/node_modules/gtfs-to-html/index.js 
from /Users/walter/Documents/transitchat/indie-stack-main/build/index.js not supported.
Instead change the require of /Users/walter/Documents/transitchat/indie-stack-main/node_modules/.pnpm/gtfs-to-html@2.6.10_typescript@5.5.3/node_modules/gtfs-to-html/index.js in /Users/walter/D
ocuments/transitchat/indie-stack-main/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at app/gtfs/gtfs.js (/Users/walter/Documents/transitchat/indie-stack-main/build/index.js:78:35)
    at /Users/walter/Documents/transitchat/indie-stack-main/build/index.js:7:56
    at /Users/walter/Documents/transitchat/indie-stack-main/build/index.js:240:40
    at async updateGtfs (/Users/walter/Documents/transitchat/indie-stack-main/build/index.js:240:4)

tsconfig

{
  "exclude": ["./cypress", "./cypress.config.ts"],
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2020"],
    "types": ["vitest/globals"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "CommonJS",
    "moduleResolution": "node",
    "target": "ES2020",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "skipLibCheck": true,

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

with dynamic import

import { gtfsConfig } from "../config.server";
export const load = async () => {
  const { importGtfs } = await import("gtfs");
  const gtfsToHtml = await import("gtfs-to-html");
  try {
    importGtfs(gtfsConfig)
      .then(() => {
        gtfsToHtml(gtfsConfig);
      })
      .then(() => {
        console.log("HTML Generation Successful");
        process.exit();
      })
      .then(() => {
        gtfsToGeoJSON(gtfsConfig);
      })
      .catch((err) => {
        console.error(err);
        process.exit(1);
      });
  } catch (error) {
    console.error(error);
  }
};

TypeError: gtfsToHtml is not a function

[brendannee]

Can you add

"type": "module"

to the package.json file? https://stackoverflow.com/a/69089164/363155

Check out this small test project I made that just importing gtfs-to-html:

https://github.com/BlinkTagInc/gtfs-to-html-test

I think the key is using "type": "module" in the package.json file.

[AvidDabbler]

Type module has been added to the project 😬

[brendannee]

Did that work?

On Wed, Jul 17, 2024 at 17:08 Walter Jenkins @.***> wrote:

Type module has been added to the project 😬

— Reply to this email directly, view it on GitHub https://github.com/BlinkTagInc/gtfs-to-html/issues/166#issuecomment-2234834396, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXPWKQMDEYW4XXLR5NXI3ZM4BQ5AVCNFSM6AAAAABLBL45TWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZUHAZTIMZZGY . You are receiving this because you commented.Message ID: @.***>

[AvidDabbler]

it did not. all messages and code above were run with the type set to module

[brendannee]

Ah - in your tsconfig.json try changing "module": "CommonJS" to "module": "nodenext" and see if that works.