Problem

Recently, we received some feedbacks about usage of G6 in IE. Some users found there are some display problems when using G6 in IE.

Solution

Import babel-polyfill into your project:

• Import babel-polyfill in your main entrance file;
• Add some code into bable-loader:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('node_modules/@antv/g6')]
}

include indicates the directories of the .js files should to be babel-loader; exclude represents the directories of .js files should not to be babel-loader。

The content of include should be assigned according to your project.

Refer to The Link for more detail.

In addition, there are some solutions for the projects with @vue/cli, umi, and create-react-app. First, ensure your project can be ran on IE without G6.

You may find the error:

vue/cli

The G6 Vue Demo is based on @vue/cli(V: 4.0.5). There will be some small differences to the 3.x version. Now, we are going to solve the compatibility issues of @vue/cli.
First, we find the document on Vue Official Website, which points out the problem of browser compatibility:

New a vue.config.js file in the same directory of package.json, and add transpileDependencies:

The value of transpileDependencies is [] by default, which means no Babel with all the nodemodules files. Now, we add the files should be Bable into transpileDependencies as below. Note that the dependencies to be added **should not contain nodemodules, and use the package name @antv/g6**. The reason is that the @vue/cli will add the prefix nodemodules automatically. The @antv/g6 must be same consistent to that in package.json. Use npm while installing the dependencies. If you are using yarn or cnpm, you should make sure that there are no modified package name in nodemodules.

module.exports = {
  transpileDependencies: ['@antv/g6'],
};

Open the project with IE11 to see the result:

The original error is solved, but new problem shows up. Open the project with Chrome, you can find the same error. The compatibility issue has been solved by adding transpileDependencies. We find a solution in the issues of Vue: add sourceType: "unambiguous" to babel.config.js, which can be refered to the official website of Vue for the definition.

module.exports = {
  sourceType: 'unambiguous',
  presets: ['@vue/cli-plugin-babel/preset'],
};

Compile it again:

Now, the prolem is solved.

create-react-app

If you are using create-react-app(V: 3.0.0) to initiate your project, create-react-app has built in the solution for compatibility. You only need to configure the compatibility of the project by several methods. Please refer to HERE.

If you want to figure out the inner solving process, run npm run eject or yarn run eject to check the inner configurations of create-react-app. This operation is irreversible.