Generated Vue 2 TS library doesn't build without babel.config.js

[gregveres]

Current Behavior

When I create an Nx-plus/vue library using Vue 2 (I don't know about vue 3), it creates a library that doesn't build. At least it doesn't build in my setup, and given the solution, I would expect this is common for everyone.

The library doesn't get a babel.config.js file. So what happens is that babel strips out all the typescript code and then the TS loader complains about the format of the file.

To fix the problem I create this babel.config.js file in the root directory of the newly created library project.

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
};

Expected Behavior

I would have expected this file to be created as part of the generation of the library if, in fact, it is required for the library to build properly.

If I am doing something wrong and babel should be configured elsewhere for most projects that would be good to know. For now, I will make sure I create this file in every library that I create. It's just one more thing to remember.

Steps to Reproduce

Create a Vue 2 workspace Create a Vue 2 library and put a TS based Vue component in it

buld the Vue 2 library and you will see that it fails to compile. Add the babel.config.js to the project and you will see that it compiles.

Environment

05-02 09:19:28 59> nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : win32 x64
   yarn : 1.22.17

   nx : 13.9.7
   @nrwl/angular : Not Found
   @nrwl/cypress : 13.9.7
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.9.7
   @nrwl/eslint-plugin-nx : 13.9.7
   @nrwl/express : Not Found
   @nrwl/jest : 13.9.7
   @nrwl/js : 13.9.7
   @nrwl/linter : 13.9.7
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/workspace : 13.9.7
   typescript : 4.3.5
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:
         @nx-plus/vue: 13.0.1

[gregveres]

I also just realized that when generating the library with jest, this library also needs babel config specified in the jest.config.js file

module.exports = {
  displayName: 'common-dynamic-announcement-banner',
  preset: '../../../../jest.preset.js',
  testEnvironment: 'jsdom',
  transform: {
    '^.+.vue$': '@vue/vue2-jest',
    '.+.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+.tsx?$': 'ts-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'vue', 'js', 'json'],
  coverageDirectory: '../../../../coverage/libs/common/dynamic/announcement-banner',
  snapshotSerializers: ['jest-serializer-vue'],
  globals: {
    'ts-jest': {
      tsconfig: 'libs/common/ui-base/tsconfig.spec.json',
      babelConfig: 'libs/common/ui-base/babel.config.js',
    },
    'vue-jest': {
      tsConfig: 'libs/common/ui-base/tsconfig.spec.json',
      babelConfig: 'libs/common/ui-base/babel.config.js',
    }
  },  setupFilesAfterEnv: [
    '../../../../jest.setup-vuetify.ts'
  ]
};

[ZachJW34]

Generating a library with babel is part of the generator. For example, running :

nx g @nx-plus/vue:lib my-lib --publishable --vueVersion 2 --babel

will generate a publishable library with the babel modifications you commented above.

Going to close this issue, but if you encounter an issue we can reopen.