React项目中获取package.json版本号遇导入报错，如何解决？

算力阿峰

2026-8-4

解决React（Twilio Flex插件）导入package.json报错的问题

嘿，我来帮你搞定这个导入package.json时的报错问题～

报错原因

你遇到的这个错误：

"Module not found: You attempted to import /package.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."

是因为你的项目（看起来是基于Create React App规则的Twilio Flex插件）默认限制了只能从src/目录内导入文件，而package.json在项目根目录，超出了允许的范围，所以直接导入会触发这个限制。

解决方案

这里给你几个实用的解决办法，按需选择：

方案1：直接使用Node.js环境变量（最简单，推荐）

Node.js和npm会自动把package.json里的版本号注入到process.env.npm_package_version这个环境变量中，你不需要导入任何文件，直接在代码里使用即可：

修改你的代码：

删除这一行导入：

import packageJson from "/package.json";

把打印版本的代码改成：

console.log("version number ", process.env.npm_package_version);

这样就能直接拿到package.json里的1.0.0版本号了，完全不会有导入问题。

方案2：在src目录创建版本文件（适合需要更多package.json字段的情况）

如果你除了版本号，还需要package.json里的其他字段，可以在src/文件夹下新建一个version.js文件：

// src/version.js
export const APP_VERSION = "1.0.0";
// 可以同时导出其他需要的字段，比如APP_NAME
export const APP_NAME = "plugin-sample";

然后在你的组件里导入使用：

import { APP_VERSION } from "./version";

// 之后直接用
console.log("version number ", APP_VERSION);

如果想避免手动同步版本号，可以写个小脚本自动更新：

在项目根目录创建scripts/update-version.js文件：

const fs = require('fs');
const packageJson = require('../package.json');

const content = `export const APP_VERSION = "${packageJson.version}";
export const APP_NAME = "${packageJson.name}";
`;

fs.writeFileSync('./src/version.js', content);

修改package.json的scripts，让脚本在install或build时自动执行：

{
  "scripts": {
    "postinstall": "flex-plugin pre-script-check && node scripts/update-version.js",
    "prebuild": "node scripts/update-version.js"
  }
}

这样每次执行npm install或者npm run build时，version.js里的内容都会自动和package.json同步。

方案3：自定义Webpack配置（适合熟悉Webpack的场景）

如果你的项目允许自定义Webpack配置（Twilio Flex插件可以通过flex-plugin的配置扩展），可以用Webpack的DefinePlugin把版本号注入到全局：

在Webpack配置文件中添加：

const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
  // ...其他现有配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.APP_VERSION': JSON.stringify(packageJson.version)
    })
  ]
};

然后在代码里直接使用process.env.APP_VERSION就能拿到版本号了。

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