Vue-cli: Configuration files not found when importing a file from outside the current project folder

[Aymkdn]

Version

3.0.3

Reproduction link

https://github.com/Aymkdn/vue-cli-error

Node and OS info

Node 8.11.4 / npm 5.6.0 / Windows 10

Steps to reproduce

My structure is the one below:

parent/
├── common/
|   ├── Example.vue
└── demo/
    ├── public/
    ├── src/
    |   └── App.vue
    ├── .browserlistrc
    ├── .eslintrc
    ├── babel.config.js
    ├── package.json
    ├── etc...

demo has been created with vue create demo. I use the default settings. I've only changed the src/App.vue file (see below)

In App.vue I'd like to refer the file parent/common/Example.vue (in code):

import Example from '../../common/Example.vue'

Then if I run npm run serve I receive the below error:

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.
    at Config.getLocalConfigHierarchy (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\config.js:255:39)
    at Config.getConfigHierarchy (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\config.js:179:43)
    at Config.getConfigVector (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\config.js:286:21)
    at Config.getConfig (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\config.js:329:29)
    at processText (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\cli-engine.js:163:33)
    at CLIEngine.executeOnText (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint\lib\cli-engine.js:620:17)
    at lint (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint-loader\index.js:237:17)
    at transform (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\eslint-loader\index.js:215:18)
    at C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\loader-fs-cache\index.js:127:18
    at ReadFileContext.callback (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\loader-fs-cache\index.js:31:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

I tried to ignore ESLint but then I receive an error from PostCSS :

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: No PostCSS Config found in: C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\src
    at config.load.then (C:\Users\aymkdn\Documents\PROJECTS\nodejs\proof\demo\node_modules\postcss-load-config\src\index.js:55:15)
    at <anonymous>

What is expected?

I'd assume it would use the current project's config files to import files from somewhere else.

So using the current ESLint and other configurations defined in the current project.

What is actually happening?

The program tries to find configuration files from the outside folder instead of using its own config files, and because it cannot find them it fails.

---

I need that because I have the same code I'll need to import for different projects.

The behavior is the same with a simple JS file.

I also tried with a webpack alias, but same error.

Thank you.

[Aymkdn]

Maybe it's just a configuration issue (a parameter somewhere that I missed), or maybe I should open an issue on eslint and postcss-load-config ?

While I'm waiting for some guidance, I did the below workaround.

I changed eslint/lib/config.js on line 284 from:

const directory = filePath ? path.dirname(filePath) : this.options.cwd;

to:

const directory = this.options.cwd;

I changed postcss-load-config/src/index.js on line 36 from:

  path = path ? resolve(path) : process.cwd()

to:

  path = process.cwd()

It's clearly not a good workaround, but at least it works for now...

[Akryum]

You can force ESLint to use a specific config with eslint-loader configFile option: https://github.com/webpack-contrib/eslint-loader#options

[Aymkdn]

Thanks Akryum for pointing me to the right direction!

Here is the required configuration in vue.config.js to avoid the issue :

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .tap(options => {
        options.configFile = path.resolve(__dirname, ".eslintrc.js");
        return options;
      })
  },
  css: {
    loaderOptions: {
      postcss: {
        config:{
          path:__dirname
        }
      }
    }
  }
}

[chriscdn]

I resolved this by placing a .eslintrc.json file in the root of my "common" module (which I linked into my project using yarn link.

[darrenjennings]

Getting this same issue for when I yarn link a dependency on my local:

 error  in /Users/darrenjennings/source/repos/kong-ui-plugin-audit-logs/pages/List.vue?vue&type=style&index=0&lang=css&

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: No PostCSS Config found in: /Users/darrenjennings/source/repos/kong-ui-plugin-audit-logs/pages
    at config.load.then (/Users/darrenjennings/source/repos/kong-ee-vagrant/kong-admin/node_modules/postcss-load-config/src/index.js:55:15)
    at <anonymous>

Adding a blank .postcssrc.js file to the linked module fixed it.

[wickkidd]

Just bumped into this after converting to yarn workspaces where the server side app and front end (vue) app are in subfolders. Thanks @Akryum for the tip and @Aymkdn for the example. It was a drop in 👍