next.js carga tsconfig.json para webpackConfig.resolve . Ver:

Cuando un componente en app-2 importa otros componentes como import Component from "components/Component" , webpack resuelve los components/Component de acuerdo con app-1/tsconfig.json .

Solución: agregue un resolve plugin para app-2 .

1. app-1/tsconfig.json :

 { //... "compilerOptions":{ //... "paths": { "@apps/*": ["../app-2/*"], "components/*": ["./components/*"] }, } }

2. app-2/tsconfig.json :

 { //... "compilerOptions":{ //... "paths": { "components/*": ["./components/*"] }, } }

3. app-1/next.config.js :

 const path = require("path"); // fork from `@craco/craco/lib/loaders.js` function getLoaderRecursively(rules, matcher) { let loader; rules.some((rule) => { if (rule) { if (matcher(rule)) { loader = rule; } else if (rule.use) { loader = getLoaderRecursively(rule.use, matcher); } else if (rule.oneOf) { loader = getLoaderRecursively(rule.oneOf, matcher); } else if (isArray(rule.loader)) { loader = getLoaderRecursively(rule.loader, matcher); } } return loader !== undefined; }); return loader; } const MyJsConfigPathsPlugin = require("./MyJsConfigPathsPlugin"); const projectBBasePath = path.resolve("../app-2"); const projectBTsConfig = require(path.resolve( projectBBasePath, "tsconfig.json" )); module.exports = { webpack(config) { const projectBJsConfigPathsPlugin = new MyJsConfigPathsPlugin( projectBTsConfig.compilerOptions.paths, projectBBasePath ); config.resolve.plugins.unshift({ apply(resolver) { resolver .getHook("described-resolve") .tapPromise( "ProjectBJsConfigPathsPlugin", async (request, resolveContext) => { if (request.descriptionFileRoot === projectBBasePath) { return await projectBJsConfigPathsPlugin.apply( resolver, request, resolveContext ); } } ); }, }); // get babel-loader const tsLoader = getLoaderRecursively(config.module.rules, (rule) => { return rule.test?.source === "\\.(tsx|ts|js|mjs|jsx)$"; }); tsLoader.include.push(projectBBasePath); return config; }, };

4. MyJsConfigPathsPlugin.js :

 // fork from `packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts` const path = require("path"); const { // JsConfigPathsPlugin, pathIsRelative, matchPatternOrExact, isString, matchedText, patternText, } = require("next/dist/build/webpack/plugins/jsconfig-paths-plugin"); const NODE_MODULES_REGEX = /node_modules/; module.exports = class MyJsConfigPathsPlugin { constructor(paths, resolvedBaseUrl) { this.paths = paths; this.resolvedBaseUrl = resolvedBaseUrl; } async apply(resolver, request, resolveContext) { const paths = this.paths; const pathsKeys = Object.keys(paths); // If no aliases are added bail out if (pathsKeys.length === 0) { return; } const baseDirectory = this.resolvedBaseUrl; const target = resolver.ensureHook("resolve"); const moduleName = request.request; // Exclude node_modules from paths support (speeds up resolving) if (request.path.match(NODE_MODULES_REGEX)) { return; } if ( path.posix.isAbsolute(moduleName) || (process.platform === "win32" && path.win32.isAbsolute(moduleName)) ) { return; } if (pathIsRelative(moduleName)) { return; } // If the module name does not match any of the patterns in `paths` we hand off resolving to webpack const matchedPattern = matchPatternOrExact(pathsKeys, moduleName); if (!matchedPattern) { return; } const matchedStar = isString(matchedPattern) ? undefined : matchedText(matchedPattern, moduleName); const matchedPatternText = isString(matchedPattern) ? matchedPattern : patternText(matchedPattern); let triedPaths = []; for (const subst of paths[matchedPatternText]) { const curPath = matchedStar ? subst.replace("*", matchedStar) : subst; // Ensure .d.ts is not matched if (curPath.endsWith(".d.ts")) { continue; } const candidate = path.join(baseDirectory, curPath); const [err, result] = await new Promise((resolve) => { const obj = Object.assign({}, request, { request: candidate, }); resolver.doResolve( target, obj, `Aliased with tsconfig.json or jsconfig.json ${matchedPatternText} to ${candidate}`, resolveContext, (resolverErr, resolverResult) => { resolve([resolverErr, resolverResult]); } ); }); // There's multiple paths values possible, so we first have to iterate them all first before throwing an error if (err || result === undefined) { triedPaths.push(candidate); continue; } return result; } } };

puede usar la configuración de babel de la siguiente manera.

Use el complemento de resolución de módulos.

Para instalar: yarn add -D babel-plugin-module-resolver

y siga este archivo de configuración.

 module.exports = { presets: [], //Keep your preset as it is plugins: [ [ 'module-resolver', { root: ['./src'], extensions: ['.js', '.jsx', '.json', '.svg', '.png', '.tsx'], // Note: you do not need to provide aliases for same-name paths immediately under root alias: { "@apps/app-2": '../../app-2/src', }, }, ], ], };