Fails to build with some components using script setup #1

New issue

Open

opened 2022-01-19 03:33:15 +00:00 by thepaperpilot · 1 comment

thepaperpilot commented

2022-01-19 03:33:15 +00:00

(Migrated from github.com)

Some components cause an error that will appear similar to the below:

 error  in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts

Syntax Error: TypeError: Cannot read properties of null (reading 'content')




ERROR in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts (D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??clonedRuleSet-41.
use[0]!D:\projects\The-Modding-Tree-X\node_modules\babel-loader\lib\index.js!D:\projects\The-Modding-Tree-X\node_modules\ts-loader\index.js??clonedRuleSet-41.use[2]!D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??ruleSet[0].use[0]!D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js??ruleSet[0].use[1]!D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts)
Module Error (from D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js):
[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue
18 |  import GridCell from "./GridCell.vue";
19 |  
20 |  defineProps<FeatureComponent<GenericGrid>>();
   |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 |  
22 |  // export default function setup(props: FeatureComponent<GenericGrid>) {
 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts 1:0-392 1:0-392 1:393-774 1:393-774
 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue 2:0-66 3:0-61 3:0-61 6:49-55
 @ D:\projects\The-Modding-Tree-X\src\features\grid.ts 4:0-59 12:20-33
 @ D:\projects\The-Modding-Tree-X\src\data\layers\aca\a.tsx 10:0-45 62:11-21
 @ D:\projects\The-Modding-Tree-X\src\data\mod.tsx 15:0-31 41:18-28 109:22-23
 @ D:\projects\The-Modding-Tree-X\src\util\save.ts 207:19-39
 @ D:\projects\The-Modding-Tree-X\src\main.ts 7:0-35 16:17-21

ERROR in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts (D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??clonedRuleSet-41.use[0]!D:\projects\The-Modding-Tree-X\node_modules\babel-loader\lib\index.js!D:\projects\The-Modding-Tree-X\node_modules\ts-loader\index.js??clonedRuleSet-41.use[2]!D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??ruleSet[0].use[0]!D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js??ruleSet[0].use[1]!D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts)
Module build failed (from D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js):
TypeError: Cannot read properties of null (reading 'content')
    at selectBlock (D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\select.js:23:45)
    at Object.loader (D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js:67:41)
 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts 1:0-392 1:0-392 1:393-774 1:393-774
 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue 2:0-66 3:0-61 3:0-61 6:49-55
 @ D:\projects\The-Modding-Tree-X\src\features\grid.ts 4:0-59 12:20-33
 @ D:\projects\The-Modding-Tree-X\src\data\layers\aca\a.tsx 10:0-45 62:11-21
 @ D:\projects\The-Modding-Tree-X\src\data\mod.tsx 15:0-31 41:18-28 109:22-23
 @ D:\projects\The-Modding-Tree-X\src\util\save.ts 207:19-39
 @ D:\projects\The-Modding-Tree-X\src\main.ts 7:0-35 16:17-21

The fix for this is to convert the component from script setup back to the traditional composition API approach for SFCs. (or presumably options API, although that's discouraged)

The issue appears to be from it importing the type from a .ts file which then imports the component in order to set the Component property on the feature. However, every renderable feature does this, and only a couple seem to have this issue. The current "fix" is considered a workaround and should be properly fixed.

As of writing, the components with this issue are Tree.vue and Grid.vue

Some components cause an error that will appear similar to the below: ``` error in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts Syntax Error: TypeError: Cannot read properties of null (reading 'content') ERROR in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts (D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??clonedRuleSet-41. use[0]!D:\projects\The-Modding-Tree-X\node_modules\babel-loader\lib\index.js!D:\projects\The-Modding-Tree-X\node_modules\ts-loader\index.js??clonedRuleSet-41.use[2]!D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??ruleSet[0].use[0]!D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js??ruleSet[0].use[1]!D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts) Module Error (from D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js): [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type. D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue 18 | import GridCell from "./GridCell.vue"; 19 | 20 | defineProps<FeatureComponent<GenericGrid>>(); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21 | 22 | // export default function setup(props: FeatureComponent<GenericGrid>) { @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts 1:0-392 1:0-392 1:393-774 1:393-774 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue 2:0-66 3:0-61 3:0-61 6:49-55 @ D:\projects\The-Modding-Tree-X\src\features\grid.ts 4:0-59 12:20-33 @ D:\projects\The-Modding-Tree-X\src\data\layers\aca\a.tsx 10:0-45 62:11-21 @ D:\projects\The-Modding-Tree-X\src\data\mod.tsx 15:0-31 41:18-28 109:22-23 @ D:\projects\The-Modding-Tree-X\src\util\save.ts 207:19-39 @ D:\projects\The-Modding-Tree-X\src\main.ts 7:0-35 16:17-21 ERROR in D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts (D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??clonedRuleSet-41.use[0]!D:\projects\The-Modding-Tree-X\node_modules\babel-loader\lib\index.js!D:\projects\The-Modding-Tree-X\node_modules\ts-loader\index.js??clonedRuleSet-41.use[2]!D:\projects\The-Modding-Tree-X\node_modules\cache-loader\dist\cjs.js??ruleSet[0].use[0]!D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js??ruleSet[0].use[1]!D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts) Module build failed (from D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js): TypeError: Cannot read properties of null (reading 'content') at selectBlock (D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\select.js:23:45) at Object.loader (D:\projects\The-Modding-Tree-X\node_modules\vue-loader\dist\index.js:67:41) @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue?vue&type=script&setup=true&lang=ts 1:0-392 1:0-392 1:393-774 1:393-774 @ D:\projects\The-Modding-Tree-X\src\components\features\Grid.vue 2:0-66 3:0-61 3:0-61 6:49-55 @ D:\projects\The-Modding-Tree-X\src\features\grid.ts 4:0-59 12:20-33 @ D:\projects\The-Modding-Tree-X\src\data\layers\aca\a.tsx 10:0-45 62:11-21 @ D:\projects\The-Modding-Tree-X\src\data\mod.tsx 15:0-31 41:18-28 109:22-23 @ D:\projects\The-Modding-Tree-X\src\util\save.ts 207:19-39 @ D:\projects\The-Modding-Tree-X\src\main.ts 7:0-35 16:17-21 ``` The fix for this is to convert the component from script setup back to the traditional composition API approach for SFCs. (or presumably options API, although that's discouraged) The issue appears to be from it importing the type from a .ts file which then imports the component in order to set the Component property on the feature. However, _every_ renderable feature does this, and only a couple seem to have this issue. The current "fix" is considered a workaround and should be properly fixed. As of writing, the components with this issue are Tree.vue and Grid.vue

thepaperpilot commented

2022-01-22 23:05:56 +00:00

(Migrated from github.com)

Several other files seem to also have had this issue, and I am yet to find a common denominator.

A note about the workaround: I was initially defining components like so:

export default defineComponent(function Tree(props: FeatureComponent<GenericTree>) {
    ...
});

Unfortunately, it would appear that in addition to being significantly less documented, this method also has trouble with accurately determining props, and no way to define emits. So instead, you need to do this fairly annoying cross between the options and composition API:

export default defineComponent({
    name: "Tree",
    emit: [ ... ],
    props: { .... },
    setup(props, { emit }) {
        ...
    }
});

Most notably, this requires rewriting all the props and needing to do the annoying Object as PropType<Foo> stuff to support typing correctly.

Several other files seem to also have had this issue, and I am yet to find a common denominator. A note about the workaround: I was initially defining components like so: ```ts export default defineComponent(function Tree(props: FeatureComponent<GenericTree>) { ... }); ``` Unfortunately, it would appear that in addition to being significantly less documented, this method also has trouble with accurately determining props, and no way to define emits. So instead, you need to do this fairly annoying cross between the options and composition API: ```ts export default defineComponent({ name: "Tree", emit: [ ... ], props: { .... }, setup(props, { emit }) { ... } }); ``` Most notably, this requires rewriting all the props and needing to do the annoying `Object as PropType<Foo>` stuff to support typing correctly.