We Keep Coding

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

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??

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.

Eslint error, configuration for rule "import/no-cycle" is invalid

Running my lint script "lint": "eslint --ext .js .", gives me this error:
Error: .eslintrc » eslint-config-airbnb » //node_modules/eslint-config-airbnb-base/index.js » //node_modules/eslint-config-airbnb-base/rules/imports.js:
Configuration for rule "import/no-cycle" is invalid:
Value "∞" should be integer.
Package.json:
"devDependencies": {
"#babel/core": "7.9.0",
"#babel/runtime": "7.9.2",
"#babel/parser": "7.11.5",
"#react-native-community/eslint-config": "1.0.0",
"babel-eslint": "10.1.0",
"babel-jest": "25.2.3",
"babel-plugin-module-resolver": "4.0.0",
"babel-preset-react-native": "4.0.1",
"bluebird": "3.7.2",
"catharsis": "0.8.11",
"cross-env": "7.0.2",
"escape-string-regexp": "2.0.0",
"eslint": "6.8.0",
"eslint-config-airbnb": "18.1.0",
"eslint-config-react-native": "4.0.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "3.0.0",
"eslint-plugin-react-native": "3.8.1",
"husky": "4.2.3",
"jest": "25.2.3",
"jest-fetch-mock": "3.0.3",
"jest-junit": "10.0.0",
"jest-transform-stub": "2.0.0",
"js2xmlparser": "4.0.1",
"jsdoc": "3.6.6",
"klaw": "3.0.0",
"markdown-it": "10.0.0",
"markdown-it-anchor": "5.2.7",
"marked": "0.8.2",
"metro-react-native-babel-preset": "0.59.0",
"mkdirp": "1.0.4",
"node": "12.10.0",
"npm-check": "5.9.2",
"react-test-renderer": "16.13.1",
"redux-mock-store": "1.5.4",
"requizzle": "0.2.3",
"strip-json-comments": "3.1.0",
"taffydb": "2.6.2",
"underscore": "1.10.2"
},

According to this thread https://github.com/airbnb/javascript/issues/2331#issuecomment-724114465
you need to update eslint-plugin-import to ^2.22.1 which supports ∞ value.

sharing here what i found that resolved this issue.
all the peer dependencies were installed and correct version, however this error was still showing up.
I changed the node_modules/eslint-config-airbnb-base/rules/imports.js "∞" to an integer to continue debugging. Next run showed this error, ESLint couldn't determine the plugin "import" uniquely., which was the underlying problem. it turns out that eslint loads all configs from ancestor directories as described here, https://github.com/eslint/eslint/issues/13385#issuecomment-641252879.
I added "root":true to the .eslint config file and converted the update to the node_modules/eslint-config-airbnb-base/rules/imports.js. it now runs. hope it helps others.

Upgrading to Babel-loader 8 from 7? What do I need to change?

I am trying to upgrade from 7 to version 8. But I am running into some errors.
I think I need to upgrade some stuff but not sure what
This is what I have for my packages(I removed plugins that have no bearing on my problem)
"dependencies": {
"babel-plugin-emotion": "^9.2.5",
"babel-polyfill": "^6.26.0",
"http-proxy-middleware": "^0.18.0",
"koa-connect": "^2.0.1",
"koa-router": "^7.4.0",
"koa2-connect-history-api-fallback": "0.0.6",
"npm": "^6.1.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-emotion": "^9.2.5",
"react-responsive-modal": "^3.3.0",
"react-router-dom": "^4.2.2",
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mobx-react-router": "^4.0.4",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
}
I have in my .baelrc
{
"presets": ["env", "react"],
"plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}
I see that I need to upgrade stuff like babel-core, preset-env, preset-react but I am not sure what else.
I get this error
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
Edit my newest configs(it now seems to work)
.babelrc
{
"presets": ["#babel/env", "#babel/react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-transform-object-assign",
"#babel/plugin-proposal-object-rest-spread",
"transform-class-properties"
]
}
package.json
"dependencies": {
"#babel/polyfill": "^7.0.0",
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
}

All plugins are moved to #babel scope with Babel 7. To update your package.json, you need to rename all your plugins and presets accordingly, using the ^7.0.0 version.
You can find all the official plugins here.
If you open up a plugin that interests you, you will see that all of them are renamed to, for example: #babel/plugin-proposal-class-properties.
babel-polyfill => #babel/polyfill
babel-core => #babel/core
babel-plugin-transform-class-properties => #babel/plugin-proposal-class-properties
you get the idea. babel- is now #babel/ and some plugins are prefixed with proposal.
babel-plugin-emotion is of course not an official plugin so it stays the same, as well as babel-loader. For all other plugins make sure to compare the names with the new naming on the link provided above. Open each plugin's folder to see the new name beginning with #babel/.
The same naming now applies to .babelrc file (or babel config in general), and I suggest you do not use the shorthand naming but include the full package nam of plugins and presets in your babel config:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
// ...
}
Hope this helps! Cheers.

Why are packages in my yarn.lock but not in my package.json?

I started this project with create-react-app and then ejected. I'm currently analyzing my webpack bundle and I get this.
I ran this command to analyze my bundle -
source-map-explorer main.<hash>.js main.<hash>.js.map
I have a couple of questions -
I use moment.js in my application, however when looking at my package.json, it is not there. It does exist in my yarn.lock. Why is this happening? Why does my application even work?
I use lodash, but I have taken care to import specific lodash functions (import map from "lodash/map", for example). However, I see lodash in my node_module..despite never having imported it. Why is this working? Is it because a dependency of mine has a dependency on the whole lodash package and I'm just getting lucky?
How do I get source-map-explorer to analyze my production build? I tried the steps in the CRA documentation, but they error.
Why is the above happening?
For full reference here is my package.json's dependencies/devDependencies.
{
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"cross-env": "5.1.4",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"query-string": "^5.1.0",
"raf": "3.4.0",
"react": "^16.2.0",
"react-collapse": "^4.0.3",
"react-countdown-now": "^1.3.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.2.0",
"react-grecaptcha": "^1.2.5",
"react-md-spinner": "^0.2.5",
"react-motion": "^0.5.2",
"react-player": "^1.1.1",
"react-redux": "^5.0.6",
"react-responsive": "^4.0.3",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "^1.2.0",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"xelpmoc-core": "^0.3.1"
},
"devDependencies": {
"compression-webpack-plugin": "^1.1.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.14.0",
"eslint-config-recommended": "^2.0.0",
"eslint-plugin-react": "^7.5.1",
"google-map-react": "^0.34.0",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"pm2": "^2.9.1",
"prettier": "^1.9.2",
"redux-mock-store": "^1.4.0"
},
}

yarn.lock is a "lockfile" which locks down your dependency tree so that when another teammate (or CI server) runs the build it gets the same dependencies (and thus the same build). The lockfile lists not just dependencies but deps of deps.
NPM/yarn flattens dependencies in node_modules when possible so you probably have some dependencies which are installing lodash/moment. You can debug this by running npm ls lodash to see where it's coming from. You should definitely install those packages that you are using but you've gotten "by accident".
I can't answer #3

No compatible version found: babel-plugin-transform-decorators#^6.13.0

Apparently all out of sudden, I get the following error when I run npm install:
npm ERR! No compatible version found: babel-plugin-transform-decorators#^6.13.0
npm ERR! Valid install targets:
npm ERR! 6.8.0, 6.6.5, 6.6.4, 6.6.0, 6.5.0, 6.5.0-1, 6.4.0, 6.3.13, 6.2.4, 6.1.18, 6.1.17, 6.1.10, 6.1.5, 6.1.4, 6.0.14, 6.0.2
I have the following dependencies in package.json. I have tried updating the babel packages to the latest versions, as well as installing babel-plugin-transform-decorators#6.13.0, but still I get this error.
Does anybody know why, have a solution or face the same issues?
It seems to me from this page that the 6.13.0 version was published 14 hours ago. However, npm install babel-plugin-transform-decorators installs the previous version of that package (6.8.0). Isn't the 6.13.0 available yet?
I use Node 6.0.0 on Windows, and npm 3.8.6.
Thanks in advance!
{
"babel": "6.3.26",
"babel-core": "6.5.2",
"babel-cli": "^6.7.7",
"babel-loader": "6.2.3",
"babel-polyfill": "6.6.1",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.3.13",
"babelify": "7.2.0",
"browserify": "13.0.0",
"chai-enzyme": "0.4.2",
"chai-jquery": "2.0.0",
"cheerio": "0.20.0",
"deep-freeze": "0.0.1",
"enzyme": "2.2.0",
"express": "4.13.4",
"fetch": "1.0.1",
"http-proxy": "1.13.2",
"immutable": "3.7.6",
"isomorphic-fetch": "2.2.1",
"jquery": "2.2.1",
"jsfmt": "0.5.3",
"moment": "2.11.2",
"path": "0.12.7",
"react": "0.14.7",
"react-document-title": "2.0.1",
"react-dom": "0.14.7",
"react-redux": "4.4.0",
"react-router": "2.0.0",
"react-router-redux": "4.0.0",
"react-scroll": "1.0.3",
"redux": "3.3.1",
"redux-form": "4.2.0",
"redux-thunk": "2.0.1",
"request": "2.69.0",
"scroll-behavior": "0.3.2",
"sinon": "1.17.3",
"webpack": "1.12.13",
"whatwg-fetch": "0.11.0",
"chokidar": "git+https://github.com/paulmillr/chokidar.git#1.4.2"
}

I thought you had a wrong cache in your ~/.npm directory. This kind of issue can be fixed by npm cache clear.

Now it works, without any changes, so it might just be that babel-plugin-transform-decorators wasn't available at npm ... ?