ModuleBuildError：模块构建失败：TypeError [ERR_INVALID_ARG_TYPE]：“ path”参数必须为字符串类型接收类型未定义

如何解决ModuleBuildError：模块构建失败：TypeError [ERR_INVALID_ARG_TYPE]：“ path”参数必须为字符串类型接收类型未定义

我正在使用vuetify 1.5版，并将其升级到最新版本2.3.10。当我尝试运行Webpack服务器时，它给了我这个错误。我添加了 yarn add sass -D ，但无法解决此问题。请帮我解决这个问题。

ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at assertPath (path.js:39:11)
    at Object.join (path.js:1155:7)
    at getSassOptions (/Users/Documents/weather/node_modules/sass-loader/dist/utils.js:160:37)
    at Object.loader (/Users/Documents/weather/node_modules/sass-loader/dist/index.js:36:49)
    at runLoaders (/Users/Documents/weather/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at /Users/Documents/weather/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:61:11)

下面是package.json文件，请帮助我找出导致此问题的原因

{
  "name": "weather","private": true,"engines": {
    "node": "^10.0.0","yarn": "^1.21.1"
  },"dependencies": {
    "@rails/webpacker": "^3.2.0","axios": "^0.17.1","babel-polyfill": "^6.26.0","coffee-loader": "^0.9.0","coffeescript": "1.12.7","es6-promise": "^4.2.2","file-saver": "^2.0.1","pdfjs-dist": "2.0.550","sass-loader": "^10.0.1","scroll-into-view-if-needed": "^2.2.14","urijs": "^1.19.1","vue": "^2.5.18","vue-ads-table-tree": "^2.3.2","vue-analytics": "^5.9.0","vue-awesome": "^2.3.4","vue-material": "^1.0.0-beta-7","vue-moment": "^4.0.0-0","vue-quill-editor": "^3.0.6","vue-router": "^3.0.1","vue-signature-pad": "^1.1.17","vue-spinner": "^1.0.3","vue-star-rating": "^1.6.0","vue-template-compiler": "^2.5.18","vue-truncate-collapsed": "^1.3.0","vue2-google-maps": "^0.8.11","vuescroll": "^4.6.5","vuetify": "^2.3.10","yarn": "^1.22.5"
  },"devDependencies": {
    "caniuse-lite": "^1.0.30000855","css-loader": "^0.28.11","jshint": "^2.9.5","jshint-loader": "^0.8.4","sass": "^1.26.10","vue-loader": "^13.6.2","webpack-dev-server": "^2.9.7"
  },"scripts": {
    "client": "./bin/webpack-dev-server","server": "bundle exec rails s","start": "./bin/webpack-dev-server"
  }
}

我正在使用yarn添加包裹。

更新1

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee');
const vue =  require('./loaders/vue')

environment.loaders.append('coffee',coffee);
environment.loaders.append('vue',vue)
environment.loaders.append('jshint',{
  test: /\.js$/,// include .js files
  enforce: "pre",// preload the jshint loader
  exclude: /node_modules/,// exclude any and all files in the node_modules folder
  use: [{
      loader: "jshint-loader"
  }]
});

environment.loaders.append('signature_pad',{
  test: /\.js?$/,include: [/node_modules\/signature_pad/],use: [{
    loader: 'babel-loader',options: {
      cacheDirectory: true,presets: [['env',{ 'modules': false,'targets': { 'node': 4 } }]]
    }
  }],});

const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
};
environment.config.merge(resolver);

module.exports = environment;

vue.js

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,use: [{
    loader: 'vue-loader',options: { extractCSS }
  }]
}

Error2

Module build failed: ModuleBuildError: Module build failed: TypeError: loaderContext.getResolve is not a function
    at getWebpackImporter (/Users/Documents/weather/node_modules/sass-loader/dist/utils.js:278:37)
    at Object.loader (/Users/Documents/weather/node_modules/sass-loader/dist/index.js:42:61)
    at runLoaders (/Users/Documents/weather/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/Documents/weather/node_modules/loader-runner/lib/LoaderRunner.js:230:18

解决方法

1. extractCSS会导致这种问题。我会尝试禁用它，如果它可以工作-然后尝试从那时开始对其进行调试。

2. 您的sass-loader版本相对较新。我会尝试将其降级为版本9.0.3。我最近在版本10中遇到了一些问题，可能是您的情况。

3. 我最后看到的-您的配置文件似乎丢失了VueLoaderPlugin。我会将其添加到您的环境文件中，但是我认为这不是问题的根源。

const { VueLoaderPlugin } = require('vue-loader')
// ...
environment.plugins.prepend('VueLoaderPlugin',new VueLoaderPlugin())
environment.loaders.prepend('vue',vue)
// ...