--- title: Using G6 with IE order: 12 --- In this section, we will introduce the usage of 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: img ### 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: img New a vue.config.js file in the same directory of package.json, and add `transpileDependencies`: img The value of `transpileDependencies` is `[]` by default, which means no Babel with all the node_modules files. Now, we add the files should be Bable into `transpileDependencies` as below. Note that the dependencies to be added **should not contain node_modules, and use the package name @antv/g6**. The reason is that the @vue/cli will add the prefix node_modules 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 node_modules. ```javascript module.exports = { transpileDependencies: ['@antv/g6'], }; ``` Open the project with IE11 to see the result: img 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. ```javascript module.exports = { sourceType: 'unambiguous', presets: ['@vue/cli-plugin-babel/preset'], }; ``` Compile it again: img 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.
img 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. img