# How can I customize import paths in Embeddable?

**URL:** <https://community.embeddable.com/t/how-can-i-customize-import-paths-in-embeddable/75>\
**Category:** FAQs\
**Created:** [September 17, 2024, 2:27pm UTC](https://community.embeddable.com/t/how-can-i-customize-import-paths-in-embeddable/75 "2024-09-17T14:27:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ella-embeddable](https://dub1.discourse-cdn.com/flex013/user_avatar/community.embeddable.com/ella-embeddable/32/15_2.png) [@ella-embeddable](https://community.embeddable.com/u/ella-embeddable)\
**Post date:** [September 17, 2024, 2:27pm UTC](https://community.embeddable.com/t/how-can-i-customize-import-paths-in-embeddable/75/1 "2024-09-17T14:27:14Z")

</div>

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:

```auto
// embeddable.config.ts

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

```

```auto
// 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

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

```

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

```auto
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);

```