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

Question

我正在使用 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 }
  }]
}

错误2

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

Answer 1

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)
// ...