3 Column layout widget. How to activate?

[staminna]

I followed the documentation online for the 2 column layout, but when I try to run, I get the following error:
Here is the source I used:
I did everything until the step "Client-side JavaScript for widgets"

You have a /webdev/apos/dashboard/modules/three-column-widget folder, but that module is not activated in app.js and it is not a base class of any other active module. Right now that code doesn't do anything.
This warning appears only once to save space. Pass --all-orphan-modules
on the command line to see the warning for all cases.

⚠️ It looks like you may have made a mistake in your code:
The module three-column does not extend anything and does not have any code.

This usually means that you:

1. Forgot to "extend" another module
2. Configured a module that comes from npm without npm installing it
3. Simply haven't written your "index.js" yet

I think the issue is in app.js, which I have "empty" because I don't know what to do: Here is the relevant part:

require('apostrophe')({
  shortName: 'Dashboard',
  modules: {
    'three-column': {},

...

I couldn't find any information with google and I also believe this will help others how to achieve this�.
Thanks!

[boutell]

It’s a module, so you should activate it by its full name in app.js. You left off -widget. Hope this is helpful

[staminna]

require('apostrophe')({
  shortName: 'Dashboard',
  modules: {
    '@apostrophecms/three-column-widget': {},

The module @apostrophecms/three-column-widget does not extend anything.

A -widget module usually extends @apostrophecms/widget-type or another widget type.
Or possibly you forgot to npm install something.

[abea]

The module is in /webdev/apos/dashboard/modules/three-column-widget, so there is no @apostrophecms namespace. That namespace is only for official Apostrophe modules. So yours should be in the modules object as 'three-column-widget': {},.

[staminna]

Hi @abea
thanks for quick reply.

Like this?

 modules: {  
    'three-column-widget': {},

...

(node:13891) DeprecationWarning: isConnected is deprecated and will be removed in the next major version
(Use node --trace-deprecation ... to show where the warning was created)
Error: The module @apostrophecms is not defined. Referenced in three-column-widget.
at Object.self.define (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/lib/moog-require.js:114:15)
at createPrep (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/lib/moog.js:453:23)
at Object.self.create (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/lib/moog.js:120:9)
at instantiateModules (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/index.js:334:24)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async module.exports (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/index.js:112:5)
[nodemon] app crashed - waiting for file changes before starting...

Perhaps it needs reference because the oficial docs for two column layout use it in index.js file:

module.exports = {
  extend: '@apostrophecms',
  options: {
    label: 'Three column'
  },
  // 👇 The widget type's field schema
  fields: {
    add: {
      // 👇 The first column area
      columnOne: {
        type: 'area',
        label: 'Column One',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {},
            '@apostrophecms/image': {}
          }
        }
      },
      // 👇 The second column area
      columnTwo: {
        type: 'area',
        label: 'Column Two',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {},
            '@apostrophecms/image': {}
          }
        }
      },
      // 👇 The second column area
      columnThree: {
        type: 'area',
        label: 'Column Three',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {},
            '@apostrophecms/image': {}
          }
        }
      }
    }
  }
};

[abea]

extend: '@apostrophecms', doesn't do anything. That isn't a module. You want extend: '@apostrophecms/widget-type'

[boutell]

Hi @staminna, I am not finding this typo in our a3-docs repo (the docs site), or other modules. Would you please clarify where you found it?

A widget type module that doesn't extend another widget type would always extend @apostrophecms/widget-type.

[boutell]

(I checked the source you referenced and I did not find this typo, it has the correct extend setting.)

[staminna]

Documentation
My widget:

require('apostrophe')({
shortName: 'Dashboard',
modules: {
'three-column-widget': {},

(node:14528) DeprecationWarning: isConnected is deprecated and will be removed in the next major version
(Use node --trace-deprecation ... to show where the warning was created)
Error: The module @apostrophecms is not defined. Referenced in three-column-widget.

[abea]

The problem is in the widget configuration: #3450 (reply in thread)

[staminna]

Here is my full app.js file:

require('apostrophe')({
  shortName: 'Dashboard',
  modules: {
    extend: '@apostrophecms/three-column-widget',
    // Apostrophe module configuration
    // *******************************
    //
    // NOTE: most configuration occurs in the respective modules' directories.
    // See modules/@apostrophecms/page/index.js for an example.
    //
    // Any modules that are not present by default in Apostrophe must at least
    // have a minimal configuration here to turn them on: `moduleName: {}`
    // ***********************************************************************
    // `className` options set custom CSS classes for Apostrophe core widgets.
    '@apostrophecms/rich-text-widget': {
      options: {
        className: 'bp-rich-text'
      }
    },
    '@apostrophecms/image-widget': {
      options: {
        className: 'bp-image-widget'
      }
    },
    '@apostrophecms/video-widget': {
      options: {
        className: 'bp-video-widget'
      }
    },
    // `asset` supports the project's webpack build for client-side assets.
    asset: {},
    // The project's first custom page type.
    'default-page': {}
  }
});

TypeError: Cannot set properties of undefined (setting 'name')
at self.define (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/lib/moog.js:52:28)
at Object.self.define (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/lib/moog-require.js:152:14)
at /Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/index.js:324:13
at /Users/jorgenunes/webdev/apos/dashboard/node_modules/lodash/lodash.js:4967:15
at baseForOwn (/Users/jorgenunes/webdev/apos/dashboard/node_modules/lodash/lodash.js:3032:24)
at /Users/jorgenunes/webdev/apos/dashboard/node_modules/lodash/lodash.js:4936:18
at Function.forEach (/Users/jorgenunes/webdev/apos/dashboard/node_modules/lodash/lodash.js:9410:14)
at defineModules (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/index.js:323:7)
at module.exports (/Users/jorgenunes/webdev/apos/dashboard/node_modules/apostrophe/index.js:110:5)
at Object. (/Users/jorgenunes/webdev/apos/dashboard/app.js:1:22)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
at node:internal/main/run_main_module:17:47

[abea]

I'm not sure how we're getting so mixed up. extend: '@apostrophecms/three-column-widget', does not belong in app.js modules. In that object you should include `'three-column-widget': {}, as you had earlier.

In modules/three-column-widget/index.js you have your module configuration. That should include extend: '@apostrophecms/widget-type' as the first line of the module configuration.

[staminna]

Thanks I got it.
I can't only find out where are the widgets, I search everywhere on the UI even though it might not work.

[abea]

there is a screenshot in the documentation that shows an area menu with widget options: https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#basic-area-configuration

[abea]

You will also have to configure an area to use the widget, so follow that whole documentation section carefully.