Cannot import Typescript files from outside of 'dir' directory

[lbittner-pdftron]

Bug report

When using a custom server, trying to import a .ts file from outside of the dir directory results in the following error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

To Reproduce

1. Create a custom server and set the 'dir' to something other than the root.

// server.ts

const app = next({
  dev: true,
  dir: path.resolve(__dirname, './src')
});

2. Create a different .ts file outside of ./src

3. Create a page and try to import the .ts file outside of ./src

// src/pages/index.tsx

import config from '../../config'

Expected behavior

The file is imported correctly with no errors

System information

• OS: macOS
• Next.js 9.1.4

Additional context

I am using ts-node to execute the server file.

[Timer]

Hello! Next.js does not support importing assets from outside of your base directory.

This includes JavaScript files, which won't be transformed by Babel.

Maybe we can add a slightly friendlier error message here.

[lbittner-pdftron]

Ok, I didn't realize this.

I think it would be nice to be able to have more flexibility in my project structure. One change that would be nice would to be able to specify where the 'pages' directory is, rather than just the whole base directory (I'm sure theres a reason this isn't currently possible - but it would be nice!).

Maybe something like:

const app = next({
  dev: true,
  dir: path.resolve(__dirname, './src'),
  pages: path.resolve(__dirname, './src/client/pages')
});

Thanks anyways!

[timneutkens]

@lbittner-pdftron we're not going to allow that, this has been discussed many times before: #4315

[jacobrask]

You can solve this by organising your code with Yarn workspaces.

Config could be a separate @app/config npm package that you import in your application. You can then use next-transpile-modules: withTranspileModules({ transpileModules: ['@app/config'] }) if you want to use the same transpilation settings as your Next.js application.

[cyrus-za]

I am getting this same error when using an npm package that is not compiled to js. Any help with this would be great

System information
OS: macOS
Next.js 9.1.5

[BrennanColberg]

I agree with @Timer—there should be a much friendlier error message here. Just spent a few hours debugging this... my first instinct was to dig into the TS-related webpack/babel config, which leads on a series of rabbit trails orthogonal to the simple problem of file location

[xiaoxinghu]

Another use case of this would be to have a monorepo where mobile and web project sharing the same logic, but without making that sharable code a "repo" itself. Reason for doing that is some tools (react native) don't like symlinks created by yarn workspaces, or multiple instances of the same dependency (e.g. react, react-native) without symlinks. So it could make things a lot easier to just have a folder of files sitting outside of any repo, and just grab them if you need them by import { Auth } from '../shared/components'.

[cyrus-za]

next-transpile-modules should do the trick.

[Timer]

If anyone wants to try to tackle this you can look at how we do CSS here:

next.js/packages/next/build/webpack/config/blocks/css/index.ts

Lines 152 to 167 in 792a113

	// Throw an error for CSS Modules used outside their supported scope
	fns.push(
	loader({
	oneOf: [
	{
	test: [regexCssModules, regexSassModules].filter(Boolean),
	use: {
	loader: 'error-loader',
	options: {
	reason: getLocalModuleImportError(),
	},
	},
	},
	],
	})
	)

[timneutkens]

#13542 solves this issue I think

[jeantil]

#13542 solves this issue I think

It does partially : if tsconfig declares a baseUrl that's a parent of the file being imported.

[desmap]

@timneutkens congrats! This long awaited feature finally works BUT it does not recompile on change of above-cwd files.

Is it important? IDK man. I'd say yes and you should make it a top prio on your roadmap. fwiw, we just trashed Next for all of our packages except some dumb seo/leadgen sites because of the subpar interoperability with other systems.

With proper code sharing, being DRY and multiple front end entities you just cant put everything into a Next folder (maybe for some hobby sites). Monorepos and project references are the new normal and Next should obey and recompile on change of any imported file within baseUrl.

related #5666

[tx46]

Still having some issues with this. Please have a look at this issue: #20374

Editing the realpathSync condition (#20374 (comment)) makes this work as expected (and prevents the weird bugs + hard crashes).

[enhancement-ventures]

This would be very useful for us as well, as we have a monorepo with different applications where we want to share logic defined within Typescript files between them.

[tx46]

This would be very useful for us as well, as we have a monorepo with different applications where we want to share logic defined within Typescript files between them.

Please look at this issue for workaround and insight:

#20374

I have a monorepo with Next.js for the frontend working.

[maybeast]

👍 would be nice to get this fixed.

[delimmy]

+1 would be super useful for monorepos and DRY

[tcarrio]

If anyone needs this right now, it is available as an experimental feature in 10.1.2.

An example next.config.js would be

module.exports = {
  experimental: {
    externalDir: true,
  },
}

[jasonsilberman]

Any update on when something solving this might land? It seems like a pretty big use case to have a monorepo with multiple next.js frontends that want to share code.

I feel like having a "blessed" solution to monorepos and having an example would be super helpful for a lot of people.

[matamatanot]

@jasonsilberman
You can use experimental.externalDir#22867.
I've been using this config in a monorepo environment for about a month now and have no problems.

[timneutkens]

This has been solved by the new experimental feature. Created a thread for collecting feedback. Please leave feedback there: #26420

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.