next.js 为 webpackConfig.resolve 加载 tsconfig.json。见：
当app-2中的一个组件导入import Component from "components/Component"等其他组件时，webpack根据app-1/tsconfig.json解析components/Component。
解决方案：为app-2 添加resolve plugin。
-
app-1/tsconfig.json:
{
//...
"compilerOptions":{
//...
"paths": {
"@apps/*": ["../app-2/*"],
"components/*": ["./components/*"]
},
}
}
-
app-2/tsconfig.json:
{
//...
"compilerOptions":{
//...
"paths": {
"components/*": ["./components/*"]
},
}
}
-
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;
},
};
-
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;
}
}
};