0

I have this plugin version number in package.json file that I am trying to get but I was unable to import package.json. I am getting this error "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."

import React from "react";
import { withTaskContext } from "@twilio/flex-ui";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import DropDown from "../style/dropdown";
import packageJson from "/package.json";

class VoiceCallComponent extends React.Component {
...
...
console.logh("version number ", packageJson.version);
}

This is my package.json

{
  "name": "plugin-sample",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "postinstall": "flex-plugin pre-script-check"
  }
}

enter image description here

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Nui
  • 43
  • 5
  • Not really because I am not trying to get a react version number. But a plugin version number. – Nui Jan 11 '23 at 18:16
  • `import packageJson from "./package.json";` – Martin Jan 11 '23 at 18:23
  • @Martin I did that but I am ghettingh this error message in terminal "Failed to compile plugin plugin-sample. ./src/components/VoiceCallComponent.js Module not found: Can't resolve './package.json' in 'C:TwilioSampleplugin-samplesrccomponents'" – Nui Jan 11 '23 at 18:26

2 Answers2

1

I am not sure what you are trying todo. But maybe this helps you getting the version (using require here)

var packageJson = require('./package.json'); console.log(packageJson.version)

Edit: Does not work for react because of compiling. But I referenced a great working solution in the comments which also does not expose your package.json.

redacted
  • 71
  • 1
  • 5
  • Failed to compile plugin plugin-sample. ./src/components/VoiceCallComponent.js Module not found: Can't resolve './package.json' – Nui Jan 11 '23 at 18:35
  • 1
    I seen this might not work with react. But I found another user having a similar problem like you and that seems right. Check the accepted question. Their approach is better because they also not do expose the package.json itself. https://stackoverflow.com/questions/45978230/get-version-number-from-package-json-in-react-redux-create-react-app – redacted Jan 11 '23 at 18:40
0

If you're just looking to read the package.json into the project only once. You can use the bundler to define a constant that's automatically replaced with the configured value at compilation. Then you just import the package.json into the bundler's config file.

import package.json into bundler config:

import pkgJSON from "./package.json" // add to vite or webpack config

Vite define: vite.config.js:

export default {
// ...
  define: {
    "__PACKAGE_JSON_VERSION__": JSON.stringify(pkgJSON.version)
  }
// ...
}

Webpack DefinePlugin: webpack.config.js:

new webpack.DefinePlugin({
  "__PACKAGE_JSON_VERSION__": JSON.stringify(pkgJSON.version),
})

Then just use the constant in you components:

import React from "react";
import { withTaskContext } from "@twilio/flex-ui";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import DropDown from "../style/dropdown";

class VoiceCallComponent extends React.Component {
...
...
console.log("version number ", __PACKAGE_JSON_VERSION__);
}

Hope this helps.

Nyctfall
  • 71
  • 6