wangeditor5 Import and Run Error: You may need an appropriate loader to handle this file type (es6 compatibility issues)

Recently upgraded the rich text wangeditor used, I upgraded to the latest version of wangeditor5
Introduced wangeditor5 into the vue project, Starting the project has been reporting errors

You may need an appropriate loader to handle this file type 

At first, I tried many methods but failed to solve it, Later I noticed an error reported in the console， Guess it may be related to the writing method of  (…) in es6, So I will make a specific query later I took a look at the issue of compatibility with es6, I learned that webpack can only process a part of ES6 syntax, some more advanced ES6 syntax cannot be processed，Need to do compatibility processing.

 

Solution

1. Install the babel-polyfill es6-promise package

npm i babel-polyfill es6-promise --save

2. Add the following codes to main.js:

import 'babel-polyfill' //Note: This import should be before import Vue from 'vue'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

3. Add the following codes to webpack.base.conf.js:

module.exports = {
...
     entry: {
     app: ["babel-polyfill", "./src/main .js"]
     },
     ...
}

Because wangeditor5 is a third-party dependency, in node_modules, and babel-polyfill does not detect es6,  in node_modules, we need to add it manually.

Note：If you do not configure es6 compatibility for third-party dependencies，You can ignore the fourth step，You can run the startup project after the third step directly

4. In the webpack.base.conf.js file, modify the configuration of babel-loader, add a configuration item: resolve(‘node_modules/@wangeditor’ )(It needs to be modified according to the third-party dependencies actually introduced)

{
        test: /\.js$/,
        loader: 'babel-loader' ,
        include: [resolve('src'), resolve( 'test'), resolve('node_modules/@wangeditor' ), resolve('node_modules/webpack-dev-server/client')]
      },

Finally restart the project to be successful!