tinajs/mina-webpack

使用 vant 1.6.7 的 van-picker 报错

luobogor opened this issue · 3 comments

package.json

    "@tinajs/mina-entry-webpack-plugin": "1.6.0",
    "@tinajs/mina-loader": "1.10.0",
    "@tinajs/mina-runtime-webpack-plugin": "1.3.7",
    "@tinajs/wxml-loader": "0.3.1-fork.0",
    "@tinajs/wxs-loader": "1.2.12",
    // .....

警告信息

 ./_/_node_modules_/@vant/weapp/lib/picker/index.wxml
./_/_node_modules_/@vant/weapp/lib/picker/index.wxml:include:-1:-1: Included path `../../../../../src/wxml/toolbar.31f03c.wxml` not found from `./_/_node_modules_/@vant/weapp/lib/picker/index.wxml`.

原因:template 相对路径处理错误

路径中的 src 不应该存在,应该这个路径才对

../../../../../../wxml/toolbar.31f03c.wxml

可以重现。目前定位到是在这种场景下用 relative-file-loader 解析路径会有误

https://github.com/ambar/relative-file-loader/blob/7f1222d/src/index.js#L45-L51

context: /tmp/example/src
outputUrl: wxml/toolbar.31f03c.wxml
issuerPath: /tmp/example/node_modules/@vant/weapp/lib/picker
publicPath: ../../../../../src/wxml/toolbar.31f03c.wxml

可以试试这样绕过,对 node_modules 内的依赖不使用 relative 规则

      {
        test: /\.wxml$/,
+        exclude: /node_modules/,
        use: [
          {
            loader: 'relative-file-loader',
            options: {
              name: 'wxml/[name].[hash:6].[ext]',
            },
          },
          {
            loader: '@tinajs/wxml-loader',
            options: {
              raw: true,
              enforceRelativePath: true,
              root: resolve('src'),
            },
          },
        ],
      },
+      {
+        test: /\.wxml$/,
+        include: /node_modules/,
+        use: [
+          {
+            loader: 'relative-file-loader',
+            options: {
+              name: 'wxml/[name].[hash:6].[ext]',
+              relative: false
+            },
+          },
+          {
+            loader: '@tinajs/wxml-loader',
+            options: {
+              raw: true,
+              enforceRelativePath: true,
+              root: resolve('src'),
+            },
+          },
+        ],
+      },

可以试试这样绕过,对 node_modules 内的依赖不使用 relative 规则

      {
        test: /\.wxml$/,
+        exclude: /node_modules/,
        use: [
          {
            loader: 'relative-file-loader',
            options: {
              name: 'wxml/[name].[hash:6].[ext]',
            },
          },
          {
            loader: '@tinajs/wxml-loader',
            options: {
              raw: true,
              enforceRelativePath: true,
              root: resolve('src'),
            },
          },
        ],
      },
+      {
+        test: /\.wxml$/,
+        include: /node_modules/,
+        use: [
+          {
+            loader: 'relative-file-loader',
+            options: {
+              name: 'wxml/[name].[hash:6].[ext]',
+              relative: false
+            },
+          },
+          {
+            loader: '@tinajs/wxml-loader',
+            options: {
+              raw: true,
+              enforceRelativePath: true,
+              root: resolve('src'),
+            },
+          },
+        ],
+      },

有用