Svelte项目配置环境变量时出现__myapp is not defined错误如何解决

• @rollup/plugin-replace v4.0及以上版本默认开启了preventAssignment规则，未显式配置该参数时会限制全局标识符的替换，导致代码里的__myapp没有被正确替换为注入的配置对象
• 插件执行顺序错误：如果replace插件放在svelte插件之后，svelte会先把组件编译为JS代码，replace没有机会替换组件内的__myapp标识符
• 键名不匹配：你在配置里注入的环境变量键是amplitude_api_key，但调用时写的是API_KEY，就算注入成功也无法读取到对应值
• .env文件加载失败：文件没有放在项目根目录，或文件名、配置键名拼写错误，会导致process.env读不到对应值

1. 修正rollup.config.js配置，调整插件顺序，补充必要参数，统一键名：

import { config as configDotenv } from 'dotenv';
import replace from '@rollup/plugin-replace';
import svelte from 'rollup-plugin-svelte';

configDotenv();

export default {
  // 保留原有入口、输出等配置
  plugins: [
    // replace插件必须放在svelte插件之前执行
    replace({
      preventAssignment: true,
      __myapp: JSON.stringify({
        env: {
          isProd: production,
          // 统一键名，和后续调用的字段保持一致
          API_KEY : process.env.amplitude_api_key
        } 
      })
    }),
    svelte({/* 保留你原有的svelte插件配置 */}),
    // 保留其他原有插件配置
  ]
}

2. 确认项目根目录存在.env文件，内容格式正确：

amplitude_api_key=你实际的API密钥值

3. 代码调用时严格匹配键名：

const apiKey = __myapp.env.API_KEY

4. 排查时可以直接查看编译后的打包JS文件，搜索__myapp字段，如果没有被替换为具体的JSON对象，再回头核对插件配置和执行顺序即可。

内容的提问来源于stack exchange，提问作者Sefi_k