[Remix 1.x] Could not resolve paths with $ on compile and on runtime while trying to get paths with dynamic segments #8637

mogarick · 2024-01-30T17:53:46Z

mogarick
Jan 30, 2024

I'm trying deploy a Remix 1.x app in a Linux machine with Debian 12 (amd64). I'm using Typescript but I'm having problems.
It's important to note that the same code builds and runs correctly on my Mac OS Machine (M1).

Maybe it's something trivial but I can't get it so I came here hopping someone can help me or give me a hint about what to look for to fix it.

Remix versión is 1.19.3 both on my Mac and on Linux.

When running npm run build I'm getting the following output with the last lines being a path resolving issue:

# npm run build

> build
> npm run build:css && remix build


> build:css
> tailwindcss -m -i ./styles/app.css -o app/styles/app.css


Rebuilding...

Done in 344ms.
 info  building... (NODE_ENV=production)
 warn  The `CatchBoundary` and `ErrorBoundary` API is changing in v2
┃ You can use the `v2_errorBoundary` future flag to opt-in early.
┃ -> https://remix.run/docs/en/v1.15.0/pages/v2#catchboundary-and-errorboundary
┗
 warn  The `formMethod` API is changing in v2
┃ You can use the `v2_normalizeFormMethod` future flag to opt-in early.
┃ -> https://remix.run/docs/en/v1.15.0/pages/v2#formMethod
┗
 warn  The route `meta` API is changing in v2
┃ You can use the `v2_meta` future flag to opt-in early.
┃ -> https://remix.run/docs/en/v1.15.0/pages/v2#meta
┗
 warn  The route `headers` API is changing in v2
┃ You can use the `v2_headers` future flag to opt-in early.
┃ -> https://remix.run/docs/en/v1.17.0/pages/v2#route-headers
┗
 warn  The default server module format is changing in v2
┃ The default format will change from `cjs` to `esm`.
┃ You can keep using `cjs` by explicitly specifying `serverModuleFormat: 'cjs'`.
┃ You can opt-in early to this change by explicitly specifying `serverModuleFormat: 'esm'`
┃ -> https://remix.run/docs/en/v1.16.0/pages/v2#servermoduleformat
┗
 warn  The route file convention is changing in v2
┃ You can use the `v2_routeConvention` future flag to opt-in early.
┃ -> https://remix.run/docs/en/v1.15.0/pages/v2#file-system-route-convention
┗
 warn  could not resolve "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities"
┃ You imported "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities" in app/components/competition-activities/ActivityStatusActions.tsx,
┃ but that package is not in your `node_modules`.
┃ Did you forget to install it?
┗
✘ [ERROR] Could not resolve "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities"

    app/components/competition-activities/ActivityStatusActions.tsx:6:34:
      6 │ ...pes } from "~/app/routes/events/$eventID/competitions/$competiti...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities"

    app/components/competition-activities/MacroActivitiesJudgementAssignmentEdit.tsx:4:34:
      4 │ ...pes } from "~/app/routes/events/$eventID/competitions/$competiti...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities"

    app/components/events/CompetitionJudgementAssignmentForm.tsx:6:34:
      6 │ ...pes } from "~/app/routes/events/$eventID/competitions/$competiti...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/app/routes/events/$eventID/competitions/$competitionCode/agenda/$competitionLocationCode/macroactivities" as external to exclude it from the bundle, which will remove this error.

All the resolve errors are related to an enum living in a .tsx component.
I extracted the enum to an independent file and made some tests moving the enum up one dir at a time and in all cases where the path included a $, (~/app/routes/events/$eventID for instance) the "Could not resolve" error appeared.

When I relocated the enum to a directory in a path without folder including $ (~/app/routes/events/ for instance) the problem disappeared and the build was successful.

But the problem doesn't end there.
After starting the app with npm run start (which executes remix-serve build) the app starts correctly and I can navigate to

localhost:3000/events

but when I click on a <Link /> element that must navigate to a url with a dynamic segment events/$eventID, for example http://localhost:3000/events/afTsd45G, I'm getting a new error:

Error: Invariant failed
    at invariant (/app/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:10:15)
    at loader6 (/app/build/index.js:13325:38)
    at Object.callRouteLoaderRR (/app/node_modules/@remix-run/server-runtime/dist/data.js:52:22)
    at handler (/app/node_modules/@remix-run/server-runtime/dist/routes.js:52:50)
    at runHandler (/app/node_modules/@remix-run/server-runtime/node_modules/@remix-run/router/router.ts:3620:7)
    at callLoaderOrAction (/app/node_modules/@remix-run/server-runtime/node_modules/@remix-run/router/router.ts:3671:22)
    at map (/app/node_modules/@remix-run/server-runtime/node_modules/@remix-run/router/router.ts:2995:9)
    at [Array.map](https://github.com/remix-run/remix/discussions/Array.map) (<anonymous>)
    at loadRouteData (/app/node_modules/@remix-run/server-runtime/node_modules/@remix-run/router/router.ts:2994:24)
    at queryImpl (/app/node_modules/@remix-run/server-runtime/node_modules/@remix-run/router/router.ts:2774:26)

So it appears the $ is be common suspect here but I'm clueless about why since on my Mac it works without any issue.

Thank you in advance for your help.

Here is the package.json file

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "start": "remix-serve build",
    "test": "jest"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.2",
    "@react-pdf/renderer": "^3.0.0",
    "@remix-run/node": "^1.6.7",
    "@remix-run/react": "^1.6.7",
    "@remix-run/router": "^1.8.0",
    "@remix-run/serve": "^1.6.7",
    "csv": "^6.2.0",
    "date-fns": "^2.29.1",
    "date-fns-tz": "^1.3.7",
    "debug": "^4.3.4",
    "lodash.groupby": "^4.6.0",
    "lodash.isequal": "^4.5.0",
    "mongodb": "^4.8.1",
    "nanoid": "^3.3.4",
    "object-path": "^0.11.8",
    "qs": "^6.11.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sort-by": "^0.0.2",
    "tiny-invariant": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-typescript": "^7.18.6",
    "@remix-run/dev": "^1.6.7",
    "@remix-run/eslint-config": "^1.6.7",
    "@tailwindcss/forms": "^0.5.3",
    "@types/csv-parse": "^1.2.2",
    "@types/csv-stringify": "^3.1.0",
    "@types/jest": "^28.1.6",
    "@types/lodash.groupby": "^4.6.7",
    "@types/lodash.isequal": "^4.5.6",
    "@types/qs": "^6.9.7",
    "@types/react": "^17.0.47",
    "@types/react-dom": "^17.0.17",
    "@types/sort-by": "^1.2.3",
    "autoprefixer": "^10.4.12",
    "babel-jest": "^28.1.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "concurrently": "^7.4.0",
    "eslint": "^8.20.0",
    "jest": "^28.1.3",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.7.4"
  },
  "engines": {
    "node": ">=14"
  }
}

Here is my remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  watchPaths: ["domain/**", "utils/**", "uic/**"]
};

Here is my tsconfig.json file

{
  "include": [
    "remix.env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "./domain/types/sort-by.d.ts"
  ],

  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/domain/*": ["./domain/*"],
      "~/utils/*": ["./utils/*"],
      "~/app/*": ["./app/*"],
      "~/uic/*": ["./uic/*"]
    },
    "noEmit": true
  }
}

Answered by mogarick

Jan 31, 2024

Nevermind.

The problem was that I had renamed some folders from $eventId to $eventID and this change was not propagated to the git repository. So It's now obvious that the errors I was getting were because I was importing a path/$eventID but the source from the git repo didn't have Cush path. It had $eventId. So both errors were due to non existent paths.
I would be great if there were more context in the errors thrown specially on the runtime case. invariante error doesn't teller anything about the path problem.

Anyway I added the link to de Stack Overflow answer that helped me solve the renaming in the right way.

How do I commit case-sensitive only filename changes in Git?

View full answer

mogarick · 2024-01-31T00:39:33Z

mogarick
Jan 31, 2024
Author

Nevermind.

The problem was that I had renamed some folders from $eventId to $eventID and this change was not propagated to the git repository. So It's now obvious that the errors I was getting were because I was importing a path/$eventID but the source from the git repo didn't have Cush path. It had $eventId. So both errors were due to non existent paths.
I would be great if there were more context in the errors thrown specially on the runtime case. invariante error doesn't teller anything about the path problem.

Anyway I added the link to de Stack Overflow answer that helped me solve the renaming in the right way.

How do I commit case-sensitive only filename changes in Git?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Remix 1.x] Could not resolve paths with $ on compile and on runtime while trying to get paths with dynamic segments #8637

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[Remix 1.x] Could not resolve paths with $ on compile and on runtime while trying to get paths with dynamic segments #8637

Uh oh!

mogarick Jan 30, 2024

Replies: 1 comment

Uh oh!

mogarick Jan 31, 2024 Author

mogarick
Jan 30, 2024

mogarick
Jan 31, 2024
Author