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 mand (which uses vue-cli-service):

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

SyntaxError: Unexpected token *
    at Module._pile (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 */

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 mand (which uses vue-cli-service):

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

SyntaxError: Unexpected token *
    at Module._pile (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 */

• javascript
• typescript
• vue.js
• webpack
• vue-cli

• 2 Possible duplicate stackoverflow./questions/39436322/… because node.js builds your app. – Sergei Commented Dec 18, 2019 at 12:15
• 2 I'm aware there are similar questions specific to NodeJS, however I'm interested about this in the context of Vue CLI. – ux.engineer Commented Dec 18, 2019 at 12:21
• For example it seems using ES imports in Node is possible with enabling this experimental flag: nodejs/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 Commented Dec 18, 2019 at 12:23

1 Answer 1

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 overe 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.