vite fails when cjs module requires a module with "#" in its path

[bboydflo]

Describe the bug

I have a dependency on pagedjs which depends on d which depends on es5-ext/string/#/contains. inside d module there is actually a require call that I thinks it fails inside vite contains = require("es5-ext/string/#/contains"); (!!!NOTICE # SIGN INSIDE REQUIRE!!!)

Reproduction

1. add "pagedjs" version "0.1.43" to a vite project
2. import some deps from pagedjs and use it

   import { Previewer } from 'pagedjs'
   
   // ... 
   
   const pagedjsPreviewer = new Previewer()
   pagedjsPreviewer.preview()
   
   // ...

3. run npm run dev

System Info

• vite version: 2.0.5
• Operating System: Mac OS
• Node version: v12.21.0
• Package manager (npm/yarn/pnpm) and version: [email protected]

Logs (Optional if provided reproduction)

Pre-bundling dependencies:
  pagedjs
  date-fns
  highcharts
  chunk
  object-treeify
(this will be run only when your dependencies or config have changed)
 > node_modules/d/index.js:7:30: error: Could not read from file: /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/es5-ext/string/index.js#/contains
    7 │   , contains        = require("es5-ext/string/#/contains");
      ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > node_modules/event-emitter/pipe.js:4:29: error: Could not read from file: /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/es5-ext/array/index.js#/remove
    4 │   , remove         = require('es5-ext/array/#/remove')
      ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 2 errors:
node_modules/d/index.js:7:30: error: Could not read from file: /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/es5-ext/string/index.js#/contains
node_modules/event-emitter/pipe.js:4:29: error: Could not read from file: /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/es5-ext/array/index.js#/remove
    at failureErrorWithLog (/Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:1177:15)
    at buildResponseToResult (/Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:913:32)
    at /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:1008:20
    at /Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:559:9
    at handleIncomingPacket (/Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:648:9)
    at Socket.readFromStdout (/Users/florinonciu/development/experiments/noc-reporting-tool-vite/node_modules/esbuild/lib/main.js:526:7)
    at Socket.emit (events.js:314:20)
    at addChunk (_stream_readable.js:297:12)
    at readableAddChunk (_stream_readable.js:272:9)
    at Socket.Readable.push (_stream_readable.js:213:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! noc-reporting-tool-vite@0.0.0 dev: `vite --debug serve src/frontend/monthly-report`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the noc-reporting-tool-vite@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/florinonciu/.npm/_logs/2021-03-02T23_13_45_296Z-debug.log

[YufJi]

+1

[YufJi]

check filePath has '?' or '#' does exists：

  if (postfixIndex > 0 && !fs.existsSync(fsPath.slice(0, postfixIndex+1))) {
    file = fsPath.slice(0, postfixIndex)
    postfix = fsPath.slice(postfixIndex)
  }

[bboydflo]

check filePath has '?' or '#' does exists：

  if (postfixIndex > 0 && !fs.existsSync(fsPath.slice(0, postfixIndex+1))) {
    file = fsPath.slice(0, postfixIndex)
    postfix = fsPath.slice(postfixIndex)
  }

thanks. will try it!

[benmccann]

This issue is impossible to search for because you can't search #, so I'm leaving a comment here to make it easier to find. pound sign / number sign / hash sign 😄

[heygrady]

This same issue was encountered in the rollup community

• Bundle fails for form require('../#/folder') due to hashbang-only directory rollup/plugins#528
• fix(node-resolve): resolve hash in path rollup/plugins#588

They fixed it by simply not worrying about a hash in the path whatsoever.

[a-bolz]

I'm running into this issue as well. Is there a temporary workaround while we wait for the fix to get merged?

[heygrady]

This feature was introduced in Vite 2.0.0 34064c8

It's not clear why this was added. Is there any documentation for what vite does with the hash postfix?

[heygrady]

TIL: Node supports subpath imports and requires that they start with a "#".

Entries in the imports field must always start with # to ensure they are disambiguated from package specifiers.

This leads to code like this (from the node manual):

import '#dep'

[Shinigami92]

#2432

[alex3683]

I had the same problem and just wanted to share my workaround. In my vite.config,ts I just added an alias to the esm dist version of pagedjs, which includes all the shims and thus doesn't run into the #-trap.

export default defineConfig({
  plugins: [/* ... */],
  resolve: {
      alias: {
        pagedjs: 'pagedjs/dist/paged.esm.js',
      },
    }
})

[bboydflo]

@alex3683 seems like a simple solution. will try it. thanks a lot!

[Shinigami92]

@alex3683 seems like a simple solution. will try it. thanks a lot!

Please report back if it works for you. If so, we can label this issue with has workaround

[bboydflo]

Yes, it does work. Thank you @alex3683

[marklai1998]

@alex3683 seems like a simple solution. will try it. thanks a lot!

Please report back if it works for you. If so, we can label this issue with has workaround

this doesn't work for me with redoc