环境:vue-cli4 vue3 stylus
yarn serve之后的报错:Syntax Error: TypeError: path must be a string
debug:试过重新安装依赖包等,均无法解决。而后仔细查看报错信息,如下
Syntax Error: TypeError: path must be a string
@ ./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--12-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--12-oneOf-1-2!./node_modules/stylus-loader??ref--12-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/layout/index.vue?vue&type=style&index=0&id=13877386&lang=stylus&scoped=true 4:14-455 15:3-20:5 16:22-463
@ ./src/layout/index.vue?vue&type=style&index=0&id=13877386&lang=stylus&scoped=true
@ ./src/layout/index.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://xx.xx.xxxx:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
internal/validators.js:117
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:117:11)
at Object.dirname (path.js:583:5)
at WatcherManager.watchFile (D:\vue3-project\node_modules\watchpack\lib\watcherManager.js:27:23)
at Watchpack.<anonymous> (D:\vue3-project\node_modules\watchpack\lib\watchpack.js:38:49)
at Array.map (<anonymous>)
at Watchpack.watch (D:\vue3-project\node_modules\watchpack\lib\watchpack.js:37:28)
at NodeWatchFileSystem.watch (D:\vue3-project\node_modules\webpack\lib\node\NodeWatchFileSystem.js:70:16)
at Watching.watch (D:\vue3-project\node_modules\webpack\lib\Watching.js:114:48)
at D:\vue3-project\node_modules\webpack\lib\Watching.js:101:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\vue3-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
at AsyncSeriesHook.lazyCompileHook (D:vue3-project\node_modules\tapable\lib\Hook.js:154:20)
at Watching._done (D:\vue3-project\node_modules\webpack\lib\Watching.js:98:28)
at D:\vue3-project\node_modules\webpack\lib\Watching.js:73:19
at Compiler.emitRecords (D:\vue3-project\node_modules\webpack\lib\Compiler.js:499:39)
at D:\vue3-project\node_modules\webpack\lib\Watching.js:54:20
at D:\vue3-project\node_modules\webpack\lib\Compiler.js:485:14 {
code: 'ERR_INVALID_ARG_TYPE'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
发现是css-loader的问题,因为之前配置过stylus,所以在vue.config.js中查看了一下配置,果然发现问题,把路径更改正确之后解决。
// vue.config.js
css: {
loaderOptions: {
// 给 stylus-loader 传递选项
stylus: {
import: '~@/styles/index.styl' // 此处地址更正
}
}
}
本人在博客中搜寻这个这个报错的解决方式时,发现大多数的这类报错(如下)都是由于css的渲染引起的。如果你有同样问题,不妨排查预处理器的配置、相关包的版本试一试。
The “path“ argument must be of type string. Received undefined