pre-bundling error：pre bundling CommonJS dependencies, cannot transform require image / svg successful

[HermitGeek]

Problem description

Pre bundling CommonJS dependencies, cannot transform require image / svg successful

Example

• The npm dependencies demo in node_modules
  

• After npm run dev --force in my project successful
  Look at _metadata.json file in /node_modules/.vite

{
  "hash": "f35b935a",
  "browserHash": "d36b7f42",
  "optimized": {
    "vue": {
      "file": "/Users/my-code/vue - test/vue3-vite/node_modules/.vite/vue.js",
      "src": "/Users/my-code/vue - test/vue3-vite/node_modules/vue/dist/vue.runtime.esm-bundler.js",
      "needsInterop": false
    },
    "package-demo": {
      "file": "/Users/my-code/vue - test/vue3-vite/node_modules/.vite/package-demo.js",
      "src": "/Users/my-code/vue - test/vue3-vite/node_modules/package-demo/dist/index.js",
      "needsInterop": true
    }
  }
}

• But there are still require('.../mage.png') in /node_modules/.vite/package-demo.js

var __commonJS = (callback, module) => () => {
  if (!module) {
    module = {exports: {}};
    callback(module.exports, module);
  }
  return module.exports;
};

// node_modules/package-demo/dist/index.js
var require_dist = __commonJS((exports, module) => {
  var obj = {
    image: require("/Users/my-code/vue - \u9879\u76EE\u6D4B\u8BD5/vue3-vite/node_modules/package-demo/dist/image.png")
  };
  module.exports = {
    obj
  };
});

// dep:package-demo
var package_demo_default = require_dist();
export {
  package_demo_default as default
};
//# sourceMappingURL=package-demo.js.map

Looking forward to being answered, thanks

vite version: 2.0.5
npm version: 7.6.3
computer operating system: macOS 10.15.4

[HermitGeek]

@underfin hello What is the progress of solving this problem？

[Aslemammad]

@ZXvictory Hmm, Could you send a GitHub/Codesandbox link of this project you have? As a small repro, I'd like to investigate it.

[ci010]

@ZXvictory I wonder what do you expect the require('./image.png') to be? Is it something like './image.png.js', or should it be resolved as an url string?

[HermitGeek]

@ci010 All right, But I think there shouldn't be "require" After pre-bundling

[HermitGeek]

@ci010 @Aslemammad thanks

[patak-dev]

@ZXvictory would you create a minimal reproduction in GitHub for this issue using the latest version? Thanks!

[github-actions]

Hello @ZXvictory. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[HermitGeek]

@Aslemammad @patak-js ok, this is GitHub demo
https://github.com/ZXvictory/vite-demo-pre-bundling-bug

after npm i vite-dev-demo@1.3.0 -S、npm run dev
there arr Uncaught ReferenceError: require is not defined error

Thanks!

[Aslemammad]

@ZXvictory Thanks, let me investigate it.

[Aslemammad]

@ZXvictory @patak-js Vitejs doesn't support commonjs, and vite-dev-demo uses require to load the img.png.
it solves the problem when I use:

import img from 'vite-dev-demo/src/img.png'

[HermitGeek]

@Aslemammad Brother, I think Vite can support commonjs by pre-bundling
I update GitHub demo https://github.com/ZXvictory/vite-demo-pre-bundling-bug
I require a JS file, after pre-bundling, Vite polyfill require JS file, but require image still exists

Thanks

[Aslemammad]

@ZXvictory Yea, got that, I'm investigating, thanks.

[ygj6]

I looked into this probelm, vite use esbuild in pre-bundling, and mark .svg/.png/.css file as external.
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L79

 build.onResolve(
        {
          filter: new RegExp(`\\.(` + externalTypes.join('|') + `)(\\?.*)?$`)
        },
        async ({ path: id, importer, kind }) => {
          const resolved = await resolve(id, importer, kind)
          if (resolved) {
            return {
              path: resolved,
              external: true
            }
          }
        }
      )

According to the esbuild API documentation:

You can mark a file or a package as external to exclude it from your build. Instead of being bundled, the import will be preserved (using require for the iife and cjs formats and using import for the esm format) and will be evaluated at run time instead.

So far I didn't have a good solution yet.

[ygj6]

@ZXvictory you can try this plugin https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {esbuildCommonjs} from '@originjs/vite-plugin-commonjs'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps:{
    esbuildOptions:{
      plugins:[
        esbuildCommonjs()
      ]
    }
  }
})

FYI, modules.exports should be module.exports in your vite-dev-demo.

[SheldonWatson]

@Aslemammad Brother, I think Vite can support commonjs by pre-bundling
I update GitHub demo https://github.com/ZXvictory/vite-demo-pre-bundling-bug
I require a JS file, after pre-bundling, Vite polyfill require JS file, but require image still exists

Thanks

I also encounter this problem, can require some js but can't require image such as .png

[SheldonWatson]

@ZXvictory you can try this plugin https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {esbuildCommonjs} from '@originjs/vite-plugin-commonjs'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps:{
    esbuildOptions:{
      plugins:[
        esbuildCommonjs()
      ]
    }
  }
})

FYI, modules.exports should be module.exports in your vite-dev-demo.

Does this plugin work? I tried it, but still have this error said require is not defined

[bfischer1121]

@ZXvictory you can try this plugin https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {esbuildCommonjs} from '@originjs/vite-plugin-commonjs'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps:{
    esbuildOptions:{
      plugins:[
        esbuildCommonjs()
      ]
    }
  }
})

FYI, modules.exports should be module.exports in your vite-dev-demo.

Thanks @ygj6 -- this worked for me.

Specified the library, per their docs (e.g., esbuildCommonjs(['@react-navigation/elements']))

[bfischer1121]

Just a suggestion but it'd be awesome if this was transparently handled by Vite