0

I am trying to fix NextJS app for to work in IE11. I use webpack and babel. In Chrome and other modern browsers app is working fine, but on IE11 a get an error point to js arrow function. I am using next.config.js file and .babelrc. I have similar project working on IE11,it uses nextjs version 8.0.3, and this that dont work 9.2.0.

Here is my package.json file

"dependencies": {
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^13.4.0",
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.0",
    "babel-plugin-universal-import": "^4.0.0",
    "chalk": "^3.0.0",
    "classnames": "^2.2.6",
    "compression": "^1.7.4",
    "contentful-management": "^5.9.0",
    "css-loader": "^3.2.0",
    "dotenv-webpack": "^1.7.0",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "isomorphic-style-loader": "^5.1.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.9.0",
    "next": "^9.2.0",
    "next-compose-plugins": "^2.2.0",
    "next-offline": "^4.0.0",
    "nextjs-sitemap-generator": "^0.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-markdown": "^4.0.6",
    "react-redux": "^7.1.1",
    "react-slick": "^0.25.2",
    "react-universal-component": "^4.0.0",
    "readdirp": "^3.0.1",
    "redux": "^4.0.4",
    "sass-loader": "^8.0.0",
    "slick-carousel": "^1.8.1",
    "style-loader": "1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4",
    "@zeit/next-sass": "^1.0.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.2.0",
    "dotenv": "^6.2.0",
    "eslint": "^5.14.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^22.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^5.0.2",
    "husky": "^3.0.9",
    "jest": "^24.1.0",
    "node-sass": "^4.12.0",
    "sass-lint": "^1.13.1",
    "stylelint": "^9.10.1",
    "stylelint-config-recommended": "^2.1.0"

Here is my .babelrc file

{
  "presets": [
    "next/babel",
   
  ],
  "plugins": [
    "universal-import"
  ]
}

...and finally my next.config.js file

webpack: (config, { dev, isServer }) => {
        config.module.rules.push({
            test: /\.s?css$/,
            use: [
                isServer ? MiniCssExtractPlugin.loader : 'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                    },
                },
                'sass-loader',
            ],
        });

        config.module.rules.push({
            test: /\.(woff(2)?|ttf|eot|svg|gif)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                    },
                },
            ],
        });

        config.plugins.push(new MiniCssExtractPlugin());

        return {
            ...config,
            devtool: dev ? 'source-map' : '',
        };
    },

I am new to webpack and babel working together so if anyone could help I would appreciate.

Pokreniseweb
  • 165
  • 3
  • 16
  • Does this answer your question? [babel-preset-env not transpiling arrow functions using webpack](https://stackoverflow.com/questions/51669441/babel-preset-env-not-transpiling-arrow-functions-using-webpack) – Giorgio Tempesta Jul 01 '21 at 16:04

3 Answers3

1

You can try to add in your package.json

  "browserslist": [
    "defaults"
  ]

and add a loader like the following in your next.config.js

{
    test: /\.js$/,
    use:
    {
        loader: 'babel-loader',
        options:
        {
            presets: ['@babel/preset-env']
        }
    }
}
PedroZorus
  • 661
  • 1
  • 6
  • 21
0

If somebody still has the same problems compiling es6 to es5 in ie11, I want to suggest my solution. It worked for me(i use next.js 11 version, last at the moment). I tried many solutions, but none of them helped me. As a matter of fact, next.js has all configurations for webpack 5 and babel to transpile es6 to es5, and you don't need to change anything (if you don't believe me(and I hope so), you can check it, as I did it. use cmd npx create-next-app and create arrow function. Everything works well!) So the solution is to replace file node_modules\auto-bind\index.js to the following one:

'use strict';

// Gets all non-builtin properties up the prototype chain
const getAllProperties = function (object) {
const props = new Set();

do {
    var keys = Reflect.ownKeys(object);
    for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        props.add([object, key]);
    }
} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);

return props;
};

module.exports = function (self, options) {
options = Object.assign({}, options);

const filter = function (key) {
    const match = function (pattern) {
        return typeof pattern === 'string' ? key === pattern : pattern.test(key);
    }

    if (options.include) {
        return options.include.some(match);
    }

    if (options.exclude) {
        return !options.exclude.some(match);
    }

    return true;
};
let objprops = getAllProperties(self.constructor.prototype)
for (let i = 0; i < objprops.length; i++) {
    let object = objprops[i].object;
    let key = objprops[i].key;
    if (key === 'constructor' || !filter(key)) {
        continue;
    }

    const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
    if (descriptor && typeof descriptor.value === 'function') {
        self[key] = self[key].bind(self);
    }
}

return self;
};

const excludedReactMethods = [
'componentWillMount',
'UNSAFE_componentWillMount',
'render',
'getSnapshotBeforeUpdate',
'componentDidMount',
'componentWillReceiveProps',
'UNSAFE_componentWillReceiveProps',
'shouldComponentUpdate',
'componentWillUpdate',
'UNSAFE_componentWillUpdate',
'componentDidUpdate',
'componentWillUnmount',
'componentDidCatch',
'setState',
'forceUpdate'
];

module.exports.react = function (self, options) {
options = Object.assign({}, options);
options.exclude = (options.exclude || []).concat(excludedReactMethods);
return module.exports(self, options);
};

I forgot one thing. After you change the file, execute "npm run build" to clear the folder next.

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Pavel_A
  • 1
0

I don't know which version of Webpack is used in Next: if your version uses Webpack 5, you need to specify the features that you want to transpile in the ouput.environment configuration, as explained here: https://webpack.js.org/configuration/output/#outputenvironment.

output: {
  // ... other configs
  environment: {
    // The environment supports arrow functions ('() => { ... }').
    arrowFunction: false,
  },
}

If you are using differential serving (serving different bundles based on the browser environment) you can pass a variable instead of the boolean.

Giorgio Tempesta
  • 1,816
  • 24
  • 32