"Cannot use import statement outside a module"

Hello!

I am building the inline editor from source and I have followed the documentation here https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-editor-from-source .

The page is responding with 500 Syntax Error stating "Cannot use import statement outside a module".

Prior to building from source, the editor was working with the default inline build, however that also did not allow import statements such as the following:

import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );

so we decided to use the component locally and implement require('') as such:

export default {
    components: {
      editor: process.client ? require('@ckeditor/ckeditor5-vue').component : {
        template: '<div></div>'
      }
    },
data () {
      return {

     ..........

        editor: require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
      };
   }
}

Although this worked, we decided we wanted to customize the plugins so we turned to building from source. During this process, we realized we can't avoid the import statements and use the require work-around as we did before.

I've tried every configuration mentioned in the docs, all with the same result.. please help! The following files are what I tried for using the component locally while building from source.

ckeditor.vue file (classes in template for styling not included)

<template>
  <div :class="{ 'inherited': inherited }" class="ckeditor">
    <editor v-model="model"
            :config="config"
            :data-main-heading="$attrs['data-main-heading']"
            :editor="editor"
            class="editor ck-content-authored"/>
  </div>
</template>

<script>
  import contentInput from 'components/contentEditor/mixins/contentInput';
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
  import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  import Image from '@ckeditor/ckeditor5-image/src/image';
  import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
  import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
  import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
  import Indent from '@ckeditor/ckeditor5-indent/src/indent';
  import InsertImage from './insertimage';
  import Link from '@ckeditor/ckeditor5-link/src/link';
  import List from '@ckeditor/ckeditor5-list/src/list';
  import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
  import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';

  export default {
    components: {
      editor: process.client ? require('@ckeditor/ckeditor5-vue').component : {
        template: '<div></div>'
      }
    },
    mixins: [contentInput],
    data () {
      return {
        config: {
          heading: {
            options: [
              {
                class: 'unstyled ck-heading_paragraph',
                model: 'paragraph',
                title: 'Paragraph <p>'
              },
              {
                class: 'unstyled ck-heading_heading1',
                model: 'heading1',
                title: 'Heading 2 <h2>',
                view: 'h2'
              },
              {
                class: 'unstyled ck-heading_heading2',
                model: 'heading2',
                title: 'Heading 3 <h3>',
                view: 'h3'
              },
              {
                class: 'unstyled ck-heading_heading3',
                model: 'heading3',
                title: 'Heading 4 <h4>',
                view: 'h4'
              }
            ]
          },
          plugins: [
            Essentials,
            Autoformat,
            Bold,
            Italic,
            BlockQuote,
            Heading,
            Image,
            ImageCaption,
            ImageStyle,
            ImageToolbar,
            InsertImage,
            Indent,
            Link,
            List,
            MediaEmbed,
            Paragraph,
            PasteFromOffice,
            TextTransformation
          ],
          toolbar: {
            items: [
              'heading',
              '|',
              'bold',
              'italic',
              'link',
              'bulletedList',
              'numberedList',
              '|',
              'indent',
              'outdent',
              '|',
              'insertImage',
              'blockQuote',
              'mediaEmbed',
              'undo',
              'redo'
            ]
          },
          image: {
            toolbar: [
              'imageStyle:full',
              'imageStyle:side',
              '|',
              'imageTextAlternative'
            ]
          }
        },
        editor: require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
      };
    }
  };
</script>

Custom Plugin insertimage.js file

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';

export default class InsertImage extends Plugin {
  init () {
    const editor = this.editor;

    editor.ui.componentFactory.add( 'insertImage', locale => {
      const view = new ButtonView( locale );

      view.set( {
        label: 'Insert image',
        icon: imageIcon,
        tooltip: true
      } );

      // Callback executed once the image is clicked.
      view.on( 'execute', () => {
        const imageUrl = prompt( 'Image URL' );

        editor.model.change( writer => {
          const imageElement = writer.createElement( 'image', {
            src: imageUrl
          } );

          // Insert the image in the current selection location.
          editor.model.insertContent( imageElement, editor.model.document.selection );
        } );
      } );

      return view;
    } );
  }
}

vue.config.js file (do I also need a webpack.config.js?)

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // The source of CKEditor is encapsulated in ES6 modules. By default, the code
    // from the node_modules directory is not transpiled, so you must explicitly tell
    // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
    transpileDependencies: [
        /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
    ],

    configureWebpack: {
        plugins: [
            // CKEditor needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin( {
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: 'en'
            } )
        ]
    },

    css: {
        loaderOptions: {
            // Various modules in the CKEditor source code import .css files.
            // These files must be transpiled using PostCSS in order to load properly.
            postcss: styles.getPostCssConfig( {
                themeImporter: {
                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                },
                minify: true
            } )
        }
    },

    chainWebpack: config => {
        // Vue CLI would normally use its own loader to load .svg files. The icons used by
        // CKEditor should be loaded using raw-loader instead.

        // Get the default rule for *.svg files.
        const svgRule = config.module.rule( 'svg' );

        // Then you can either:
        //
        // * clear all loaders for existing 'svg' rule:
        //
        //      svgRule.uses.clear();
        //
        // * or exclude ckeditor directory from node_modules:
        svgRule.exclude.add( __dirname + '/node_modules/@ckeditor' );

        // Add an entry for *.svg files belonging to CKEditor. You can either:
        //
        // * modify the existing 'svg' rule:
        //
        //      svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
        //
        // * or add a new one:
        config.module
            .rule( 'cke-svg' )
            .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
            .use( 'raw-loader' )
            .loader( 'raw-loader' );
    }
};

dependencies from package.json

  "dependencies": {
        "@nuxtjs/axios": "latest",
        "@nuxtjs/router-extras": "latest",
        "core-js": "latest",
        "lodash": "latest",
        "nuxt": "latest",
        "vee-validate": "latest",
        "vue-glide-js": "latest"
    },
    "devDependencies": {
        "@babel/runtime-corejs3": "latest",
        "@ckeditor/ckeditor5-autoformat": "^19.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^19.0.0",
        "@ckeditor/ckeditor5-block-quote": "^19.0.0",
        "@ckeditor/ckeditor5-core": "^19.0.0",
        "@ckeditor/ckeditor5-dev-utils": "13.0.1",
        "@ckeditor/ckeditor5-dev-webpack-plugin": "9.0.2",
        "@ckeditor/ckeditor5-editor-inline": "^19.0.0",
        "@ckeditor/ckeditor5-essentials": "^19.0.0",
        "@ckeditor/ckeditor5-heading": "^19.0.0",
        "@ckeditor/ckeditor5-image": "^19.0.0",
        "@ckeditor/ckeditor5-indent": "^19.0.0",
        "@ckeditor/ckeditor5-link": "^19.0.0",
        "@ckeditor/ckeditor5-list": "^19.0.0",
        "@ckeditor/ckeditor5-media-embed": "^19.0.0",
        "@ckeditor/ckeditor5-paragraph": "^19.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
        "@ckeditor/ckeditor5-table": "^19.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^19.0.0",
        "@ckeditor/ckeditor5-typing": "^19.0.0",
        "@ckeditor/ckeditor5-vue": "1.0.1",
        "babel-eslint": "latest",
        "body-parser": "latest",
        "eslint": "^6.0.0",
        "eslint-loader": "latest",
        "eslint-plugin-vue": "latest",
        "fibers": "latest",
        "node-fs-extra": "latest",
        "node-sass": "latest",
        "postcss-loader": "3.0.0",
        "raw-loader": "0.5.1",
        "rollup": "<3",
        "rollup-plugin-terser": "5.3.0",
        "sass": "latest",
        "sass-loader": "latest",
        "style-loader": "1.2.1",
        "vue-nestable": "latest",
        "webfont": "latest",
        "webpack": "4.43.0",
        "webpack-cli": "3.3.11"

ckeditor / ckeditor5-vue

"Cannot use import statement outside a module" #137