vue2项目，热更新失效 #5445

luoriwusheng-xia · 2024-01-24T09:11:33Z

System Info

node: 20.10.0

Details

在 vue2项目，我改造 vue-element-admin ，发现热更新不生效，但是改动 App.vue, 热更新是生效的。改动 src/layout/index.vue

热更新失效

相关配置

const path = require('path')
const rspack = require("@rspack/core");
const { VueLoaderPlugin } = require("vue-loader");
const { defineConfig } = require("@rspack/cli");

const dotenv = require('dotenv')
const { expand } = require('dotenv-expand')



const env = process.env.NODE_ENV || "development";
const dotEnvFiles =
  env === "development" ? [".env.development"] : [".env.production"];

dotEnvFiles.forEach((doteEnvFile) => {
  let content = dotenv.config({ path: doteEnvFile })
  console.log('读取到的内容');

  console.log(content);
  expand(content)
});
const VUE_APP = /^VUE_APP_/i;

const filterEnv = {};
const define = Object.keys(process.env)
  .filter((key) => VUE_APP.test(key))
  .reduce((env, key) => {
    filterEnv[key] = process.env[key];
    env[`process.env.${key}`] = JSON.stringify(process.env[key]);
    return env;
  }, {});

// console.log('拿到的内容');
// console.log(define);


/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = defineConfig({
  context: __dirname,
  entry: {
    main: "./src/main.js"
  },
  devServer: {
    historyApiFallback: true,

    setupMiddlewares (middlewares, devServer) {
      let server = require('./mock/mock-server.js')

      server(devServer.app)

      return middlewares
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new rspack.HtmlRspackPlugin({
      template: "./public/index.html",
      templateParameters: {
        BASE_URL: '/'
      }
    }),

    new rspack.DefinePlugin({
      "process.env": JSON.stringify(filterEnv)
    })
  ],

  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    },

    extensions: [".js", ".json", ".wasm", '.vue', '.jsx', '.tsx']
  },
  module: {
    rules: [

      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              experimentalInlineMatchResource: true
            }
          }
        ]
      },

      {
        test: /\.[jt]sx$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@vue/babel-preset-jsx", { compositionAPI: true }]
            ]
          }
        }
      },

      {
        test: /\.less$/,
        loader: "less-loader",
        type: "css",
      },
      {
        test: /\.scss$/,
        loader: "sass-loader",
        type: "css",
        exclude: /node_modules/
      },
      {
        test: /\.svg$/,
        type: "asset/resource",
      },

      {
        test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
        type: 'asset',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset',
      }
    ]
  }
})

{
  "name": "vue-element-admin",
  "version": "4.4.0",
  "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "new": "plop",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
    "axios": "0.18.1",
    "clipboard": "2.0.4",
    "codemirror": "5.45.0",
    "core-js": "3.6.5",
    "driver.js": "0.9.5",
    "dropzone": "5.5.1",
    "echarts": "4.2.1",
    "element-ui": "^2.15.14",
    "file-saver": "2.0.1",
    "fuse.js": "3.4.4",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
    "jszip": "3.2.1",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "screenfull": "4.2.0",
    "script-loader": "0.7.2",
    "sortablejs": "1.8.4",
    "vue": "^2.7.16",
    "vue-count-to": "1.0.13",
    "vue-router": "3.0.2",
    "vue-splitpane": "1.0.4",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0",
    "xlsx": "0.14.1"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@rspack/cli": "^0.5.2",
    "@rspack/core": "^0.5.2",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.9.1",
    "dotenv": "^16.4.0",
    "dotenv-expand": "^10.0.0",
    "less": "^4.2.0",
    "less-loader": "^12.1.0",
    "mockjs": "^1.1.0",
    "sass": "^1.70.0",
    "sass-loader": "^14.0.0",
    "vue-loader": "^15.11.1",
    "vue-style-loader": "^4.1.3"
  },
  "bugs": {
    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "license": "MIT",
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
  }
}

Reproduce link

No response

Reproduce Steps

克隆vue-element-admin
对项目进行改造
修改某一个vue文件

The text was updated successfully, but these errors were encountered:

h-a-n-a · 2024-01-24T10:52:43Z

把上述操作合并到一个 repo 里，然后贴下这个 repo 的链接吧。

github-actions · 2024-01-24T10:53:00Z

Hello @luoriwusheng-xia, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

luoriwusheng-xia · 2024-01-24T13:44:03Z

把上述操作合并到一个 repo 里，然后贴下这个 repo 的链接吧。

这里，这个仓库代码

https://gitee.com/luoriwusheng/vue-element-admin.git

里面的侧边操作栏的这个路由文件，改动代码，热更新就是失效的。

h-a-n-a · 2024-01-25T03:41:33Z

把上述操作合并到一个 repo 里，然后贴下这个 repo 的链接吧。

这里，这个仓库代码

https://gitee.com/luoriwusheng/vue-element-admin.git

里面的侧边操作栏的这个路由文件，改动代码，热更新就是失效的。

应该和这个有关，可以尝试一下 #5446

luoriwusheng-xia · 2024-01-25T12:17:05Z

把上述操作合并到一个 repo 里，然后贴下这个 repo 的链接吧。

这里，这个仓库代码
https://gitee.com/luoriwusheng/vue-element-admin.git
里面的侧边操作栏的这个路由文件，改动代码，热更新就是失效的。

应该和这个有关，可以尝试一下 #5446

这个大概多久会发布一个新的版本 tag， issue里面的版本号，好像是内部的版本号

xc2 · 2024-01-25T14:56:40Z

@luoriwusheng-xia 可以提供以下你安装依赖的 lock 文件吗，你的仓库里没有，我这边没能复现你的问题

luoriwusheng-xia · 2024-01-26T01:13:24Z

@luoriwusheng-xia 可以提供以下你安装依赖的 lock 文件吗，你的仓库里没有，我这边没能复现你的问题

lock文件已提交，原始仓库忽略了lock文件。

luoriwusheng-xia · 2024-01-26T02:54:14Z

@luoriwusheng-xia 可以提供以下你安装依赖的 lock 文件吗，你的仓库里没有，我这边没能复现你的问题

放了一个gif动画，如果播放不了的话，可以留一个你的邮箱，我发你邮箱

xc2 · 2024-01-28T06:45:43Z

感谢，mac 没能复现，最终在 windows native 下复现了。

测试矩阵：

node:
  - 18.19.0
rspack:
  - 0.5.2
  - 0.5.2-canary-d22f049-20240128005446 (2024.01.28 nightly)
shell:
  - powershell
  - pwsh
  - cmd
terminal:
  - windows terminal
  - vscode terminal
command:
  - `npm run dev`
  - `./node_modules/.bin/rspack serve`
editor:
  - vscode
  - vim

均可以复现。

另外还测试了 mac + pwsh，无法复现。

另外经测试跟 #5398 这个 case 无关，相应变更无法修复该问题。

具体表现有点像没有触发 rebuild，不只是没有触发 hmr（手动刷新页面后还是老的代码）。

cc @h-a-n-a

update

rspack build -w 也没有触发 rebuild

xc2 · 2024-01-28T07:23:16Z

bug 触发条件：

rspack windows build
修改的文件是被通过 alias request 请求的

example:

// changes on `aliased.js` doesn't emit rebuilding
console.log(require('@/aliased'))

// changes on `normal.js` emits rebuilding
console.log(require('./normal'))

// changes on next line emits rebuilding
console.log('entry')

minimal repro:

https://github.com/xc2/rspack-repro-rebuild-alias.git

file dependencies

Boshen · 2024-03-04T08:14:41Z

This has been fixed in the latest release.

xc2 · 2024-03-04T09:13:03Z

thanks @Boshen

luoriwusheng-xia · 2024-03-13T06:28:44Z

This has been fixed in the latest release.

thanks ！

After verification in the warehouse, the issue has been fixed

luoriwusheng-xia added bug Something isn't working pending triage The issue/PR is currently untouched. labels Jan 24, 2024

h-a-n-a added the need reproduction label Jan 24, 2024

h-a-n-a removed the pending triage The issue/PR is currently untouched. label Jan 25, 2024

This was referenced Jan 28, 2024

0.5.1+版本VUE3项目HMR失效 #5446

Closed

aliased requests in resolver_context.file_dependencies are not normalized/canonicalized oxc-project/oxc-resolver#73

Closed

Boshen self-assigned this Feb 3, 2024

xc2 added A-resolver Area: resolver and removed need reproduction labels Feb 6, 2024

Boshen closed this as completed Mar 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vue2项目，热更新失效 #5445

vue2项目，热更新失效 #5445

luoriwusheng-xia commented Jan 24, 2024

h-a-n-a commented Jan 24, 2024

github-actions bot commented Jan 24, 2024

luoriwusheng-xia commented Jan 24, 2024

h-a-n-a commented Jan 25, 2024

luoriwusheng-xia commented Jan 25, 2024

xc2 commented Jan 25, 2024

luoriwusheng-xia commented Jan 26, 2024

luoriwusheng-xia commented Jan 26, 2024

xc2 commented Jan 28, 2024 •

edited

Loading

xc2 commented Jan 28, 2024 •

edited

Loading

Boshen commented Mar 4, 2024

xc2 commented Mar 4, 2024

luoriwusheng-xia commented Mar 13, 2024

vue2项目，热更新失效 #5445

vue2项目，热更新失效 #5445

Comments

luoriwusheng-xia commented Jan 24, 2024

System Info

Details

Reproduce link

Reproduce Steps

h-a-n-a commented Jan 24, 2024

github-actions bot commented Jan 24, 2024

luoriwusheng-xia commented Jan 24, 2024

h-a-n-a commented Jan 25, 2024

luoriwusheng-xia commented Jan 25, 2024

xc2 commented Jan 25, 2024

luoriwusheng-xia commented Jan 26, 2024

luoriwusheng-xia commented Jan 26, 2024

xc2 commented Jan 28, 2024 • edited Loading

update

xc2 commented Jan 28, 2024 • edited Loading

Boshen commented Mar 4, 2024

xc2 commented Mar 4, 2024

luoriwusheng-xia commented Mar 13, 2024

xc2 commented Jan 28, 2024 •

edited

Loading

xc2 commented Jan 28, 2024 •

edited

Loading