blocks|key|814044|text|在vite.config.js中添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|814045|resolve:+{
++++alias:+{
++++++'./runtimeConfig':+'./runtimeConfig.browser',
++++},
}|code-block|syntax|javascript|814046|在定义字段中|814047|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In vite.config.js add:
<pre><code>resolve: {
 alias: {
 './runtimeConfig': './runtimeConfig.browser',
 },
}
</code></pre>
in define field

blocks|key|800583|text|AWS+SDK中React多填充的工作配置及扩容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|800584|import+{+defineConfig+}+from+"vite";
import+react+from+"@vitejs/plugin-react";
import+rollupNodePolyFill+from+"rollup-plugin-node-polyfills";
//+https://vitejs.dev/config/
export+default+defineConfig({
++plugins:+[react()],
++optimizeDeps:+{
++++esbuildOptions:+{
++++++//+Node.js+global+to+browser+globalThis
++++++define:+{
++++++++global:+"globalThis",+//<--+AWS+SDK+
++++++},
++++},
++},
++build:+{
++++rollupOptions:+{
++++++plugins:+[
++++++++//+Enable+rollup+polyfills+plugin
++++++++//+used+during+production+bundling
++++++++rollupNodePolyFill(),
++++++],
++++},
++},
++resolve:+{
++++alias:+{
++++++'./runtimeConfig':+'./runtimeConfig.browser',+//+<--+Fix+from+above
++++},
++}
});|code-block|syntax|javascript|800585|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Working config for React polyfilled for AWS SDK and Amplify
<pre><code>import { defineConfig } from &quot;vite&quot;;
import react from &quot;@vitejs/plugin-react&quot;;
import rollupNodePolyFill from &quot;rollup-plugin-node-polyfills&quot;;
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [react()],
 optimizeDeps: {
 esbuildOptions: {
 // Node.js global to browser globalThis
 define: {
 global: &quot;globalThis&quot;, //&lt;-- AWS SDK 
 },
 },
 },
 build: {
 rollupOptions: {
 plugins: [
 // Enable rollup polyfills plugin
 // used during production bundling
 rollupNodePolyFill(),
 ],
 },
 },
 resolve: {
 alias: {
 './runtimeConfig': './runtimeConfig.browser', // &lt;-- Fix from above
 },
 }
});
</code></pre>

blocks|key|800594|text|对于“‘请求’不是由__vite-浏览器-外部导出”的问题，只需安装http包(例如'npm+i+http')|type|unstyled|depth|inlineStyleRanges|entityRanges|data|800595|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

For the issue &quot;'request' is not exported by __vite-browser-external&quot;, just install the http package (e.g 'npm i http')

blocks|key|398108|text|当使用别名数组时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398109|++resolve:+{
++++alias:+[
++++++{
++++++++find:+'@',+replacement:+path.resolve(__dirname,+'./src'),
++++++},
++++++{
++++++++find:+'./runtimeConfig',+replacement:+'./runtimeConfig.browser',
++++++}

++++]
++}|code-block|syntax|javascript|398110|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

when using an array of aliases.
<pre class="lang-js prettyprint-override"><code>
 resolve: {
 alias: [
 {
 find: '@', replacement: path.resolve(__dirname, './src'),
 },
 {
 find: './runtimeConfig', replacement: './runtimeConfig.browser',
 }

 ]
 }

</code></pre>

blocks|key|398112|text|这类问题的根本原因似乎是aws-amplify+JS依赖于特定于Node的特性。有两种解决办法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|398113|要解决像'xxxxx'+is+not+exported+by+__vite-browser-external这样的错误，将./runtimeConfig的附加别名添加到vite.config.ts文件中。所以它看起来就像：|ordered-list-item|398114|alias:+{
++++++"@":+fileURLToPath(new+URL("./src",+import.meta.url)),
++++++'./runtimeConfig':+'./runtimeConfig.browser',
++++},|code-block|syntax|javascript|398115|要解决像Uncaught+ReferenceError:+global+is+not+defined这样的错误，请在最顶层html文件(index.html)中声明相应的全局变量。|398116|<script>
++++var+global+=+global+%7C%7C+window;
++++var+Buffer+=+Buffer+%7C%7C+[];
++++var+process+=+process+%7C%7C+{
++++++env:+{+DEBUG:+undefined+},
++++++version:+[]
++++};
</script>|398117|github已经发行了一年多了：https://github.com/aws-amplify/amplify-js/issues/9639|398118|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/aws-amplify/amplify-js/issues/9639^0|C|B|0|4|1E|1P|F|2C|E|0|0|4|1A|1W|A|0|0|G|1H|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|H|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1H|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|T|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

It appears root cause of this type of issue is that <code>aws-amplify</code> JS lib is relying on Node specific features. There is a two part workaround:
<ol>
<li>To solve errors like <code>'xxxxx' is not exported by __vite-browser-external</code> add additional alias for <code>./runtimeConfig</code> to the <code>vite.config.ts</code> file. So it will look something like:</li>
</ol>
<pre><code>alias: {
 &quot;@&quot;: fileURLToPath(new URL(&quot;./src&quot;, import.meta.url)),
 './runtimeConfig': './runtimeConfig.browser',
 },
</code></pre>
<ol start="2">
<li>To solve error like <code>Uncaught ReferenceError: global is not defined</code>, declare corresponding global variable in your topmost html file (<code>index.html</code>)</li>
</ol>
<pre><code>&lt;script&gt;
 var global = global || window;
 var Buffer = Buffer || [];
 var process = process || {
 env: { DEBUG: undefined },
 version: []
 };
&lt;/script&gt;
</code></pre>
There is github issue open for more than a year now: <a href="https://github.com/aws-amplify/amplify-js/issues/9639" rel="nofollow noreferrer">https://github.com/aws-amplify/amplify-js/issues/9639</a>

my question is quite simple to explain. I've initialized a React project with ViteJS and then added aws-amplify for the backend. I developed the project and everything works in my local environment running npm run dev. The problem is that I cannot build it.
You can see the error in the text below. Do you have any idea?
<blockquote>
'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
</blockquote>
<a href="https://i.stack.imgur.com/7U6eR.png" rel="nofollow noreferrer">Error logs</a>

Build problem with React viteJS and was amplify

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我的问题很容易解释。我已经用ViteJS初始化了一个React项目，然后为后端添加了aws放大。我开发了这个项目，一切都在运行npm的本地环境中工作。问题是我不能建造它。您可以在下面的文本中看到错误。你有什么想法吗？‘请求’不是由__vite-浏览器-外部导出的，而是由node_modules/@aws-sdk/cre...

问构建问题与反应viteJS，并被放大
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构建问题与反应viteJS，并被放大EN