NextJs [Typescript, SCSS] Module not found-CodePudding

I'm swapping a Next.js application from .js to .ts, and using ScSS, which seems to the the first error I get on npm run dev. It seems when I run npm run build I get some issues unrelated to scss though, so might be a wider issue.

Would really appreciate any suggestions?

Swapping from js to ts

touch tsconfig.json
npm run dev
npm install --save-dev typescript @types/react @types/node\n
npm run dev

[ERROR]: NPM RUN DEV and I get the following errors on npm run dev:

Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/node_modules/next/dist/compiled/util/util.js'
error - ./src/pages/_app.js:2:0
Module not found: Can't resolve 'styles/global.scss'
  1 | import React from "react";
> 2 | import "styles/global.scss";
  3 | import "styles/components/index.scss";
  4 | import NavbarCustom from "components/NavbarCustom";
  5 | import Footer from "components/Footer";

[ERROR]: NPM RUN BUILD

Failed to compile.

./src/pages/_app.js
Module not found: Can't resolve 'styles/global.scss' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'

./src/pages/_app.js
Module not found: Can't resolve 'styles/components/index.scss' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'

./src/pages/_app.js
Module not found: Can't resolve 'components/NavbarCustom' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'

./src/pages/_app.js
Module not found: Can't resolve 'components/Footer' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'

./src/pages/_app.js
Module not found: Can't resolve 'util/analytics' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'


> Build failed because of webpack errors

Failed Solutions

Adding a scss declaration Most articles say to add a module definition into next-env.d.ts, but this just gets overriden (and it's clear this is no longer the solution as there's a comment in that file // NOTE: This file should not be edited)

I've added a index.d.ts into the root directory, with the following contents:

declare module "*.module.css";
declare module "*.module.scss";
declare module "*.scss" {
  const content: { [key: string]: any };
  export = content;
}

as well as adding "index.d.ts" into the include section of tsconfig.json

Installing Other Dependancies

npm i style-loader, css-loader, typescript

CodePudding user response：

Ah, weird, I just checked the difference between the existing jsconfig.json and the tsconfig.json

It turns out I needed to add:

    "baseUrl": "./src",