Skip to content

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

Open
@nstuyvesant

Description

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.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions