Alternatives to deprecated Webpack's i18n plugin and loader - javascript

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

Related

Can we disable some 'css-' class names that MUI is injecting onto it's components? (Next JS & MUI)

So yesterday, I've just migrated my create-react-app project over to Next JS using the latest version currently out there (12.1.0), following the guide at https://nextjs.org/docs/migrating/from-create-react-app. I am also using MUI still (as before I migrated) using some of the below packages:
"#mui/icons-material": "^5.3.0",
"#mui/lab": "^5.0.0-alpha.62",
"#mui/material": "^5.3.0",
Apart from ironing out a few of the issues in the last 24 hours, I am coming across a new issue where I have noticed that ALL of my 'MuiButton' components used around my site now contain a new CSS class name (which so far appears to be out of my control and injected on it somehow). For example, a button in my menu navigation now contains css-1w1rijm-MuiButtonBase-root-MuiButton-root (as seen below) at the very end of the class attribute.
<button class="MuiButton-root MuiButton-navigation MuiButton-navigationPrimary MuiButton-sizeMedium MuiButton-navigationSizeMedium MuiButtonBase-root HeaderOptsstyle__OptionButton-sc-pfmh6j-3 elnHDd css-1w1rijm-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" aria-label="my account">
This wouldn't be a problem really if there were no CSS styles being applied to this class name, however that is unfortunately the case. It appears that there are lots of styles being imported from somewhere which is overriding my theme I have set up in my global 'createTheme'.
Already been digging around the web for any reason as to why this has suddenly started happening since the migration, but I'm not seeing any clear reasons here and wonder if anyone can help me to understand this, or what needs to be done to prevent this from interfering with my own styles.
I know this was NOT happening on my CRA before migration as my staging server has not been re-deployed since and it currently does NOT contain any of the 'css-' classes on the same buttons, and the MUI versions have not changed since.
Apologies if I'm lacking any information to help assist with this, but happy to provide any bits if asked.
My package.json dependancies and devDependencies are also seen below.
"#chec/commerce.js": "^2.8.0",
"#date-io/date-fns": "^1.3.13",
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.3.0",
"#mui/lab": "^5.0.0-alpha.62",
"#mui/material": "^5.3.0",
"#types/date-fns": "^2.6.0",
"babel-plugin-styled-components": "^2.0.3",
"date-fns": "^2.28.0",
"dotenv": "^8.2.0",
"embla-carousel-react": "^2.0.3",
"hex-rgb": "^5.0.0",
"hex-rgba": "^1.0.2",
"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
"moment": "^2.29.1",
"next": "latest",
"react": "17.0.2",
"react-app-polyfill": "^2.0.0",
"react-datepicker": "^4.4.0",
"react-dom": "17.0.2",
"react-hook-form": "^7.26.0",
"react-redux": "^7.2.4",
"react-uuid": "^1.0.2",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"rgb-hex": "^4.0.0",
"string-strip-html": "^9.1.5",
"styled-components": "^5.2.1"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#babel/preset-react": "^7.12.13",
"#babel/register": "^7.12.13",
"#svgr/webpack": "^6.2.1",
"#zeit/next-sass": "1.0.1",
"babel-loader": "^8.2.2",
"babel-plugin-transform-imports": "^2.0.0",
"node-sass": "7.0.1"
},```
The issue is that your styling engine (emotion) and MUI are competing on what styles to apply when a css selector has the same level of specificity. To solve this you need to explicitly setup emotion to prepend the styles so that the stylesheets you write take precedence over MUI. MUI has further instructions here.

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.

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

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, .....)

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!

Babel / Webpack: Cannot find "yaml-loader" (works in development, not production)

Here's the offending line of code:
import Channel from '!json-loader!yaml-loader!../../../../config/channel.yml'
As you can see, I'm using !s to bypass the normal import loader logic so I can import the parsed YAML file as a local variable at compile-time.
This works perfectly in development (with webpack-dev-server) but fails in production:
Module not found: Error: Can't resolve 'yaml-loader' in '/var/www/www.avfacts.org/releases/20180205125420/app/frontend/views/Episodes'
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Form.vue 87:0-78
# ./app/frontend/views/Episodes/Form.vue
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/routes.js
# ./app/frontend/packs/application.js
Here's my package.json file:
{
"name": "avfacts",
"private": true,
"dependencies": {
"#panter/vue-i18next": "^0.9.1",
"#rails/webpacker": "^3.2.1",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"babel-preset-minify": "^0.2.0",
"i18next": "^10.3.0",
"lodash": "^4.17.4",
"luxon": "^0.4.0",
"marked": "^0.3.12",
"moment": "^2.20.1",
"moment-duration-format": "^2.2.1",
"normalize.css": "^7.0.0",
"numeral": "^2.0.6",
"precss": "^3.1.0",
"simplemde": "^1.11.2",
"vue": "^2.5.13",
"vue-datetime": "^1.0.0-beta.2",
"vue-loader": "^13.7.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1",
"weekstart": "^1.0.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"webpack-dev-server": "^2.11.1",
"yaml-loader": "^0.5.0"
}
}
(and yes, I did try moving yaml-loaders from devDependencies to dependencies even though that shouldn't work, and it did indeed not work)
Have you added loader in your webpack.config.js .
// webpack.config.js
module: {
loaders: [
{
test: /\.yaml$/,
include: path.resolve('data'),
loader: 'yaml',
},
],
}
As its been mentioned in https://www.npmjs.com/package/yaml-loader
EDIT: Nope, that wasn't it. I replaced yaml-loader with yaml-js-loader and called it a day. Still not sure what the problem was.
This problem was seemingly fixed by disabling require 'capistrano/rails/assets in my Capfile, thus disabling the normal Rails Sprockets asset compilation (this task also runs yarn install, but apparently in a different environment or something?).
Now only the capistrano/yarn tasks run, which perform the Webpack asset compilation successfully.

Categories