使用export * as xxx语法Webpack打包报错但编辑器无提示

我尝试重新导出一个包含100余个SVG图标的图标模块，相关代码及构建错误如下：

自动生成的图标模块JS文件 #

// This file is automatically generated
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

var check = {
  name: 'check',
  data: '<svg>...</svg>'
}
exports.check = check

组件模块中的重新导出代码 #

export * as IconsModel from '@org/styles/icons/icon.model';

计划的导入使用方式 #

import { IconsModel as icons } from '@org/components/icons';

编辑器无错误提示，但Webpack构建时出现以下错误：

Module parse failed: Unexpected token (5:7)
File was processed with these loaders:
 * ./node_modules/@skyux-sdk/istanbul-instrumenter-loader/dist/index.js
 * ./node_modules/@storybook/angular/node_modules/ts-loader/index.js
 * ./node_modules/@storybook/angular/dist/ts3.9/server/ngx-template-loader/index.js
You may need an additional loader to handle the result of these loaders.
> export*as IconsModel from'@org/styles/icons/icon.model';
 @ ./stories/components/accordion/accordion.stories.ts 16:0-70 37:36-47
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js

问题分析与解决方法 #

export * as X from 'module' 是ES2020引入的语法特性，你的构建环境（TypeScript版本、Webpack/loader配置）可能未支持该语法，导致解析失败。

方案一：使用兼容的导出语法 #

替换原来的重新导出代码为：

import * as IconsModel from '@org/styles/icons/icon.model';
export { IconsModel };

导入方式保持不变即可正常使用。

方案二：升级构建环境支持ES2020语法 #

• 修改tsconfig.json，确保compilerOptions.target设为ES2020或更高，module设为ESNext或Webpack兼容的模块格式
• 检查并升级ts-loader、Webpack及相关依赖的版本，确保它们支持ES2020语法特性

内容的提问来源于stack exchange，提问作者Get Off My Lawn