Include file from outside of the project root

[ghost]

According to the docs:

If your build contains multiple entry points in separate directories, the directory structure will be replicated into the output directory starting from the lowest common ancestor directory among all input entry point paths. For example, if there are two entry points src/home/index.ts and src/about/index.ts, the output directory will contain home/index.js and about/index.js. If you want to customize this behavior, you chould change the outbase directory.

Full context: I'm refactoring svelte-typewriter codebase, it's essentially composed by the library source code on the root directory, and a example subdirectory with a demo Svelte project for testing purposes with the following directory structure:

.
├── build.js
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── rollup.config.js
├── src
│   ├── App.svelte
│   ├── components
│   │   ├── TypewriterControls.svelte
│   │   └── TypewriterMode.svelte
│   ├── index.js
│   └── pages
│       ├── Cascade.svelte
│       ├── Default.svelte
│       ├── Loop.svelte
│       └── LoopRandom.svelte
└── yarn.lock

I'm building the Svelte component with the following config:

await esbuild.build({
	entryPoints: ['./src/index.js'],
	platform: 'browser',
	bundle: true,
	format: 'esm',
	splitting: true,
	outbase: './',
	outdir: 'public/build',
	plugins: [sveltePlugin()]
})

When i try to import ./src/Typewriter.svelte from ./example/src/components/TypewriterControls.svelte, esbuild end up including unnecessary files/folders from root directory (like example, and src), is there any viable way to import a file from outside of the project folder, and build it with outdir without replicating the whole directory structure of the imported file parent directory?

---

Edit: i even tried including outbase in the config as pointed in the docs, but with no luck, i received the following error:

Cannot traverse from directory "../src/helpers" to chunk "chunk.34VXZT2I.js"

I'm not 100% sure of what could be happening here, but i suspect that it might have something to do with the *.js files imported by the Svelte component not being able to properly import their modules

[evanw]

There are enough details here that I'm not sure exactly what's going on. For example, some of the files in https://github.com/henriquehbr/svelte-typewriter use paths that start with @example/ and esbuild doesn't have built-in logic to resolve those. Would it be possible for you to provide a way for me to reproduce this issue, such as a branch in your repo that includes the esbuild script and any other necessary packages?

[ghost]

Of course, this branch contains the whole project structure for reproducing the bug in question

Just for clarification, both build scripts are called build.js, and contains the configuration for building the example Svelte app in example/src/App.svelte and the library in src/Typewriter.svelte, respectively

I thought about cloning the Typewriter.svelte component to the example directory every time it is built, but in a Rollup context, this wasn't needed, so i thought it would be cool to see if such behavior could also be achieved with esbuild without doing some hacks

Many thanks for your time and support!

---

Edit: about the @example/, they're specified in the paths fields of both tsconfig.json (for the library) and jsconfig.json for the example Svelte app

[evanw]

Thanks. I can reproduce the issue. It looks like esbuild is expecting all entry points to be inside the outbase directory but with this setup, some of the entry points are outside the outbase directory. This is because the dynamic import() expressions in src/modes/index.ts generate additional entry points. I hadn't considered this possibility when I accepted the PR that added outbase.

When esbuild generates the output path for a bundled entry point, it computes the relative path from outbase to the input entry point file and then joins that relative path to the output directory. If the entry point isn't under the outbase directory then that would cause esbuild to try to write the output file outside of the output directory (if the build had succeeded). That's obviously not good.

What are you expecting the output directory to look like in this case? The generated output paths look something like this (if .. was a valid directory name):

public/build/../src
public/build/../src/helpers
public/build/../src/helpers/index.js
public/build/../src/modes
public/build/../src/modes/loopTypewriter.js
public/build/../src/modes/typewriter.js
public/build/chunk.34VXZT2I.js
public/build/chunk.EET7KLGS.js
public/build/chunk.R77EYHP3.css
public/build/chunk.SNO4HFOA.js
public/build/src/index.js
public/build/src/pages
public/build/src/pages/Cascade.js
public/build/src/pages/Default.js
public/build/src/pages/Loop.js
public/build/src/pages/LoopRandom.js

I can't just remove the leading ../ from the relative path because that might cause a collision with something else. For example, both src/index.js and ../src/index.js might exist. I suppose I could replace it with .._/ or something. That appears to be a valid directory name on Unix and Windows. Yeah, I should probably just do that.