Why not possible to use ES imports in vue.config.js file with VueJS?

Question

Why aren't ES imports working in vue.config.js file?

In example:

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

Getting error after running npm run lint command (which uses vue-cli-service):

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:6

Also import 'path'; is not working either (tried also other syntax variants):

import 'path';
       ^^^^^^

SyntaxError: Unexpected string

The reason I'm trying to refactor from const path = require('path'); syntax is to avoid this new linter error after ESLint plugins upgrade:

Require statement not part of import statement. eslint(@typescript-eslint/no-var-requires)

But it seems I still need to append this on top of the file: /* eslint-disable @typescript-eslint/no-var-requires */

Possible duplicate https://stackoverflow.com/questions/39436322/node-js-syntaxerror-unexpected-token-import because node.js builds your app. — Sergey, Dec 18 '19 at 12:15
I'm aware there are similar questions specific to NodeJS, however I'm interested about this in the context of Vue CLI. — ux.engineer, Dec 18 '19 at 12:21
For example it seems using ES imports in Node is possible with enabling this experimental flag: https://nodejs.org/docs/latest-v12.x/api/esm.html#esm_enabling Using this just for vue.config.js file with Vue CLI may not be in the core team's interest, but I'm not aware of the internals of Vue CLI...perhaps it could have other uses as well. — ux.engineer, Dec 18 '19 at 12:23

score 5 · Answer 1 · answered Jun 27 '20 at 17:24

The file vue.config.js is loaded by @vue/cli-shared-utils/lib/module.js via CommonJS require. Because of that, it expects vue.config.js to be CommonJS, too.

There are a few schemes you could employ to overcome this built-in limitation such as using vue.config.js to

require('@babel/register');

then require another file like vue.config.mjs where your ESM-based code resides.

But given this is only a config file that usually doesn't have a lot of code, it may be better not to fight city hall and instead use CommonJS.

Why not possible to use ES imports in vue.config.js file with VueJS?

1 Answers1