How do I resolve the "module not found" error from NextJS's build compilation?

Question

I have a NextJS app that uses the USWDS and Sass. I have followed their instructions on how to create the Sass entry point, theme, and custom file, but am now facing a webpack error when I run next build. I receive this error:

./src/styles/index.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./src/styles/index.scss
Module not found: Can't resolve '../../node_modules/@uswds/uswds/packages/fonts/roboto-mono/roboto-mono-v5-latin-regular.woff' in '/Users/joe/dev/dol-ui-claimant-intake/client/src/styles'

Import trace for requested module:
./src/styles/index.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./src/styles/index.scss
./src/styles/index.scss

What is strange is the app works fine in next dev.

Sass entry point under src/styles/index.scss

@forward 'uswds-theme';
@forward 'uswds';

@forward 'custom-styles';

Theme file in same directory (_uswds-theme.scss:

@use 'uswds-core' with (
  ...
  $theme-image-path: '~@uswds/uswds/img',
  $theme-font-path: '~@uswds/uswds/fonts',
);

Sass options in Next config:

  sassOptions: {
    includePaths: [
      path.join(__dirname, 'src/styles'),
      "./node_modules/@uswds/uswds/packages"
    ],
  },

I've so far tweaked the $theme-font-path value to no avail: ../fonts doesn't work as well as a bunch other attempts at trying to resolve this module.

How do I resolve the "module not found" error from NextJS's build compilation?

0 Answers0