Shopify app development cannot recognize theme extensions

Extensions
1
  1. command

#external/shopify_app/efficiency-assistant: shopify app dev --config=development --tunnel-url=“``https://2d59d3ffb0f1.ngrok-free.app:3000``” --verbose

shopify app dev log file download here

  1. dir structure

➜ tree --gitignore .

#external/shopify_app/efficiency-assistant: tree --gitignore .
├── 1.log
├── dev.sh
├── extensions
│   ├── car-variants
│   │   ├── assets
│   │   │   └── thumbs-up.png
│   │   ├── blocks
│   │   │   └── star_rating.liquid
│   │   ├── locales
│   │   │   └── en.default.json
│   │   ├── shopify.extension.toml
│   │   └── snippets
│   │       └── stars.liquid
│   └── car-variants2
│       ├── assets
│       │   └── thumbs-up.png
│       ├── blocks
│       │   └── star_rating.liquid
│       ├── locales
│       │   └── en.default.json
│       ├── shopify.extension.toml
│       └── snippets
│           └── stars.liquid
├── package-lock.json
├── package.json
├── shopify.app.development.toml
├── shopify.app.toml
└── tsconfig.json

12 directories, 17 files

config file:

#external/shopify_app/efficiency-assistant: shopify --version
@shopify/cli/3.87.0 darwin-arm64 node-v20.12.2

2

Prev Context Topic: Getting Oauth error invalid_request: The redirect_uri is not whitelisted - #22 by Alan_G

Getting Oauth error invalid_request: The redirect_uri is not whitelisted
3

Thanks for sharing that log output @leo_zhang, in the output we’re seeing this:

"app_extensions_any": false,
  "app_extensions_breakdown": "{}",
  "app_extensions_count": 0,
  "app_extensions_custom_layout": true,
  "app_extensions_function_any": false,
  "app_extensions_function_count": 0,
  "app_extensions_theme_any": false,
  "app_extensions_theme_count": 0,
  "app_extensions_ui_any": false,
  "app_extensions_ui_count": 0,

It looks like the CLI isn’t picking up any extension configs for your app there. Can you try setting your /extensions/theme-extension/shopify.extension.toml to follow this format?

name = "theme-extension"
type = "theme"
uid = "65b30aae-2fc0-9b48-3e28-e6bf3e801b92f9c75ad7"

If you’re open to sharing the full .toml file for the theme extension which should be in the specific theme app extension folder I can see if your configuration is correct. Here’s how I have my test app set up in case it’s helpful:

test-app/                                    # Root App Directory
│
├── shopify.app.toml                        # 🔧 Main app configuration
│                                           #    - App name, client_id, scopes
│                                           #    - Webhooks, auth settings
│
├── shopify.web.toml                        # 🌐 Web server configuration
│
├── package.json                            # 📦 Root package config
│   └── workspaces: ["extensions/*"]       #    - Manages theme extension as workspace
│
├── app/                                    # 🚀 Main Remix App (Embedded Admin UI)
│   ├── entry.server.jsx                   #    
│   ├── root.jsx                            #    React/Remix frontend
│   ├── db.server.js                        #    
│   ├── shopify.server.js                   #    Shopify API integration
│   └── routes/                             #    
│       ├── app._index.jsx                  #    Admin dashboard routes
│       ├── app.additional.jsx              #    
│       ├── auth.$.jsx                      #    Authentication
│       └── webhooks.*.jsx                  #    Webhook handlers
│
├── prisma/                                 # 🗄️  Database (Session Storage)
│   └── schema.prisma                       #    
│
├── extensions/                             # 📂 Extensions Directory
│   └── theme-extension/                    # 🎨 Theme App Extension
│       │
│       ├── shopify.extension.toml          # ⚙️  EXTENSION CONFIG FILE
│       │
│       ├── blocks/                         # 🧱 Theme Blocks (App Blocks)
│       │   └── star_rating.liquid          #     - Liquid templates
│       │                                   #     - Merchants add to theme editor
│       │
│       ├── snippets/                       # 📝 Reusable Liquid Snippets
│       │   └── stars.liquid                #     - Can be included in blocks
│       │
│       ├── assets/                         # 🖼️  Static Assets
│       │   └── thumbs-up.png               #     - Images, CSS, JS
│       │
│       └── locales/                        # 🌍 Translations
│           └── en.default.json             #     - i18n support
│
└── public/                                 # 📁 Public static files
    └── favicon.ico

Hope this helps!

4

The problem here is that you have in your app.toml a property of:

extension_directories = [ "extensions" ] - this suggests that the /extension folder itself is an extension, which it is not.

This property should be, one of the following (or in your specific case, can be removed):

extension_directories = [ "extensions/*" ] - use a * wildcard (I imagine this is the default if you don’t specify this prop)
extension_directories = [ "extensions/extension_1", “extensions/extension_2” ]- specify specific directories for specific extensions

Hope that helps!

1 Like
5

Should that be linted for missing a top level toml , when no other folders/files
or as a hard rule against pointing to a top level entry point ( e.g. convention of subfolders for extensions types)

1 Like
6

Yea, I think you’re right given the dev process.

App configuration - interestingly, the docs here suggestion a default of [“extensions/”], which in my testing didn’t work. It does suggest ‘array of string paths or glob patters’ though, which is how it performs.

My hunch is that this is for legacy support, and they want everything in the /extensions folder, as most of the other documentation enforces that setup!

1 Like
7

I just tried what you say. You are right!

2 Likes
8

Thanks for assisting on this one @bkspace - good call! I’ve marked this as solved, let us know if we can help out further though @leo_zhang

1 Like