I have a project I am attempting to deploy on DigitalOcean (I'm unsure if the platform matters, but I thought it may be worth mentioning just in case).
In this project, I am making use of aliased paths specified in tsconfig.json:
"baseUrl": "src",
"paths": {
"@Components/*": ["App/Components/*"],
"@Functions/*": ["App/Functions/*"],
"@Types/*": ["App/Types/*"],
"@Styles/*": ["Imports/Styles/*"]
}
When building the project locally, everything works completely fine (even for the SASS imports). However, when building on a deployed server (such as a DigitalOcean App Platform), I will receive the error:
info - Creating an optimized production build...
Failed to compile.
./src/App/Components/Module/Footer.tsx
Module not found: Can't resolve '@Styles/Module/Footer.module.scss' in '/workspace/src/App/Components/Module'
Import trace for requested module:
./src/pages/_app.tsx
This is my file structure (for Footer.tsx):
node_modules
...
tsconfig.json
src
|-- App
| |-- Components
| |-- Module
| |-- Footer.tsx
|-- Imports
| |-- Styles
| |-- Module
| |-- Footer.module.scss
This happens for multiple files and only when importing using the alias @Styles/* (@Components/*, @Functions/*, @Types/* are all fine).
Is there some sort of extra configuration I need to do for stylesheets and aliased imports?
Before you ask, YES I have triple-checked that the file structure and imports are correct.
/* src/App/Components/Module/Footer.tsx */
import styles from "@Styles/Module/Footer.module.scss";