Sage 10: Module not found: Error: Can't resolve '@styles/app

sage
,
1

I ran a fresh install of Sage 10. I have followed the steps of replacing Tailwind with Bootstrap, and added ESLint, Prettier, and Stylelint.

I’m getting the following error when running yarn dev or yarn build. Any suggestions?

 Module not found: Error: Can't resolve '@styles/app' in '/app/public/wp-content/themes/konek/resources'

… Error details This error was thrown by the webpack compiler itself. It is not the same as a syntax error. It is likely a missing
or unresolvable build dependency.

☰ Stack trace
    at node_modules/webpack/lib/Compilation.js:2016:28
    at node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at node_modules/webpack/lib/NormalModuleFactory.js:270:22

package.json:

"devDependencies": {
    "@roots/bud": "6.12.2",
    "@roots/bud-eslint": "^6.12.2",
    "@roots/bud-prettier": "^6.12.2",
    "@roots/bud-sass": "^6.12.2",
    "@roots/bud-stylelint": "^6.12.2",
    "@roots/eslint-config": "^6.12.2",
    "@roots/sage": "6.12.2"
  },

bud.config.js

export default async (app) => {
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);


app.setPublicPath('/app/public/wp-content/themes/konek/public');

  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://test.local')
    .watch(['resources/views', 'app']);

  app.wpjson
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .enable();
};

Thank you in advance.

2

Is there an app.css or app.scss (SASS/SCSS)? This may be the reason.

3

Yes, I have an app.scss in /resources/styles/

4

As you are using SCSS, ensure that all necessary adjustments were made, compare your repository to this sample one:

Changes: https://github.com/strarsis/sage10-scss/commits/master

5

I’m still getting errors. I’m using the same version of dependencies.

✘  sage ./public [8fbcd2ecc714c762f9da]
│
├─ ✘  error
│
│  Can't resolve '@styles/app' in './resources'
│
├─ ✘  error
│
│  Can't resolve '@styles/editor' in './resources'

 "devDependencies": {
    "@roots/bud": "6.12.0",
    "@roots/bud-postcss": "^6.12.0",
    "@roots/bud-sass": "^6.12.0",
    "@roots/bud-tailwindcss": "6.12.0",
    "@roots/sage": "6.12.0"
  },
6

Hello, try this and rebuild :

"devDependencies": {
    "@roots/bud": "6.12.0",
    "@roots/bud-postcss": "6.12.0",
    "@roots/bud-sass": "6.12.0",
    "@roots/bud-tailwindcss": "6.12.0",
    "@roots/sage": "6.12.0"
  },

Removing the ^ ensures that the versions are the same for each package

3 Likes
7

Great, that worked! Thank you