Radhakrishnan Y
Radhakrishnan Y

Reputation: 1

I'm doing mono repo setup for my existing react apps using yarn workspaces and CRA, but build code not converted to ES5 to support chrome 38

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

Answers (0)

Related Questions