Could not import @roots/sage

Hey everyone,

Starting to really pull my hair out on this one. So, I had fully functioning local setup on bedrock & sage 10 with Acorns 3. Today, I had to a first deployment of progress on my project and had issues with the Github sync to our dev server. So, I manually compiled everything locally and just uploaded the necessary files. To do that I ran composer install --no-dev

After running this I have officially broke my local setup and have been unable to get myself back up and running. I feel bad asking for help because I am certain its something simple I am missing, and I did try to source the Discource and Google for some resources, anything I tried was unsuccessful.

Before doing this I was running
"@roots/bud": "^6.6.10", "@roots/bud-sass": "^6.6.10", "@roots/sage": "^6.6.10"
and would run nvm use 16 then yarn dev or yarn build.

After I ran the deploy: composer install --no-dev I was getting bud not a command error messages even though I did use yarn add @roots/bud --dev during initial install.

Now, after re-installing bud it updated to the latest version of 6.7.3, so I updated my package.json file to update sage and bud-sass to match the version (saw this in other threads). So my packages.json looks like this now:

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/bud": "^6.7.3",
    "@roots/bud-sass": "^6.7.3",
    "@roots/sage": "^6.7.3"
  },
  "dependencies": {
    "@fancyapps/ui": "^4.0.31",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "foundation-sites": "^6.7.5",
    "motion-ui": "^2.0.4",
    "slick-carousel": "^1.8.1",
    "what-input": "^5.2.12"
  }
}

I have deleted my node_modules folder and vendor folder to re-run composer install and yarn. After all dependencies are re-added I seem to hit 2 various issues.

  1. I commonly get that bud is not installed (even though I have now installed it seemingly 20+ times)
  2. Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@roots/sage' imported from /node_modules/@roots/bud-framework/lib/module.js

So, this is where I am at now, I can’t seem to move past this error, and this is my first Sage build so I am not entirely familiar yet with some basic troubleshooting or maybe if this is common and I missing a quick fix.

If more information is needed to help troubleshoot, by all means I will provide that. Any help is greatly appreciated, I am out of ideas and stuck at this point on my project :confused:

Thank you!

Adding some updates here. So, I opened my jsconfig.json file and noticed there was an error locating "extends": "@roots/sage/config/jsconfig.json"

So, I followed that path in node_modules and noticed the sage folder was MIA. So, I ran npm i @roots/sage to manually add it in place. Then ran yarn to update everything. This created some progress, however introduced a new error, I can at least run the command yarn dev now, but I get the following error:

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

This also fails on yarn build.

So, I guess my two questions now would be:

  1. Any insights on why it can’t resolve @styles/*
  2. Am I doing something wrong that the Sage package was missing from node_modules?

Here is my jsconfig.json file:

{
  "extends": "@roots/sage/config/jsconfig.json",
  "compilerOptions": {
    "baseUrl": "resources",
    "paths": {
      "@fonts/*": ["fonts/*"],
      "@images/*": ["images/*"],
      "@scripts/*": ["scripts/*"],
      "@styles/*": ["styles/*"]
    },
    "types": ["@roots/bud", "@roots/sage"]
  },
  "include": ["bud.config.js", "resources"],
  "exclude": ["node_modules", "public"]
}

Here is my bud.config.js


/**
 * Build configuration
 *
 * @see {@link https://roots.io/docs/sage/ sage documentation}
 * @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
 *
 * @typedef {import('@roots/bud').Bud} Bud
 * @param {Bud} app
 */

import { Bud } from '@roots/bud';

export default async (app) => {
  /**
   * Application entrypoints
   * @see {@link https://bud.js.org/docs/bud.entry/}
   */

  app
    .provide({
      jquery: ["jQuery", "$"],
    })

    .entry({
      app: ['@scripts/app', '@styles/app'],
      HeroSlider: ['@scripts/HeroSlider'],
      HeroVideo: ['@scripts/HeroVideo'],
      SectionCta: ['@scripts/SectionCta'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    .minimize()

    /**
     * Directory contents to be included in the compilation
     * @see {@link https://bud.js.org/docs/bud.assets/}
     */
    .assets(['images', 'fonts', 'svg', 'icons'])

    /**
     * Matched files trigger a page reload when modified
     * @see {@link https://bud.js.org/docs/bud.watch/}
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Proxy origin (`WP_HOME`)
     * @see {@link https://bud.js.org/docs/bud.proxy/}
     */
    .proxy('http://site.local')

    /**
     * Development origin
     * @see {@link https://bud.js.org/docs/bud.serve/}
     */
    .serve('http://localhost:3000')
    // .serve('http://site.local')

    /**
     * URI of the `public` directory
     * @see {@link https://bud.js.org/docs/bud.setPublicPath/}
     */
    .setPublicPath('/app/themes/ooa/public/')

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json/}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
     */
    .wpjson.settings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .enable();
};

Thank you!

EDIT: Digging further in to this (sorry feel like I am brain dumping), it looks like I am running in to a conflict of bud-sass not working or removing itself maybe? If I re-add bud-sass then I get the error about @roots/sage package missing. If I then re-add @roots/bud-sass, it goes back to only compiling my js files and not recognizing my app.scss and editor.scss files.

Posting another update here. After probably a total of 6 hours of troubleshooting and trying to downgrade bud, sage, and bud-sass, then re-upgrading them all (making sure each time all version numbers matched) I had no luck. I also on multiple attempts deleted the the node_modules directory and vendor directories to try and start fresh with no luck. It always ended with if bud-sass was installed then @roots/sage was missing, if I reinstalled that, then @roots/bud-sass would break. Rinse and repeat.

I still have no solve for this or idea as to how or why this happened. I finally threw in the towel as I need to make progress on the project. I decided to just start fresh. I created a new project folder, pulled a fresh copy of Sage, followed my steps to remove tailwind, install Foundation, etc. then copied over my sass files, js files, views, etc. from the “broken” theme. After about an hour of tinkering I got this approach to work, and I can now move forward on the project.

I would still love to hear if anyone in the community has any ideas on this one, in case anyone else or myself runs in to this issue again down the road. As I mentioned in my first post, this is my first full build of a Sage site so I very well could be not thinking of a known troubleshooting step or maybe there are cached files I should have deleted or something? Anyways, the new copy of Sage is working and retrofitting my code.

  1. What OS? Linux; WSL; OS X?
  2. What node version? LTS ((lts/*) currently v18.13.0)?
  3. Have you self-updated npm (npm install -g npm) (currently 9.4.0) and/or
    updated yarn (npm install -g yarn) (assuming you are using classic yarn v1; currently 1.22.19)?
  4. Have you cleared the npm and yarn cache?
  5. How good (latency; stability; speed) is your internet connection, any HTTP proxies?

Hey @strarsis

Thanks for the response, answers below.

  1. OS: MacOS Ventura 13.1
  2. Node: I was using nvm use 16 16.19.0
  3. I haven’t updated npm, currently npm --version returns 8.19.3, correct, yarn version 1.22.19
  4. I cleared cached multiple times
  5. Internet connection is pretty solid externally I am on FiOS gigabit, when mobile on wifi I have wifi 6 with over 400mbps downloads, usually I am docked in to ethernet connection. I have pihole installed on my network but that has been in place for years now and didn’t seem to affect anything in the start of the project.

Hoping this helps, thank you for your time!

To rule out any modifications that may cause the issue, try to build a fresh Sage 10 theme:

  1. (cd ~/src)
  2. composer create-project roots/sage sage10-test
  3. cd sage10-test
  4. nvm install lts/*
  5. nvm use lts/*
  6. npm install -g npm
  7. npm install
  8. npm run build

Does this work, does the build succeed?

Then install the acorn Sage 10 theme runtime as a composer dependency:

  1. composer require roots/acorn

  2. Add this to the theme composer.json:

"post-autoload-dump": [
  "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
]
  1. composer dump-autoload

Can the Sage 10 theme then be activated and does it load on back- and frontend?

Note: composer create-project roots/sage [...] by default will automatically install the composer dependencies, so there should be no need for composer install.

1 Like