Issues while building app

[rishabhpoddar]

I did the following:

npm i

npm run build

And I see the following error:

Building Remix app in production mode...

✘ [ERROR] Could not resolve "~/styles/shared/global.css"

    app/root.tsx:20:25:
      20 │ import globalStyles from "~/styles/shared/global.css";
         ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/shared/global.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/header.css"

    app/root.tsx:21:25:
      21 │ import headerStyles from "~/styles/header.css";
         ╵                          ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/header.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/shared/global.css"

    app/routes/login.tsx:10:25:
      10 │ import globalStyles from "~/styles/shared/global.css";
         ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/shared/global.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/shared/auth-form.css"

    app/routes/login.tsx:11:27:
      11 │ import authFormStyles from "~/styles/shared/auth-form.css";
         ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/shared/auth-form.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/login.css"

    app/routes/login.tsx:12:19:
      12 │ import styles from "~/styles/login.css";
         ╵                    ~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/login.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/shared/global.css"

    app/routes/reset-password.tsx:10:25:
      10 │ import globalStyles from "~/styles/shared/global.css";
         ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/shared/global.css" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "~/styles/shared/auth-form.css"

    app/routes/reset-password.tsx:11:27:
      11 │ import authFormStyles from "~/styles/shared/auth-form.css";
         ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "~/styles/shared/auth-form.css" as external to exclude it from the bundle, which will remove this error.


Build failed with 7 errors:
app/root.tsx:20:25: ERROR: Could not resolve "~/styles/shared/global.css"
app/root.tsx:21:25: ERROR: Could not resolve "~/styles/header.css"
app/routes/login.tsx:10:25: ERROR: Could not resolve "~/styles/shared/global.css"
app/routes/login.tsx:11:27: ERROR: Could not resolve "~/styles/shared/auth-form.css"
app/routes/login.tsx:12:19: ERROR: Could not resolve "~/styles/login.css"
...
Error
    at Object.onBuildFailure (/Users/rishabhpoddar/Desktop/supertokens/remix-supertokens/node_modules/@remix-run/dev/dist/cli/commands.js:162:13)
    at buildEverything (/Users/rishabhpoddar/Desktop/supertokens/remix-supertokens/node_modules/@remix-run/dev/dist/compiler.js:282:13)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/Users/rishabhpoddar/Desktop/supertokens/remix-supertokens/node_modules/@remix-run/dev/dist/compiler.js:107:3)
    at async Object.build (/Users/rishabhpoddar/Desktop/supertokens/remix-supertokens/node_modules/@remix-run/dev/dist/cli/commands.js:157:3)
    at async Object.run (/Users/rishabhpoddar/Desktop/supertokens/remix-supertokens/node_modules/@remix-run/dev/dist/cli/run.js:472:7)

[ITenthusiasm]

I'm actually surprised that Remix doesn't have its own way to resolve those file. 🤔 Maybe it's a bug or something that I misconfigured. But I should be able to get around this if I just use regular imports.

---

Did you run npm run sass beforehand? I tried to specify what to do in the README. But I guess I could've been more specific.

1. Compile SCSS to CSS with npm run sass command.
2. Correctly setup ENV variables in a .env file. I left this open to whoever uses this repo/project. But here are the ones that I used:

# Server Config
DOMAIN=http://localhost:3000

# SuperTokens Config
SUPERTOKENS_CONNECTION_URI=(private)
SUPERTOKENS_API_KEY=(private)
SUPERTOKENS_WEBSITE_DOMAIN=http://localhost:3000
SUPERTOKENS_API_DOMAIN=http://localhost:3000
SUPERTOKENS_API_BASE_PATH=/auth

3. Run npm run dev to run the app in development mode. (I haven't finished up the prod version yet because I wanted to make sure dev was working fine first.)

---

Let me know if this works/helps.

[rishabhpoddar]

Thanks! Works now.