@vue/cli-service will not use babel configuration in package.json

nstuyvesant commented 4 years ago

Version

4.4.6

Reproduction link

https://github.com/nstuyvesant/shy3/blob/master/package.json

Environment info

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.1
  npmPackages:
    @fortawesome/vue-fontawesome: ^0.1.10 => 0.1.10 
    @types/vuelidate: ^0.7.13 => 0.7.13 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-babel: ~4.4.6 => 4.4.6 
    @vue/cli-plugin-e2e-cypress: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-eslint: ~4.4.6 => 4.4.6 
    @vue/cli-plugin-pwa: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-router:  4.4.6 
    @vue/cli-plugin-typescript: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-unit-jest: ^4.4.6 => 4.4.6 
    @vue/cli-plugin-vuex:  4.4.6 
    @vue/cli-service: ^4.4.6 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.1.2 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.3 => 1.0.3 
    @vue/web-component-wrapper:  1.2.0 
    bootstrap-vue: ^2.15.0 => 2.15.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    jest-serializer-vue:  2.0.2 
    portal-vue: ^2.1.7 => 2.1.7 
    typescript: ^3.9.5 => 3.9.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.3 => 7.2.3 
    vue-cli-plugin-bootstrap-vue: ~0.6.0 => 0.6.0 
    vue-cli-plugin-fontawesome: ~0.2.0 => 0.2.0 
    vue-cli-plugin-pug: ^1.0.7 => 1.0.7 
    vue-cli-webpack:  1.0.0 
    vue-eslint-parser:  7.1.0 
    vue-functional-data-merge:  3.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.5 
    vue-loader:  15.9.3 
    vue-property-decorator: ^9.0.0 => 9.0.0 
    vue-router: ^3.3.4 => 3.3.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuelidate: ^0.7.5 => 0.7.5 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

See babel configuration in this package.json. If there is no babel.config.js file in my top directory, running unit tests fails because they were written in TypeScript.

$ vue create testapp (select TypeScript w/Babel and unit and e2e testing) $ cd testapp

add this to package.json "babel": { "presets": [ "@vue/cli-plugin-babel/preset" ] },

delete babel.config.js. $ npm run test:unit

What is expected?

Example unit test runs successfully

What is actually happening?

$ vue-cli-service test:unit --no-cache FAIL tests/unit/example.spec.ts ● Test suite failed to run

/Users/nates/dev/shy3/tests/unit/example.spec.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from "@vue/test-utils";
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

Per https://babeljs.io/docs/en/configuration, we should be able to have babel configuration in the package.json. It just doesn't work.

fangbinwei commented 3 years ago

ts-jest's options babelConfig is true, then ts-jest@24 tries to load babelConfig, but it doesn't have the ability to load the config in package.json. Then, babel-jest can't get the @vue/cli-plugin-babel/preset.

ts-jest@25/26 rewrite some codes and don't have this problem. Updating ts-jest can solve it. (yarn resolutions, also needs to update jest, babel-jest, etc)

drytoastman commented 3 years ago

@nstuyvesant, is there a chance you are/were using some form of package workspaces (like yarn)? I'm running in the same thing from what I can see in

https://github.com/vuejs/vue-cli/blob/3fd9cac88c4594384672d4126754c265094c4d9d/packages/%40vue/cli-plugin-babel/index.js#L66-L75

It passes in possible config files as babel.config.js and .browserslistrc. And then in

https://github.com/vuejs/vue-cli/blob/3fd9cac88c4594384672d4126754c265094c4d9d/packages/%40vue/cli-service/lib/PluginAPI.js#L178-L182

It appends yarn.lock and package-lock.json. It won't look at package.json itself. In a workspace environment, the tools won't create the package-lock.json or yarn.lock in each workspace project, only at the root so I don't think it will pick up the config in this case.

Unfortunate as I'd love to remove some of the 2-3 line config files from each workspace project.

This was looking at v4.5.9

vuejs / vue-cli