Module not found error after installing Bootstrap on Sage 10

sage
, ,
1

Hi all,

We did install Bootstrap 5 on sage 10 following this documentation;

But now the following errors appear after we run yarn build or yarn dev;

 Error: name is a required property for extensions 
    at new Controller ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Controller/controller.service.js:46:19)
    at Extensions.makeController ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:60:28)
    at Extensions.setController ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:64:33)
    at Extensions.importExtension ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:122:20)
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:99:17
    at async Promise.all (index 0)
    at async Extensions.injectExtensions ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:13)
    at async Extensions.booted ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:81:9)
    at async [secure]/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:57:13

And;

Module not found: Error: Can't resolve '@scripts/app' in '/Users/Jari/Documents/_Sites/abs/wp-content/themes/abs'      

Module not found: Error: Can't resolve '@styles/app' in '/Users/Jari/Documents/_Sites/abs/wp-content/themes/abs'    

Module not found: Error: Can't resolve '@scripts/editor' in '/Users/Jari/Documents/_Sites/abs/wp-content/themes/abs'  

Module not found: Error: Can't resolve '@styles/editor' in '/Users/Jari/Documents/_Sites/abs/wp-content/themes/abs'

This is our bud file;

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy('https://abs.test')

    /**
     * Development URL to be used in the browser.
     */
    .serve('http://0.0.0.0:3001');
};

And our package.json file;

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.5",
    "@roots/bud": "5.7.6",
    "@roots/bud-sass": "^5.8.1",
    "@roots/sage": "5.7.6",
    "bootstrap": "^5.1.3"
  }
}

Does anyone know why we are getting these errors?

Thanks for your time!

1 Like
2

Keep all of the @roots namespace dependencies on the same version.

In your case:

"@roots/bud": "5.8.1",
"@roots/bud-sass": "5.8.1",
"@roots/sage": "5.8.1",
6 Likes
3

You should add this in the documentation

6 Likes