nativescript-vue/vue-cli-plugin-nativescript-vue

Typescript webpack error when vue cli typescript plugin is in dependencies in package.json

atrunelle opened this issue · 1 comments

atrunelle commented

Repo to reproduce

I was trying to use this plugin on my existing Vue project, which is using Vue CLI 4.

I got this error after setting it up selecting existing project and dual web and native.

npm run serve:web

> ns-ts-test@0.1.0 serve:web /Users/auroretrunelle/projects/ns-ts-test
> vue-cli-service serve --mode development.web

starting webConfig
 INFO  Starting development server...
 ERROR  TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
    at api.chainWebpack (/Users/auroretrunelle/projects/ns-ts-test/node_modules/vue-cli-plugin-nativescript-vue/index.js:1180:9)
    at webpackChainFns.forEach.fn (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:236:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
    at serve (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/commands/serve.js:74:31)
    at Service.run (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:230:12)
    at Object.<anonymous> (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at internal/main/run_main_module.js:21:11

I tried setting up a brand new project with TypeScript with the Vue CLI 4 and this plugin as well, and it worked fine in that case.

I manage to nail it down to the fact that my @vue/cli-plugin-typescript in my package.json was in my dependencies rather than devDependencies (as it is for a branch new project).

Our sysadmin installs our packages using npm install --production for production deploy, and build projects just after, which is why I have that Vue CLI plugins as part of dependencies.

I don't think this should result in an error though. Can you investigate?

Let me know if you need more info.

atrunelle commented

The line throwing the error is in /node_modules/vue-cli-plugin-nativescript-vue/index.js:1180:9

config.module
        .rule('ts')
        .uses.get('ts-loader')
        .get('options');

I find that vue cli plugins added in dependencies are resolved last and it influences the order plugins are loaded. In this case, the @vue/cli-plugin-typescript webpack config was loaded after vue-cli-plugin-nativescript-vue and so ts-loader was missing when vue-cli-plugin-nativescript-vue was referring to it.

Adding vue-cli-plugin-nativescript-vue to dependencies as well rather than in devDependencies solves the issue (which is what I will need to do anyway in my real project).

Closing this issue then.