How to debug when jsconfig.json declarations stop resolving and I can't tell why?

Question

I have a fresh Next.js project with a clean set of jsconfig declarations as per:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "public/*": ["./public/*"],
      "styles/*": ["./src/styles/*"],
      "utils/*": ["./src/utils/*"],
      "components/*": ["./src/components/*"]
    }
  }
}

Yet, out of nowhere, they're now returning Can't resolve 'styles/styles.scss' and I can't identify what has changed. What's the best way to debug this to find the cause, or what are some common causes for this?

Answer 1

There are a few things you can try to debug the issue.

1. Make sure that the file 'styles/styles.scss' exists in your project and that the file path is spelled correctly in your jsconfig declarations.

2. Check your dependencies and make sure that you have all the necessary packages, such as 'node-sass' or 'sass-loader', installed and configured correctly.

3. Check if there are any conflicting configurations or settings in your webpack config file that may be causing the issue.

4. Check your package.json file, if you are using any package or tool that is transforming your scss files, make sure that it is configured correctly and that the package is up to date.

5. Check if there are any other error messages in your console, they may be related to the problem and provide more information.

If none of the above works, try re-creating the project from scratch and see if that resolves the issue. Hope this helps!