TypeError: Cannot read property 'version' of undefined at Dotenv.apply

user_11477003 0
Viewed 765

Hello i am trying to set up environmental variables in my react app. I am building in from ground with webpack 4 and babel. After adding dotenv-webpack plugin to webpack.config i got this error

TypeError: Cannot read property 'version' of undefined
    at Dotenv.apply (C:\Users\vrana\Documents\codeproject\musicapp\client\node_modules\dotenv-webpack\dist\index.js:65:38)
    at WebpackCLI.webpack (C:\Users\vrana\Documents\codeproject\musicapp\client\node_modules\webpack\lib\webpack.js:51:13)
    at WebpackCLI.createCompiler (C:\Users\vrana\Documents\codeproject\musicapp\client\node_modules\webpack-cli\lib\webpack-cli.js:1678:29)
nt\node_modules\@webpack-cli\serve\lib\index.js:67:30)
    at async Promise.all (index 1)
    at async Command.<anonymous> (C:\Users\vrana\Documents\codeproject\musicapp\client\node_modules\webpack-cli\lib\webpack-cli.js:1120:13)

This is my devDependencies from package.json

 "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "css-loader": "^5.0.2",
    "dotenv-webpack": "^7.0.1",
    "error-overlay-webpack-plugin": "^0.4.2",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^1.3.8",
    "react-hot-loader": "^4.13.0",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

Someone know how to fix this??

webpack reactjs node.js environment-variables javascript
1 Answers

I had a similar issue and it disappeared after I have updated webpack to 5.25. Not sure about actual reason but I've already seen issues when components don't play nicely with the specific version of webpack so it seems to me it's just as frustrating dev experience as it gets. Anyways here's dev dependencies from my project

  "devDependencies": {
    "copy-webpack-plugin": "4.5.1",
    "css-loader": "4.3.0",
    "dotenv-webpack": "7.0.1",
    "style-loader": "1.2.1",
    "ts-loader": "8.0.1",
    "webpack": "5.25.0",
    "webpack-bundle-analyzer": "4.4.0",
    "webpack-cli": "4.5.0"
  }

Also, note I don't use caret symbol (^). IMO it gives better control over what package versions you actually run.

user_113063920
Related