Understanding import maps
The import map is a component in the Content SDK's architecture that enables the code generation feature within the Design studio. It manages the imports of the generated components during the build process, ensuring that the generated code references the correct modules and paths.
Import maps are only available in Content SDK 1.1 or later.
Import map generation
At build time, the Content SDK generates an import map file and places it at .sitecore/import-map.ts. This file acts as a registry of available components and their import paths, which the code generation feature uses to resolve imports in the generated component code. Without this step, the system would not be able to correctly process or reference components in the generated output.
The import map generation is triggered via the sitecore.cli.config.ts configuration file. By default, the process is invoked with the following function call:
writeImportMap({
paths: ['src/components'],
scConfig,
}),This setup scans the specified directories (e.g., src/components) for components to include in the import map.
Client, server import maps and App Router
Next JS App Router applications generates two import maps by default: import-map.server.ts and import-map.client.ts. This enables component generation for both server and client components in SitecoreAI Design studio.
The server import map is applied via the DesignLibraryApp component, while the client variant is applied via SitecoreContext to ensure smooth rendering of generated components in both contexts.
Customize and extend import maps
The import map generation process is customizable to fit various project structures and requirements.
You can extend the paths array to scan multiple directories, making more components available for code generation:
writeImportMap({
paths: ['src/components', 'src/other-components'],
scConfig,
}),To prevent certain components from being included in the import map, use the exclude parameter:
writeImportMap({
paths: ['src/components'],
exclude: ['*ExcludedComponent*'],
scConfig,
}),Opt out of code generation
By default, code generation is enabled in the Content SDK. If your project does not require this feature, you can disable it by adding the following setting to your sitecore.config.ts file:
export default defineConfig({
...
disableCodeGeneration: true,
...
});