Can't build next.js app with typescript and sass

Question

Well, I've made my first Next.js app but I'm having deployment issues. I'm not sure what exactly is causing this issue, I've had to update the node version on the server and maybe that messed something up but here's my issue. I can run "npm run build" normally on my windows computer, but it fails on the ubuntu server. It throws the following error:

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx

So, as I understand it, it's complaining that I'm not importing css in _app.js because it doesn't understand that _app.tsx is the same thing, like the build script doesn't understand typescript? Or maybe it's some sort of issue with the sass loader?

Here's my _app.tsx:

import { GlobalStoreProvider } from '../mptools/Store/GlobalStoreProvider'
import en from '../util/locale/en'
import hr from '../util/locale/hr'
import { LocaleProvider } from '../util/locale/NikolicaLocaleContext'
import './style.scss'

function MyApp({ Component, pageProps }) {
    return (
        <LocaleProvider languages={{ hr, en }} initialLanguage="en">
            <GlobalStoreProvider>
                <Component {...pageProps} />
            </GlobalStoreProvider>
        </LocaleProvider>
    )
}

export default MyApp

And here's my package.json:

{
    "name": "nikolica-apartments",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start -p 8881"
    },
    "dependencies": {
        "@types/nodemailer": "^6.4.0",
        "lodash": "^4.17.20",
        "next": "9.5.5",
        "node-sass": "^4.14.1",
        "nodemailer": "^6.4.14",
        "react": "16.13.1",
        "react-dom": "16.13.1"
    },
    "devDependencies": {
        "@types/node": "^14.11.8",
        "@types/react": "^16.9.52",
        "babel-plugin-import": "^1.13.1",
        "babel-plugin-inline-react-svg": "^1.1.1",
        "babel-plugin-lodash": "^3.3.4",
        "typescript": "^4.0.3"
    }
}

Running the node -v node-sass -v and tsc -v commands shows that all three are installed (12.19.0, 4.14.1 and 4.0.5 respectively). I'm not sure how to debug this. I've deleted my node_modules and package-lock.json and did "npm i" again but the same issue persists.

EDIT: Also, here's the tsconfig.json:

{                                               
  "compilerOptions": {                          
    "target": "es5",                            
    "lib": [                                    
      "dom",                                    
      "dom.iterable",                           
      "esnext"                                  
    ],                                          
    "allowJs": true,                            
    "skipLibCheck": true,                       
    "strict": false,                            
    "forceConsistentCasingInFileNames": true,   
    "noEmit": true,                             
    "esModuleInterop": true,                    
    "module": "esnext",                         
    "moduleResolution": "node",                 
    "resolveJsonModule": true,                  
    "isolatedModules": true,                    
    "jsx": "preserve"                           
  },                                            
  "include": [                                  
    "next-env.d.ts",                            
    "**/*.ts",                                  
    "**/*.tsx", "mptools/Helpers/range.ts"      
  ],                                            
  "exclude": [                                  
    "node_modules"                              
  ]                                             
}

DId you add declare module "*.module.scss" { const classes: { [key: string]: string }; export default classes; } to next-env.d.ts file ? — cvekaso

Supperhero Supperhero · Accepted Answer · 2020-10-27T11:58:55

Well, I fixed it. Removing the node_modules and package.json and doing npm i again didn't help, but deleting the whole folder and pulling again from git fixed the issue. No idea what wat the issue is but... ah well.

Can't build next.js app with typescript and sass

2 Answers