使用 Vant Weapp 出错

Question

使用 Vant Weapp 出错

Feiox opened this issue 6 years ago · 1 comments

修改 mina-webpack/example 官方示例。
使用 vant 方式是直接拷贝 vant-wxapp/dist 至 src/components/vant 目录内。
经检查目录、extract-loader，css-loader 并没有问题。
平台：

win_10_x64
chrome 70
npm 6.4.1
vant-weapp 0.4.7
mina-webpack 等，为直接拷贝自 example 目录

home.mina

<config>
{
  "usingComponents": {
    "tina-logo": "~@tinajs/tina-logo.mina",
    "circular": "../components/circular.mina",
    "foobar": "/components/foobar.mina",
    "classical": "../components/classical",
    "i-button": "../components/vant/button/index",  # 修改为 vant 原生组件库
  }
}
</config>

<style>
@import '../common.wxss';

text {
  &.blue {
    color: #00f;
  }
}

image {
  width: 20px;
  height: 20px;
}
</style>

<template>
  <view>
    <text class="blue">{{msg}} </text>
    <navigator url="/packages/a/pages/home">Go to a page in a subpackage</navigator>
    <image src="../images/logo.png" />
    <tina-logo />
    <foobar />
    <classical />
    <i-button type="primary">iview button</i-button>
  </view>
</template>

<script>
require('../utils/dependency.js')
Page({
  data: {
    msg: '',
  },

  onLoad() {
    console.log('parseInt: ', parseInt(4.2))
    console.log('parseFloat: ', parseFloat(4.2))
    this.setData({
      msg: 'Hello from Home-Page!',
    })
  },
})
</script>

报错：


ERROR in ./components/vant/button/index.js (../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/button/index.js)
Module build failed (from ../node_modules/@tinajs/mina-loader/lib/index.js):
ModuleBuildError: Module build failed (from ../node_modules/extract-loader/lib/extractLoader.js):
module.js:550
    throw err;
    ^

Error: Cannot find module 'C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:74:24
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:56:33)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\button\index.js:3:11
    at ContextifyScript.Script.runInContext (vm.js:59:29)
    at ContextifyScript.Script.runInNewContext (vm.js:65:15)
    at Object.extractLoader (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:88:12)
    at runLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\webpack\lib\NormalModule.js:286:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at runSyncOrAsync (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\lib\loader.js:135:3)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\lib\processCss.js:213:3
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
 @ ./components/vant/button/index.js (multi es6-promise/dist/es6-promise.auto.js ../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/button/index.js) components/vant/button/index.js[1]

ERROR in ./components/vant/loading/index.js (../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/loading/index.js)
Module build failed (from ../node_modules/@tinajs/mina-loader/lib/index.js):
ModuleBuildError: Module build failed (from ../node_modules/extract-loader/lib/extractLoader.js):
module.js:550
    throw err;
    ^

Error: Cannot find module 'C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:74:24
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:56:33)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\loading\index.js:3:11
    at ContextifyScript.Script.runInContext (vm.js:59:29)
    at ContextifyScript.Script.runInNewContext (vm.js:65:15)
    at Object.extractLoader (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:88:12)
    at runLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\webpack\lib\NormalModule.js:286:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at runSyncOrAsync (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\lib\loader.js:135:3)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\lib\processCss.js:213:3
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
 @ ./components/vant/loading/index.js (multi es6-promise/dist/es6-promise.auto.js ../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/loading/index.js) components/vant/loading/index.js[1]

ERROR in ./components/vant/button/index.js (../node_modules/file-loader/dist/cjs.js?name=components/vant/button/[name].wxss!../node_modules/extract-loader/lib/extractLoader.js?{"publicPath":"/"}!../node_modules/@tinajs/mina-loader/node_modules/css-loader?{"url":false}!../node_modules/@tinajs/mina-loader/lib/loaders/wxss-url.js!../node_modules/@tinajs/mina-loader/lib/loaders/selector.js?tag=style!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/button/index.js)
Module build failed (from ../node_modules/extract-loader/lib/extractLoader.js):
module.js:550
    throw err;
    ^

Error: Cannot find module 'C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:74:24
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:56:33)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\button\index.js:3:11
    at ContextifyScript.Script.runInContext (vm.js:59:29)
    at ContextifyScript.Script.runInNewContext (vm.js:65:15)
    at Object.extractLoader (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:88:12)
 @ ./components/vant/button/index.js (../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/button/index.js) !!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\file-loader\dist\cjs.js?name=components/vant/button/[name].wxss!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js?{"publicPath":"/"}!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js?{"url":false}!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\lib\loaders\wxss-url.js!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\lib\loaders\selector.js?tag=style!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-entry-webpack-plugin\lib\loaders\virtual-mina-loader.js!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\button\index.js
 @ multi es6-promise/dist/es6-promise.auto.js ../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/button/index.js

ERROR in ./components/vant/loading/index.js (../node_modules/file-loader/dist/cjs.js?name=components/vant/loading/[name].wxss!../node_modules/extract-loader/lib/extractLoader.js?{"publicPath":"/"}!../node_modules/@tinajs/mina-loader/node_modules/css-loader?{"url":false}!../node_modules/@tinajs/mina-loader/lib/loaders/wxss-url.js!../node_modules/@tinajs/mina-loader/lib/loaders/selector.js?tag=style!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/loading/index.js)
Module build failed (from ../node_modules/extract-loader/lib/extractLoader.js):
module.js:550
    throw err;
    ^

Error: Cannot find module 'C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:74:24
    at require (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:56:33)
    at C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\loading\index.js:3:11
    at ContextifyScript.Script.runInContext (vm.js:59:29)
    at ContextifyScript.Script.runInNewContext (vm.js:65:15)
    at Object.extractLoader (C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js:88:12)
 @ ./components/vant/loading/index.js (../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/loading/index.js) !!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\file-loader\dist\cjs.js?name=components/vant/loading/[name].wxss!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\extract-loader\lib\extractLoader.js?{"publicPath":"/"}!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\node_modules\css-loader\index.js?{"url":false}!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\lib\loaders\wxss-url.js!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-loader\lib\loaders\selector.js?tag=style!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\node_modules\@tinajs\mina-entry-webpack-plugin\lib\loaders\virtual-mina-loader.js!C:\Users\Feiox\Projects\shopbox-wxapp2\mina-webpack\example\src\components\vant\loading\index.js
 @ multi es6-promise/dist/es6-promise.auto.js ../node_modules/@tinajs/mina-loader/lib!../node_modules/@tinajs/mina-entry-webpack-plugin/lib/loaders/virtual-mina-loader.js!./components/vant/loading/index.js

Answer 1 · 2018-11-29T12:51:49.000Z

mina-loader 用的 extract-loader@2.0.1 在遇到 resourcePath 包含 loaders (比如 ../../node_modules/css-loader/index.js!./common.wxss) 的情况时会崩溃。

问题代码：

https://github.com/peerigon/extract-loader/blob/2f8074/src/extractLoader.js#L39

现在 mina-loader 已经将依赖的 extract-loader 升级至 ^3.1.0，经测试已经修复了这个问题。

@Feiox 请试试将 mina-loader 升级至刚发布的 1.1.2 版本：

npm i --save-dev @tinajs/mina-loader@^1.1.2

如果验证还有问题请随意重新打开 issue 😉