我在React.js中构建了一个可配置选项卡。我将所有选项卡传递到选项卡组件中，并构建选项卡和选项卡内容。我使用import( ${path} )动态加载选项卡中的组件。
useEffect(() => {
const path = '../Clock.tsx';
const loadComponent = async (index) => {
const componentModule = await import(`${path}`);
setComponent(() => componentModule.default);
};
loadComponent(activeTab);
}, [activeTab,props.tabs]);上面的代码给我错误'Error：找不到模块'../Clock. tsx'。如果我将导入代码更改为import('../Clock.tsx');，它将工作。
我做错了什么。Git参考代码：https://github.com/HimanshuK18/react-app/commit/90527c836ab1298b09550bcbb3d8aa41a5c1e843
2条答案
按热度按时间hivapdat1#
看看import（）中Webpack的动态表达式：
不可能使用完全动态的import语句，比如import（foo），因为foo可能是系统或项目中任何文件的路径。
import（）必须至少包含一些有关模块所在位置的信息。
当您这样导入时：
它呈现出这一点，这是不可能的：
之所以会遇到这个问题，是因为动态导入不包含有关时钟组件路径位置的直接信息。但是，
path变量（../）中包含路径信息，应该将其移动到import函数本身中。一个简单的解决方案是使用以下方法：
这里有一个example sandbox显示了这个行为，这里也有一个关于这个问题的讨论。
icnyk63a2#
我认为问题在于变量的名称。
请尝试使用此：
如果你把
path作为一个变量传入模板字符串，它会认为变量内容包含了单引号，从而导致错误发生。