How can I customize import paths in Embeddable?

FAQs
1

In Embeddable, you can customize your import paths (e.g. have absolute paths in your React components) and add path aliases.

To enable this, you need to add it in two places:

// embeddable.config.ts

{
     ...
      viteConfig: {
        resolve: {
          alias: {
            "@/custom-alias": path.resolve(__dirname, "src/custom-alias"),
          },
        },
      },
    }

// tsconfig.json (TypeScript configuration file placed in the root of the repository)

{
  "compilerOptions": {
    ...
    "paths": {
      "@/custom-alias/*": ["src/custom-alias/*"]
    }
  }
}

And finally, this will enable imports like

import SomeComponent from "@/custom-alias/Component"

Additionally, the following is required for __dirname and to work in the path.resolve(__dirname, '../src/components') :

import path from 'path'; import { fileURLToPath } from 'url'; // Get the equivalent of __dirname for ES modules const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename);