Vue-cli: Error about workspaces(multi packages) and cli-plugin-e2e-cypress

[duduluu]

Version

3.0.4

Reproduction link

https://github.com/duduluu-contrib/vue-cli-bug00

Node and OS info

node v10.11.0 / yarn 1.9.4 / OS WSL ubutun18.04

Steps to reproduce

clone the repo and checkout branch with-e2e-cypress
go into the project 'packages/ts' directory and run yarn serve

What is expected?

Expect cli-service serve and build work fine, but not.

What is actually happening?

duduluu @ duduluu-i7 : /mnt/w/me/vue-cli-bug00/packages/ts (with-e2e-cypress)
$ yarn serve
yarn run v1.9.4
$ vue-cli-service serve --open
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 94% after seal

 ERROR  Failed to compile with 1 errors                                                                    3:46:35 PM

Failed to resolve loader: babel-loader
You may need to install it.                                                                           Type checking and linting in progress...
No type errors found
No lint errors found
Version: typescript 3.0.3, tslint 5.11.0
Time: 3392ms

duduluu @ duduluu-i7 : /mnt/w/me/vue-cli-bug00/packages/ts (with-e2e-cypress)
$ yarn build
yarn run v1.9.4
$ vue-cli-service build

⠙  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠦  Building for production...

 ERROR  Failed to compile with 1 errors                                                                    3:58:37 PM

Failed to resolve loader: babel-loader
You may need to install it.
 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

There is a branch without-e2e-cypress, the cli-service work fine on serve and build.

[duduluu]

This only happens when the project is in workspaces.

Some times it will Error: Cannot find module '@babel/parser', it may be about other plugins, but I cannot reproduce at present.

[duduluu]

the error about @babel/parse and postcss
at branch 'babel-parse-and-postcss'

duduluu @ duduluu-i7 : /mnt/w/me/vue-cli-bug00/packages/ts (babel-parse-and-postcss *)
$ yarn serve
yarn run v1.9.4
$ vue-cli-service serve --open
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 94% after seal

 ERROR  Failed to compile with 2 errors                                                                    4:10:07 PM

 error  in ./src/views/Home.vue?vue&type=script&lang=ts&

Module build failed (from /mnt/w/me/vue-cli-bug00/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/parser'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at _parser (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/parse.js:19:16)
    at parseWithCodeFrame (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/parse.js:145:16)
    at parseAndBuildMetadata (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/parse.js:43:15)
    at buildLiteralData (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/literal.js:53:35)
    at literalTemplate (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/literal.js:20:7)
    at Function.ast (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/template/lib/builder.js:52:42)
    at maybeCreateConstructor (/mnt/w/me/vue-cli-bug00/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:196:58)
    at buildBody (/mnt/w/me/vue-cli-bug00/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:212:5)
    at classTransformer (/mnt/w/me/vue-cli-bug00/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:648:5)
    at transformClass (/mnt/w/me/vue-cli-bug00/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:697:10)
    at PluginPass.ClassExpression (/mnt/w/me/vue-cli-bug00/node_modules/@babel/plugin-transform-classes/lib/index.js:104:54)
    at newFn (/mnt/w/me/vue-cli-bug00/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)

 @ ./src/views/Home.vue?vue&type=script&lang=ts& 1:0-352 1:368-371 1:373-722 1:373-722
 @ ./src/views/Home.vue
 @ ./src/router.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.60.77:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in /mnt/w/me/vue-cli-bug00/node_modules/normalize.css/normalize.css

Module build failed (from /mnt/w/me/vue-cli-bug00/node_modules/postcss-loader/lib/index.js):
Error: No PostCSS Config found in: /mnt/w/me/vue-cli-bug00/node_modules/normalize.css
    at config.load.then (/mnt/w/me/vue-cli-bug00/node_modules/postcss-load-config/src/index.js:55:15)

 @ /mnt/w/me/vue-cli-bug00/node_modules/normalize.css/normalize.css 4:14-132 14:3-18:5 15:22-140
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.60.77:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.0.3, tslint 5.11.0
Time: 2449ms

but if i delete the node_modules and reinstall dependencies, Error: Cannot find module '@babel/parser' does not happen, but Error: No PostCSS Config found still happen.

duduluu @ duduluu-i7 : /mnt/w/me/vue-cli-bug00/packages/ts (babel-parse-and-postcss)
$ yarn serve
yarn run v1.9.4
$ vue-cli-service serve --open
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 94% after seal

 ERROR  Failed to compile with 1 errors                                                                    4:16:36 PM
 error  in /mnt/w/me/vue-cli-bug00/node_modules/normalize.css/normalize.css

Module build failed (from /mnt/w/me/vue-cli-bug00/node_modules/postcss-loader/lib/index.js):
Error: No PostCSS Config found in: /mnt/w/me/vue-cli-bug00/node_modules/normalize.css
    at config.load.then (/mnt/w/me/vue-cli-bug00/node_modules/postcss-load-config/src/index.js:55:15)

 @ /mnt/w/me/vue-cli-bug00/node_modules/normalize.css/normalize.css 4:14-132 14:3-18:5 15:22-140
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.60.77:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.0.3, tslint 5.11.0
Time: 2599ms

[sodatea]

Duplicate of https://github.com/vuejs/vue-cli/issues/2599
As a workaround you can manually add babel-loader to your dependencies.

[duduluu]

It resolved.
But there is another error about PostCSS Config.
@sodatea

[sodatea]

Thanks for your report. I think it's also been reported before https://github.com/vuejs/vue-cli/issues/2572

[sodatea]

The two issues can be solved by adding these lines to vue.config.js:

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        path: __dirname
      }
    }
  },
  chainWebpack: config =>
    config.resolveLoader.modules.add(
      `${path.dirname(require.resolve('@vue/cli-plugin-babel'))}/node_modules`
    )
}

[sodatea]

Update: the original module path is wrong, I've updated it in the previous comment (should wrap the require.resolve call with path.dirname).

[duduluu]

super thx