Generate errors summary, Cannot find module 'pages_index.js?v=4759969c1da21941ddd6' from 'E:\XXX'.

[songyazhao]

Version

v1.4.0

Reproduction link

https://github.com/songyazhao/nuxt.js-issue3387__vue.js-issue8256

Steps to reproduce

Tips: My English is very poor, forgive me, The following part of the English description translation.

Reproduction Step

复现步骤

• Step one
• 第一步

# install dependencies
$ yarn install # Or npm install

• Step two

• 第二步

  nuxt.config.js Add the following configuration:

  nuxt.config.js 添加配置如下：

  module.exports = {
    ...
    build: {
      filenames: {
        chunk: '[name].js?v=[chunkhash]'
      }
    }
  }

• Step three

• 第三步

  # generate static project
  $ yarn generate # Or npm run generate

• Step four

• 第四步

  An error is as follows:

  呈现如下错误：

  Generate errors summary:
  
  ROUTE  /
  
    Error: Cannot find module 'pages_index.js?v=4759969c1da21941ddd6' from 'E:\GitRepo-Other\vue-server-renderer-bug-mini-repo'
  
    - sync.js:42 Function.module.exports [as sync]
      [vue-server-renderer-bug-mini-repo]/[resolve]/lib/sync.js:42:15
  
    - build.js:8350 r
      [vue-server-renderer-bug-mini-repo]/[vue-server-renderer]/build.js:8350:44
  
    - server-bundle.js:41 Function.requireEnsure [as e]
      server-bundle.js:41:25
  
    - server-bundle.js:2910 _47e85732
      server-bundle.js:2910:45
  
    - server-bundle.js:221 __WEBPACK_IMPORTED_MODULE_1_E_GitRepo_Other_vue_server_renderer_bug_mini_repo_node_modules_babel_runtime_core_js_promise___default.a.all.flatMapComponents
      server-bundle.js:221:25
  
    - server-bundle.js:212
      server-bundle.js:212:14
  
    - Array.map
  
    - server-bundle.js:211
      server-bundle.js:211:163
  
    - Array.map
  
    - server-bundle.js:210 flatMapComponents
      server-bundle.js:210:57
  
    - server-bundle.js:218 resolveRouteComponents
      server-bundle.js:218:147
  
    - server-bundle.js:229 getRouteData
      server-bundle.js:229:9
  
    - server-bundle.js:309 setContext
      server-bundle.js:309:48
  
    - server-bundle.js:1609 createApp
      server-bundle.js:1609:76
  
    - server-bundle.js:1284 module.exports.__webpack_exports__.default
      server-bundle.js:1284:100
  
    - build.js:8446
      [vue-server-renderer-bug-mini-repo]/[vue-server-renderer]/build.js:8446:15

Bug tracking

Bug 追溯

nuxt.Js the configuration above will generate related webpack configuration is as follows:

nuxt.js 的上述配置会生成相关的 webpack 配置如下：

module.exports = {
...
  output: {
    ...
    chunkFilename: '[name].js?v=[chunkhash]'
  }
...
}

Locating the problem:

最终定位到问题：

vue-server-renderer/server-plugin.js:78

if (asset.name.match(/\.js$/)) {
  ...
}

Modified to:

修改为：

if (isJS(asset.name)) {
  ...
}

Can solve this problem, but I don't know his judgment changed here will not affect other places

可以解决这个问题，但是我不知道他这里的判断改了会不会对其他地方产生影响

What is expected ?

Compile successfully. No error.

What is actually happening?

Error: Cannot find module 'pages_index.js?v=4759969c1da21941ddd6' from 'E:\GitRepo-Other\vue-server-renderer-bug-mini-repo'

_{This bug report is available on Nuxt.js community (#c7167)}

[songyazhao]

vuejs#8256
vuejs#5637

[shiyuegongsui]

我也遇到这个问题~ 有好的办法解决吗

[songyazhao]

@shiyuegongsui
在Vue 或 Nuxt官方修复之前，我想到的是暂时通过间接修改vue-server-renderer源码。

先安装一个 npm 的模块：

npm install shelljs -D # OR yarn add shelljs -D

接着在项目下新建文件：

• build/vue-server-renderer.patch.js：给 vue-server-renderer 模块打补丁

build/vue-server-renderer.patch.js

const { resolve } = require('path')
const fs = require('fs')
const SSRJSPath = resolve(__dirname, '../node_modules/vue-server-renderer/server-plugin.js')
const consola = require('consola')
const logProvider = consola.withScope('vue:patch')

module.exports = VueSSRPatch()

/**
 * 对 `vue-server-renderer/server-plugin.js` 源码内容进行替换
 * asset.name.match(/\.js$/)
 * =>
 * isJS(asset.name)
 */
function VueSSRPatch() {
  //- 检测该模块是否存在
  if (fs.existsSync(SSRJSPath)) {
    let regexp = /asset\.name\.match\(\/\\\.js\$\/\)/
    let SSRJSContent = fs.readFileSync(SSRJSPath, 'utf8')

    //- 检测是否存在需要替换的内容(通常是指该项目在本机第一次运行)
    if (regexp.test(SSRJSContent)) {
      logProvider.start(`发现vue-server-renderer模块，开始执行修补操作！`)

      SSRJSContent = SSRJSContent.replace(regexp, 'isJS(asset.name)')
      fs.writeFileSync(SSRJSPath, SSRJSContent, 'utf8')

      logProvider.ready(`修补完毕！`)
      return true
    }

    logProvider.warn(`该模块已修补过，无需再次修补，可直接运行\`npm run dev\` 或 \`npm run gen\``)
    return false
  }

  logProvider.warn(`未发现该模块，跳出本次修复！`)
  return false
}

最后在 package.json 中 scripts 添加 patch：

  "scripts": {
    "dev": "nuxt",
    "generate": "nuxt generate",
    "patch": "node build/vue-server-renderer.patch"
  }

patch：本机第一次运行或者更新相关模块(vue-server-renderer)时需要执行一次。

[clarkdo]

@songyazhao Thank you for so detailed investigation, I have opened a pull request.

But I suggest that please use default value [name].[contenthash].js of chunk name.

[songyazhao]

@clarkdo Hi

I updated to nuxt@2.x, The problem has arisen again.

Reproduction link

https://github.com/songyazhao/nuxt.js-issue3387__vue.js-issue8256/tree/nuxt@2.x

I found the reason, I'll submit an PR later

[TheAlexLichter]

Resolved with #4073

This bug-report has been fixed by @songyazhao.