Reputation: 1
It seems after build my react app works well in chrome 38 version. But, after moving to mono repo structure, same code not working in chrome 38 after build and looks like some part for code I see not transpiled to ES5 to support chrome 38 and most of the code migrated to var but I see some part of main.js file, const and arrow functions are there an. I am not sure where I missed the logic.
overrides.config.js
const path = require("path");
module.exports = {
webpack: (config) => {
// Babel loader modification
const babelLoader = config.module.rules.find(
(rule) =>
rule.oneOf &&
rule.oneOf.some((r) => r.loader && r.loader.includes("babel-loader"))
);
if (babelLoader) {
babelLoader.oneOf.forEach((rule) => {
if (rule.loader && rule.loader.includes("babel-loader")) {
rule.include = [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "../../packages/shared-components/src"),
];
rule.exclude = /node_modules/; // Exclude only dependencies, not shared components
rule.test = /\.(js|jsx)$/; // Ensure it processes .js and .jsx files
rule.options = {
...rule.options,
presets: [
[
"@babel/preset-env",
{
targets: {
chrome: "38", // For Chrome 38 compatibility
},
useBuiltIns: "entry", // Load entire polyfills upfront
corejs: 3, // Ensure CoreJS polyfills
modules: false, // Retain ES6 modules
},
],
[
"@babel/preset-react",
{
runtime: "automatic", // Enable the new JSX runtime
},
],
],
plugins: [
"@babel/plugin-transform-runtime", // Async/await, generators
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-private-methods",
"@babel/plugin-transform-private-property-in-object",
],
};
}
});
}
// SCSS loader modification
const sassRule = config.module.rules.find((rule) =>
Array.isArray(rule.oneOf)
);
if (sassRule) {
sassRule.oneOf.forEach((loader) => {
if (
loader.test &&
loader.test.toString().includes("scss") &&
loader.use
) {
loader.use.forEach((use) => {
if (use.loader && use.loader.includes("sass-loader")) {
use.options = {
...use.options,
// additionalData: @import "~@assets/styles/mixins.scss";,
// Uncomment the next line for resolving paths dynamically
additionalData: `@import "${path.resolve(
__dirname,
"src/assets/styles/mixins.scss"
)}";`,
};
}
});
}
});
}
config.output = {
...config.output,
environment: {
arrowFunction: false, // Disable arrow functions
const: false, // Use var instead of const
forOf: false, // Disable for-of loops (which require ES6+)
destructuring: false, // Disable destructuring
},
};
return config;
},
};
postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["Chrome >= 38"],
}),
require("cssnano")(),
require("postcss-preset-env")({
browsers: "Chrome 38",
stage: 3,
}),
],
};
Webpack.config.js
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer({
overrideBrowserslist: ["Chrome >= 38"], // Specify browser versions
}),
postcssPresetEnv({
// Explicitly target Chrome 38 (webOS 3.0)
browsers: ["Chrome >= 38"],
stage: 3, // Choose the stage based on the level of features you want to support
}),
cssnano(), // Minify CSS for better performance
],
},
},
},
],
},
],
},
};
Upvotes: 0
Views: 19