Webpack.config.js: Configuration has an unknown property 'default' - javascript

I've moved everything over from a working project (ultimate-hot-reloading-example), to an existing project of mine that uses the keystone cms. I uninstalled ALL dev dependencies in my project, and installed all of the exact dependencies in the working project into mine (webpack, babel, etc...).
For some reason, the web.config.js file won't parse the es6 syntax
export default
Which gives this error:
- configuration has an unknown property 'default'.
If I switch to the following, it works:
const config = ...
module.exports = config;
Elsewhere in my project, I use other es6 syntax and it works...
Here's the dependencies in package.json, which works perfectly with the example project with the 'export default' syntax.
"dependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.2",
"chokidar": "^2.0.3",
"css-loader": "^0.28.11",
"css-modules-require-hook": "^4.0.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.8.1",
"express": "^4.14.0",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-hot-loader": "^4.1.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.12.1",
"webpack-node-externals": "^1.7.2"
Any idea why this would happen?

I had a similar problem which turned to be my improper migration from require(...) to import(...)
I replaced this code:
const common = require("./webpack.common");
module.exports = merge(common, {...})
with:
const common = await import("./webpack.common.js");
export default merge(common, .....)
The problem was that I didn't use the default export from webpack.common.js. The fix is:
const common = await import("./webpack.common.js");
export default merge(common.default, .....)

Related

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.

Alternatives to deprecated Webpack's i18n plugin and loader

I'm working on a TypeScript project that needs to load translations from .json files, the intention is to have a single language file per country. Example: en.json, es.json.
Then I should to be able to use the translations inside .ts files with some function like __('red') or as other extensions offer.
Then the final compiled .js files should contain all translations to switch the language on "real-time".
The content of the json files could be something like:
es.json
{
"colors": {
"red": "rojo",
"blue": "blue"
}
}
It seems that the current recommended (on the documentation) i18n loader and plugin for Webpack are deprecated:
Plugin: I18nWebpackPlugin
Loader: I18nLoader
I want to know if is safe to use this extensions or there are some available options out there for my case, I tried i18next and i18next-loader but it doesn't seem to work on my current setup, it seems to be something related to how modules import process work. So maybe another lightweight alternatives that support Webpack + TypeScipt could solve this issue.
This is my current package.json dependencies
{
"dependencies": {
"animate.css": "^3.7.2",
"i18next": "^19.1.0",
"intl-tel-input": "^16.0.8",
"uniq": "^1.0.1"
},
"devDependencies": {
"#alienfast/i18next-loader": "^1.1.4",
"#babel/core": "^7.7.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^10.0.0",
"browserify": "^16.5.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"gulp": "^4.0.2",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.2.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
How about this?
#zainulbr/i18n-webpack-plugin
This is forked from the original i18n-webpack-plugin and fixed to support webpack5.
The usage is still same with the original unmaintained repository.
Have you tried webpack-localize-assets-plugin?
It has Webpack 5 support and has a few advantages over the deprecated i18n-webpack-plugin:
first-class support for multiple locales
able to read locales from JSON path so you can watch and rebuild on change
able to report unused string keys

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.

ES6 - Import modules from project root directory (babel/node/npm)

Before I continue, I have tried the following solutions:
Git: Babel plugin root import package: Plugin doesn't seem to work alongside jest
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack aliasing is another solution however we don't use webpack
A project was handed over to me recently which utilizes relative import statements that can get pretty long and obscure (e.g. import * as stuff from '../../../../../utilities/stuff'). I'd like to simplify our import statements using the project's root directory in this fashion: import * as stuff from '~/utilities/stuff.
My understanding of the packages, dependencies and configurations is still in its infancy. It looks like we use babel for transpiling, however I don't see a core babel package - only babel-jest and babel-polyfill.
Here is our package.json:
{
"name": "placeholder",
"version": "0.1.0",
"private": true,
"dependencies": {
"animejs": "^2.2.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"html-to-react": "^1.3.0",
"htmlparser2-react": "0.0.4",
"js-csp": "^1.0.1",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-aria-menubutton": "^5.0.2",
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-rte": "^0.11.0",
"react-sidebar": "^2.3.2",
"react-toasts": "^1.2.3",
"react-transition-group": "^2.2.0",
"react-virtualized": "^9.9.0",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"sweetalert": "^2.0.8",
"text-spinners": "^1.0.5",
"uuid": "^3.1.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"enzyme": "^2.9.1",
"jest-enzyme": "^3.8.2",
"materialize-css": "^0.100.2",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"node-sass-chokidar": "0.0.3",
"node-sass-magic-importer": "^5.0.0-alpha.6",
"react-docgen": "^2.18.0",
"react-scripts": "1.0.13",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.3.0",
"xhr-mock": "^1.9.1"
}
}
And .babelrc
{
"presets": ["react-app"],
"sourceMaps": true,
"retainLines": true
}
Our directory structure is as follows: <rootDir>/src where all js/jsx source files are contained within 'src'. This is the directory I'd like to configure to be the root (represented by a tilda (~)). Help would be greatly appreciated!

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

Categories