RTL Support
I am getting this error when I run this command: npm run rtl
Failed to load '/Users/mohammedhamouda/Desktop/Work/AiiA/dots_frontend/rtl.config.js' config
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/mohammedhamouda/Desktop/Work/AiiA/dots_frontend/node_modules/del/index.js from /Users/mohammedhamouda/Desktop/Work/AiiA/dots_frontend/rtl.config.js not supported.
Instead change the require of index.js in /Users/mohammedhamouda/Desktop/Work/AiiA/dots_frontend/rtl.config.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/Users/mohammedhamouda/Desktop/Work/AiiA/dots_frontend/rtl.config.js:2:13) {
code: 'ERR_REQUIRE_ESM'
}
Replies (2)
i also have the same error when tying to run gulp --rtl
i tried creating rtl.config.js with the gist i found on this forum in another thread but than i get the following error
[webpack-cli] Failed to load '/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/rtl.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/rtl.config.js:1:14
at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
at async WebpackCLI.tryRequireThenImport (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:232:34)
at async loadConfigByPath (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:1406:27)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:1460:35)
at async WebpackCLI.createCompiler (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:1781:22)
at async WebpackCLI.runWebpack (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:1877:20)
at async Command.<anonymous> (/Users/shaimacbokprotw/Downloads/good_html_v1.1.3/tools/node_modules/webpack-cli/lib/webpack-cli.js:944:21)
Hi Mohammed Hamouda
Please use this updated rtl.config.js file. We will update it soon.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RtlCssPlugin = require("rtlcss-webpack-plugin");
// Define paths
const rootPath = path.resolve(__dirname);
const distPath = path.join(rootPath, "src/assets");
const entryPath = path.join(distPath, "sass/style.scss");
module.exports = {
mode: "development",
stats: "verbose",
performance: {
hints: "error",
maxAssetSize: 10000000,
maxEntrypointSize: 4000000,
},
entry: {
"css/style": entryPath,
},
output: {
path: distPath,
filename: "[name].js",
},
resolve: {
extensions: [".scss"],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].rtl.css",
}),
new RtlCssPlugin({
filename: "[name].rtl.css",
}),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
},
],
},
};
