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"