BaklavaJS 1.5.2 Build Error

[carbotaniuman]

I just updated BaklavaJS to the latest version and now nothing builds. I think something is wrong with the build/dependency configuration, especially with regards to @baklavajs/events. A reproducer that shows the same error has been attached. repro.zip

This is my package.json.

{
  "name": "vision_frontend_vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "profile": "vue-cli-service build --report"
  },
  "dependencies": {
    "@baklavajs/core": "~1.5.2",
    "@baklavajs/plugin-interface-types": "~1.5.2",
    "@baklavajs/plugin-renderer-vue": "~1.5.2",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.1",
    "vue-router": "^3.1.6",
    "vuetify": "^2.2.21"
  },
  "devDependencies": {
    "@mdi/font": "^5.0.45",
    "@vue/cli": "^4.3.1",
    "@vue/cli-plugin-babel": "^4.3.1",
    "@vue/cli-plugin-typescript": "^4.3.1",
    "@vue/cli-service": "^4.3.1",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "typescript": "^3.8.3",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3"
  }
}

repro.zip

Error Message:

> vision_frontend_vue@0.1.0 build /home/steven/vision_frontend_vue
> vue-cli-service build


Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 ERROR  Failed to compile with 10 errors4:59:52 PM

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/connection.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/connection.d.ts(2,30):
2:30 Cannot find module '@baklavajs/events'.
    1 | import { NodeInterface } from "./nodeInterface";
  > 2 | import { BaklavaEvent } from "@baklavajs/events";
      |                              ^
    3 | import { IConnection, ITransferConnection } from "../types/connection";
    4 | export declare class Connection implements ITransferConnection {
    5 |     id: string;

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/editor.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/editor.d.ts(5,71):
5:71 Cannot find module '@baklavajs/events'.
    3 | import { Connection, DummyConnection } from "./connection";
    4 | import { IState } from "../types/state";
  > 5 | import { PreventableBaklavaEvent, BaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    6 | import { IEditor, IPlugin, IConnection, NodeConstructor, INode, IAddConnectionEventData, IAddNodeTypeEventData } from "../types";
    7 | /** The main model class for BaklavaJS */
    8 | export declare class Editor implements IEditor {

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/node.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/node.d.ts(4,71):
4:71 Cannot find module '@baklavajs/events'.
    2 | import { INodeState } from "../types/state";
    3 | import { Editor } from "./editor";
  > 4 | import { PreventableBaklavaEvent, BaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    5 | import { NodeOption } from "./nodeOption";
    6 | import { INode, IAddInterfaceEventData, IAddOptionEventData, IOptionEventData, INodeUpdateEventData } from "../types";
    7 | export interface IInterfaceCreateOptions {

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/nodeInterface.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/nodeInterface.d.ts(2,71):
2:71 Cannot find module '@baklavajs/events'.
    1 | import { IInterfaceState } from "../types/state";
  > 2 | import { BaklavaEvent, PreventableBaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    3 | import { INodeInterface, INode } from "../types";
    4 | export declare class NodeInterface implements INodeInterface {
    5 |     id: string;

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/nodeOption.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/core/dist/baklavajs-core/src/nodeOption.d.ts(2,55):
2:55 Cannot find module '@baklavajs/events'.
    1 | import { INodeOption } from "../types/nodeOption";
  > 2 | import { PreventableBaklavaEvent, BaklavaEvent } from "@baklavajs/events";
      |                                                       ^
    3 | export declare class NodeOption implements INodeOption {
    4 |     /** Name of the component that should be displayed for the option */
    5 |     optionComponent: string;

 error  in /home/steven/vision_frontend_vue/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/viewPlugin.d.ts

ERROR in /home/steven/vision_frontend_vue/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/viewPlugin.d.ts(3,32):
3:32 Cannot find module '@baklavajs/events'.
    1 | import { VueConstructor } from "vue";
    2 | import { IPlugin, IEditor } from "../../baklavajs-core/types";
  > 3 | import { SequentialHook } from "@baklavajs/events";
      |                                ^
    4 | import { IViewPlugin } from "../types";
    5 | import NodeView from "./components/node/Node.vue";
    6 | import NodeOptionView from "./components/node/NodeOption.vue";

 error  in /home/steven/vision_frontend_vue/src/options/CheckboxOption.vue

ERROR in /home/steven/vision_frontend_vue/src/options/CheckboxOption.vue(16,29):
16:29 Cannot find module '@baklavajs/core/dist/types'.
    14 | <script lang="ts">
    15 | import { Component, Vue, Prop } from "vue-property-decorator";
  > 16 | import { INodeOption } from "@baklavajs/core/dist/types";
       |                             ^
    17 | 
    18 | @Component
    19 | export default class NumberOption extends Vue {

 error  in /home/steven/vision_frontend_vue/src/options/NumberOption.vue

ERROR in /home/steven/vision_frontend_vue/src/options/NumberOption.vue(37,29):
37:29 Cannot find module '@baklavajs/core/dist/types'.
    35 | <script lang="ts">
    36 | import { Component, Vue, Prop } from "vue-property-decorator";
  > 37 | import { INodeOption } from "@baklavajs/core/dist/types";
       |                             ^
    38 | 
    39 | @Component
    40 | export default class NumberOption extends Vue {

 error  in /home/steven/vision_frontend_vue/src/options/RangeOption.vue

ERROR in /home/steven/vision_frontend_vue/src/options/RangeOption.vue(49,29):
49:29 Cannot find module '@baklavajs/core/dist/types'.
    47 | <script lang="ts">
    48 | import { Component, Vue, Prop } from "vue-property-decorator";
  > 49 | import { INodeOption } from "@baklavajs/core/dist/types";
       |                             ^
    50 | 
    51 | @Component
    52 | export default class NumberOption extends Vue {

 error  in /home/steven/vision_frontend_vue/src/options/TextOption.vue

ERROR in /home/steven/vision_frontend_vue/src/options/TextOption.vue(18,29):
18:29 Cannot find module '@baklavajs/core/dist/types'.
    16 | <script lang="ts">
    17 | import { Component, Vue, Prop } from "vue-property-decorator";
  > 18 | import { INodeOption } from "@baklavajs/core/dist/types";
       |                             ^
    19 | 
    20 | @Component
    21 | export default class TextOption extends Vue {

[newcat]

Yup, forgot to add @baklavajs/events to the dependencies. Should work now in v1.5.3

[carbotaniuman]

It looks like you also forgot vue-property-decorator and vue-class-component in your dependency blocks.

[newcat]

They shouldn't be needed as they will be included in the webpack-compiled build artifact. Also I can't reproduce this problem in my test projects. Can you post the error log, please?

[carbotaniuman]

ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/BaseNumericOption.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { INodeOption } from "../../baklavajs-core/types";
    3 | export declare class BaseNumericOption extends Vue {
    4 |     MAX_STRING_LENGTH: number;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/ButtonOption.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | export default class ButtonOption extends Vue {
    3 |     name: string;
    4 | }
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/CheckboxOption.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | export default class InputOption extends Vue {
    3 |     value: boolean;
    4 |     name: string;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/InputOption.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | export default class InputOption extends Vue {
    3 |     value: string;
    4 |     name: string;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/SelectOption.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { INodeOption } from "../../baklavajs-core/types";
    3 | export default class SelectOption extends Vue {
    4 |     open: boolean;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-options-vue/dist/baklavajs-plugin-options-vue/src/TextOption.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | export default class TextOption extends Vue {
    3 |     get sanitized(): string;
    4 |     value: string;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/connection/ConnectionView.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { TemporaryConnectionState, ITransferConnection, ITemporaryConnection } from "../../../../baklavajs-core/types";
    3 | import { ViewPlugin } from "../../viewPlugin";
    4 | export default class Connection extends Vue {
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/connection/ConnectionWrapper.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { ITransferConnection, TemporaryConnectionState } from "../../../../baklavajs-core/types";
    3 | export default class ConnectionWrapper extends Vue {
    4 |     connection: ITransferConnection;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/connection/TemporaryConnection.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { ITemporaryConnection, TemporaryConnectionState, INodeInterface } from "../../../../baklavajs-core/types";
    3 | export default class TemporaryConnection extends Vue {
    4 |     connection: ITemporaryConnection;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | export interface IMenuItem {
    3 |     label?: string;
    4 |     value?: any;
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/Editor.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { INode, INodeInterface, ITemporaryConnection } from "../../../baklavajs-core/types";
    3 | import { ViewPlugin } from "../viewPlugin";
    4 | import { IViewNode } from "../../types";
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/node/Node.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { ViewPlugin } from "../../viewPlugin";
    3 | import { IViewNode } from "../../../types";
    4 | export default class NodeView extends Vue {
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/node/NodeInterface.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { VueConstructor } from "vue";
    3 | import EditorView from "../Editor.vue";
    4 | import { INodeInterface } from "../../../../baklavajs-core/types";
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/node/NodeOption.vue.d.ts(2,21):
2:21 Cannot find module 'vue-property-decorator'.
    1 | import { VueConstructor } from "vue";
  > 2 | import { Vue } from "vue-property-decorator";
      |                     ^
    3 | import { INodeOption, INode } from "../../../../baklavajs-core/types";
    4 | import { ViewPlugin } from "../../viewPlugin";
    5 | export default class NodeOptionView extends Vue {
ERROR in C:/Users/quydx/WebstormProjects/frontend - Copy/node_modules/@baklavajs/plugin-renderer-vue/dist/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue.d.ts(1,21):
1:21 Cannot find module 'vue-property-decorator'.
  > 1 | import { Vue } from "vue-property-decorator";
      |                     ^
    2 | import { ViewPlugin } from "../viewPlugin";
    3 | export default class Sidebar extends Vue {
    4 |     width: number;

If I set "noEmitOnError": false, in my tsconfig.json, everything still appears to work correctly.

[newcat]

Ok yeah this happens when you use the option plugin (and probably also the renderer plugin) in TypeScript projects that don't use the vue-property-decorator package. Currently, the package is already bundled during the Webpack build, so the functionality is in there, but TypeScript doesn't include the necessary typings in the declaration files. I'll see what I can do to fix this. I don't want to include vue-property-decorator as a dependency because for the functionality it isn't needed. But I plan to change the whole build process anyway and remove webpack, so then vue-property-decorator would actually be a dependency. But this will take some time.

For now, as a workaround, just add vue-property-decorator to your project manually npm install vue-property-decorator

[carbotaniuman]

Got it. I'm putting this here because I think it's related to the Webpack build changes. Before 1.5.x, I could do import { INodeOption } from '@baklavajs/core/dist/types'; to import INodeOption, but now I must do import { INodeOption } from "@baklavajs/core/dist/baklavajs-core/types";, and ESLint complains about an unresolvable import. It still compiles of course, but it is arguably less ergonomic than the previous behavior.

[newcat]

True. This happened because I put all the events stuff in a separate package. But as you already wrote, this should change with the build process update. Thanks for mentioning it, I will try to make it more ergonomic when I rewrite the build stuff.

[newcat]

The build system has completely changed in V2, so these issues shouldn't exist there anymore