Config files not copied when using shopify theme component dev --theme-path

[lcottingham]

Problem description

When running shopify theme component dev --theme-path="." (or any theme path), the generated .dev folder contains empty config files (settings_data.json and settings_schema.json) instead of copying the existing config files from the specified theme directory. This prevents developers from testing components with actual theme settings during development.

Environment

• Collection repository: theme directory
• Branch name: main
• CLI version: 1.0.4
• Operating system: macOS
• Node.js version: 22

Steps to reproduce

1. Navigate to a Shopify theme directory with populated config/settings_data.json and config/settings_schema.json files
2. Run command shopify theme component dev --theme-path="."
3. Check the generated .dev/config/ directory
4. Open .dev/config/settings_data.json and .dev/config/settings_schema.json
5. See that both files exist but contain empty objects/arrays instead of the theme's actual configuration

Expected behavior

When using the --theme-path flag, the plugin should copy the existing config files from the specified theme directory to the .dev folder, preserving all theme settings and configurations. This would allow developers to test components with real theme settings (colors, fonts, typography, etc.) in the development environment.

Actual behavior

The plugin creates the following empty files:

• .dev/config/settings_data.json contains: {}
• .dev/config/settings_schema.json contains: []

Theme settings are not available in the component development environment, making it impossible to test components that depend on theme configurations.

Additional context

• This issue is critical for teams maintaining multiple theme variants (e.g., regional versions) where components need to be tested against different configurations
• Current workaround requires manually copying files after each dev command:

cp config/settings_data.json .dev/config/
cp config/settings_schema.json .dev/config/

Potential fix

When the --theme-path flag is provided, the plugin should:

if (options.themePath) {
  // Copy config files from theme to dev environment
  copyFile(
    path.join(themePath, 'config/settings_data.json'),
    path.join(devPath, 'config/settings_data.json')
  );
  copyFile(
    path.join(themePath, 'config/settings_schema.json'),
    path.join(devPath, 'config/settings_schema.json')
  );
}

[lcottingham]

Created a working fix in PR #11

The nuance may be that when the /components aren't built in isolation and are instead used directly within a theme, the flag --theme-dir="." may be causing the setup to miss the config files from detection. Happy to share my setup / use case if needed

[chrisberthe]

Thanks @lcottingham. You should be able to work around this by running shopify theme component dev --theme-dir="." --no-setup-files.

Can't recall if there was a specific reason why this isn't the default behavior when the theme-dir is specified. @t-kelly do you?

[lcottingham]

@chrisberthe ah - interesting! I solved an already solved problem 😆 Apologies, it wasn't immediately clear from the command doc, but I shall give it a go.

I am actually running a local verison of this plugin because I was hitting a fatal error when running along the lines of too many open files to watch. Looking at the watcher config, you're omitting dot files but nothing else. Folders like node_modules or bower_components are still being watched. I don't know if this was done by design, but more than 2 or 3 packages and the watcher falls over.

I have already fixed this issue with my local fork - I can raise a new PR for this if you'd like? It's a super-small tweak

[chrisberthe]

No worries. And maybe there's a way we can make this clearer for developers.

About the fatal error, could you open an issue with details on how to reproduce it? I haven't seen it myself and would like to try replicating. And yes, we're always open to PRs! :)

[lcottingham]

Sure, I'll try and do that today