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

Posted 2023-02-16

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

【英文标题】：ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

【发布时间】：2020-12-22 21:38:33

【问题描述】：

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

【问题讨论】：

您是否按照 vuetify 迁移指南中描述的步骤进行操作？ vuetifyjs.com/en/getting-started/releases-and-migrations

@Magiczne 是的，这就是我所关注的。

可以包含你的 webpack 配置吗？

@Magiczne 请检查更新 1

您是否尝试过删除 node_modules 并运行全新安装？

【参考方案1】：

extractCSS 可能会导致此类问题。我会尝试禁用它，如果它有效 - 然后尝试从那时开始调试它。

您的sass-loader 版本相对较新。我会尝试将其降级到版本9.0.3。我最近在使用第 10 版时遇到了一些问题，这可能就是您的情况。

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

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

【讨论】：

我按照你的建议做了。请检查问题中的错误 2。这是我现在遇到的错误

除了使用--webpack=vue 标志创建新的rails项目，然后逐个文件检查有什么不同之外，我没有其他可能的想法。

会不会是sass-loader版本的原因？

可以的，你试试就知道了

你能建议我如何在 vue 中将 sass-loader 添加到 webpack 中吗？