目标环境不支持动态 import() 语法，因此无法在脚本中使用外部类型“模块”

Question

我刚刚创建了一个反应应用程序。

npm start

似乎工作正常，但

npm run build

总是失败。我需要运行

npm run build

将其部署到某个网站上。

已经浏览了

stackoverflow.com

上与此相关的所有帖子。但没有找到任何可行的解决方案。

import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'

import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';

错误信息

Failed to compile.

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script     

Answer 1

这里的问题是外部js文件的导入语句。

import 'https://kit.fontawesome.com/a076d05399.js';

您可以在index.html中添加文件并运行构建。

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

是的，CSS 中的 import 语句没有问题。

@import url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css");

Answer 2

就我而言，它失败了，因为使用了外部样式

import "https://unpkg.com/[email protected]/dist/leaflet.css";

通过 npm 修复：

npm i leaflet

import 'leaflet/dist/leaflet.css';

官方文档

Answer 3

要动态导入 ES 模块，您需要 将 webpack 的输出类型更改为 ESM。

或者，您可以尝试使用 webpackIgnore

忽略外部导入。

Answer 4

我也遇到了类似的问题，但有点奇怪。我得到：

⨯ external "react-hook-form" 目标环境不支持动态 import() 语法，因此无法在脚本中使用外部类型“模块”

但问题是“react-hook-form”不是外部的，实际上是在我的node_modules中，我这样使用它：

import { Controller, useForm, ValidationRule } from 'react-hook-form'; 我正在使用 NextJS 14，模块联盟 NextJs-MF 8.5.4

我已经为此苦苦挣扎了一周或更长时间，如果有人有想法，请告诉我。预先感谢。