I am in the process of migrating a Next.js application from .js to .ts and incorporating ScSS. The first error I encounter is during 'npm run dev'. However, when I try 'npm run build', different issues arise that do not seem related to ScSS. It appears to be a broader problem.
Any suggestions would be greatly appreciated?
Migrating 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
Upon running npm run dev, I receive the following errors:
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
Unsuccessful Attempts to Solve
Implementing a scss declaration
Despite recommendations to add a module definition into next-env.d.ts, this solution gets overridden (clearly indicated by the comment in the file
// NOTE: This file should not be editedTo address this issue, I have created an index.d.ts file in 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;
}
Additionally, I included "index.d.ts" in the include section of tsconfig.json
Installing Other Dependencies
npm i style-loader, css-loader, typescript