"vite": "^4.1.4",
"vite-plugin-require-transform": "^1.0.9",
"typescript": "^4.9.5",
"vue": "^3.2.47",

Vite2.9.9 + Vue2 +vite-plugin-require-transform: "^1.0.17" 的项目中，npm run build构建的时候报错

报错内容：

[_vite_plugin_require_transform_] Unexpected token (1:42) - make sure this is an expression.
> 1 | (_vite_plugin_require_transform_validator/)

配置如下：

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import Markdown from 'vite-plugin-md';
import requireTransform from 'vite-plugin-require-transform';
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    createVuePlugin({ include: [/\.vue$/, /\.md$/, /\.cur$/] }),
    Markdown(),
    requireTransform({
      fileRegex: /.js$|.vue$/
    })
  ],
  global: {},
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~': resolve(__dirname, './packages'),
      source: resolve(__dirname, './source'),
      vue$: 'vue/dist/vue.esm.js'
    }
  }
});

when I use this plugin to deal wiith the problem of 'require',it was create a new error



you can see it has the new problem

SyntaxError: Unexpected token (1:33) - make sure this is an expression.

1 | (vite_plugin_require_transform./)

the packages require like this:

var callBind = require('./')
```

My vite.config.ts is pretty straight forward:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import requireTransform from 'vite-plugin-require-transform';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    requireTransform({
      //filter files that should enter the plugin
      fileRegex: /.ts$|.tsx$|.js$|.jsx$/,
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
  ],
  resolve: {
    alias: {
      web3: 'web3/dist/web3.min.js'
    },
  }
})

When I use vite build command to build the project, error occur:

[commonjs] Identifier '_vite_plugin_require_transform_CoinbaseWalletSDK' has already been declared (12:6) in /home/matrixhcl/www/increact/nft-vue3-example/node_modules/@coinbase/wallet-sdk/dist/index.js
file: /home/matrixhcl/www/increact/nft-vue3-example/node_modules/@coinbase/wallet-sdk/dist/index.js:12:6
10: var CoinbaseWalletProvider_2 = require("./provider/CoinbaseWalletProvider");
11: Object.defineProperty(exports, "CoinbaseWalletProvider", { enumerable: true, get: function () { return CoinbaseWalletProvider_2.CoinbaseWalletProvider; } });
12: exports.default = CoinbaseWalletSDK_1.CoinbaseWalletSDK;
          ^
13: if (typeof window !== "undefined") {
14:     window.CoinbaseWalletSDK = CoinbaseWalletSDK_1.CoinbaseWalletSDK;

the error should be coming from this library: https://www.npmjs.com/package/@walletconnect/web3-provider

import vitePluginRequireTransform from 'vite-plugin-require-transform'
plugins: [
vitePluginRequireTransform({
fileRegex: /.ts$|.tsx$/
})
]

This expression is not callable.
Type 'typeof import("c:/Users/garwood/Documents/security-validate-web/node_modules/vite-plugin-require-transform/dist/index")' has no call signatures.ts

Can you add an exclusion option？
Thank you very much (ever so much) (most sincerely) (indeed) (from the bottom of my heart)

项目启动时 ,
requireTransform is not a function

This plugin adds new code near the top of the file, but it isn't source-mapped.
(Example uses error from #48 )

Note how the error points at line 1 (import of rrule) in the source-mapped code, even though it should point at line 16 (require of luxon).
Currently, no entries appear to be added to the sourcemap which map the new import line to the original require line.

Source-mapped code:

Actual code:

启动时报错：TypeError: requireTransform is not a function

Here is the error when run vite build

[_vite_plugin_require_transform_] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6)
error during build:
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6)

Our project setup is some what different, we have the vue-cli running along side vite. It's a Vue3 based project but using tsx instead of vue for component (please don't ask, I didn't start this whole thing) and I can not show you any code (company policy). Basically we are in the transitional phrase from vue-cli to vite.

Just wondering if anyone encounter the similar issue and any solution so far.

能支持 一下 类似require('...' + 变量 + '.png')这种格式吗

package.json 里面的 main: "index.js", 但是用npm install 下来并没有看到有个 index.js 文件的

Reproduce repositories https://github.com/150148313/vitePluginRequire/tree/main

https://www.npmjs.com/package/vite-plugin-require-transform/v/1.0.11?activeTab=code

is missing the dist/index.d.ts

问题描述

vite配置

import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform(),
  ],
})

测试代码

const img1 = require('@/assests/v1/1.png')
const img2 = require('@/assests/v2/1.png')

console.log(img1 === img2)

然后npm run build，发现只输出了一张1.[hash].png

原因分析

看了下代码，应该是

//get the file name
if (importPathHandler) {
    requirePath = importPathHandler(requirePath);
} else {
    requirePath = requirePath.replace(/(.*\/)*([^.]+).*/ig, "$2").replace(/-/g, '_');
}
requirePathMatcher[requirePath] = originalRequirePath;
if (!importMap.has(requirePath)) {
    importMap.set(requirePath, new Set());
}

这里默认的 importPathHandler 使用文件名作为importMap键值，导致不同路径但同名的文件，后续的文件都不会放在importMap了，看起来是个bug

Sourcemap is likely to be incorrect: a plugin (vite_plugin_require_transform) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

https://rollupjs.org/guide/en/#transform

https://stackblitz.com/edit/vitejs-vite-akckaq?file=src%2FApp.vue,vite.config.js&terminal=dev

tree-shaking does not work when use vite-plugin-require-transform.

e.g.:

if (process.env.NODE_ENV === 'development') {
  require('axios');
  console.log('hello');
}

will transform:

require("axios");
...

Even if process.env.NODE_ENV is development, the require("axios"); still added at the top, and, the console.log('hello'); has been removed (treeshaking).

Why does the package report an error after configuring the vite-plugin-require-transform plug-in and running normally，"default" is not exported by "node_modules/react/cjs/react.development.js", imported by "node_modules/react/index.js". After that, the configuration is marked successfully

import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
plugins: [
react(),
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => antd/es/${name}/style,
},
],
}),
requireTransform({
fileRegex: /.js$|.jsx$/,
}),
],
build:{
commonjsOptions: {
transformMixedEsModules: true
}
},
resolve: {
// 路径别名，亦可更换成数组写法
alias: {
src: path.resolve(__dirname, './src'),
},
},
css: {
preprocessorOptions: {
// 配置less解析
less: {
javascriptEnabled: true,
},
},
},
});

error when starting dev server:
TypeError: requireTransform is not a function

日志：
"C:\Program Files\nodejs\npm.cmd" run build

[email protected] build
vite build

vite v4.3.5 building for production...
✓ 12862 modules transformed.
✓ built in 27.39s
[commonjs--resolver] Identifier '_vite_plugin_require_transform_index' has already been declared (11:6) in C:/Users/95744/WebstormProjects/mytube-vue/node_modules/date-fns/format/index.js
file: C:/Users/95744/WebstormProjects/mytube-vue/node_modules/date-fns/format/index.js:11:6
9: var _index2 = _interopRequireDefault(require("../subMilliseconds/index.js"));
10: var _index3 = _interopRequireDefault(require("../toDate/index.js"));
11: var _index4 = _interopRequireDefault(require("../_lib/format/formatters/index.js"));
^
12: var _index5 = _interopRequireDefault(require("../_lib/format/longFormatters/index.js"));
13: var _index6 = _interopRequireDefault(require("../_lib/getTimezoneOffsetInMilliseconds/index.js"));
error during build:
SyntaxError: Identifier '_vite_plugin_require_transform_index' has already been declared (11:6) in C:/Users/95744/WebstormProjects/mytube-vue/node_modules/date-fns/format/index.js
at pp$4.raise (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:21134:13)
at pp$3.declareName (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:21210:26)
at pp$7.checkLValSimple (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:19818:48)
at pp$7.checkLValPattern (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:19860:10)
at pp$8.parseVarId (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18994:8)
at pp$8.parseVar (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18976:10)
at pp$8.parseVarStatement (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18842:8)
at pp$8.parseStatement (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18590:17)
at pp$8.parseTopLevel (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18492:21)
at Parser.parse (file:///C:/Users/95744/WebstormProjects/mytube-vue/node_modules/rollup/dist/es/shared/node-entry.js:18264:15)

Process finished with exit code 1

vite.confit.js:
export default defineConfig({ plugins: [vue(), requireTransform({ fileRegex: /.js$|.vue$/ })], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } } })
要如何解决？
似乎可以尝试添加一个拦截器，让其排除部分文件夹，比如node模块里的js文件？

if you use vue2, don use current plugin, has many error,recommend use vite-plugin-require,Wasting me a lot of time Does this plug-in support vue2?

[vite_plugin_require_transform] Unexpected token (1:33) - make sure this is an expression.

In node js,
We can use
function (resolve) { require(['../somefile.vue'], resolve) }
how can we transform this code?

Because changes of #50 to the README had been reverted as part of #50 (comment) the code for the test-cases in the README isn't what the plugin does anymore since #50.

The README should be shortened again, or it should be updated with the new examples (and spell-checked / fix grammar mistakes).

Our code is like this:

const { DateTime } = require('luxon')

got transformed to:

import _vite_plugin_require_transform_luxon from "/node_modules/.vite/deps/luxon.js?v=df68325f";
// [...]
const {DateTime} = _vite_plugin_require_transform_luxon;

The specified file is this:

import {
  DateTime,
  Duration,
  FixedOffsetZone,
  IANAZone,
  Info,
  Interval,
  InvalidZone,
  LocalZone,
  Settings,
  VERSION,
  Zone
} from "./chunk-U2VFXPDW.js";
import {
  init_define_process_env
} from "./chunk-3MEDTFDY.js";

// dep:luxon
init_define_process_env();
export {
  DateTime,
  Duration,
  FixedOffsetZone,
  IANAZone,
  Info,
  Interval,
  InvalidZone,
  LocalZone,
  Settings,
  VERSION,
  Zone
};
//# sourceMappingURL=luxon.js.map

It works with https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs which transforms it more like this:

import * as _vite_plugin_require_transform_luxon from "/node_modules/.vite/deps/luxon.js?v=df68325f";
// [...]
const {DateTime} = (_vite_plugin_require_transform_luxon.default || _vite_plugin_require_transform_luxon);

vite.config.ts

It doesn't seems to work. Why it didn't transform the files?

1.After introducing this plugin, packaging will report an error
2.My environment is vue3+vite
3.Hope to receive a reply as soon as possible! Thank you!

My package.json

{
  "name": "watch-cf",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@consumet/extensions": "^1.3.0",
    "@silvermine/videojs-quality-selector": "^1.2.5",
    "react": "^17.0.2",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.6.1",
    "react-toastify": "^9.1.1",
    "string-strip-html": "^13.0.6",
    "swiper": "^8.4.5",
    "swr": "^2.0.0",
    "video.js": "^7.20.3",
    "vite": "^3.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "autoprefixer": "^10.4.2",
    "daisyui": "^2.6.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23",
    "vite-plugin-require-transform": "^1.0.6"
  }
}

Here is the error:

[vite] requireTransform is not a function

When i use vite-plugin-require-transform to transform require syntax , it doesn't work.

Environment :

1. vite
2. vue2

import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import requireTransform from "vite-plugin-require-transform";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin(),
    requireTransform({
      fileRegex: /.vue$/,
    }),
  ],
});

requireTransform is not a function , it is a object

when I use it in requrireTransform.default, it will work normally.

Minimum reproducing demo

开发环境的时候正常，打包构建的时候如果fileRegex写了/.js$|.jsx$|.vue$/就报错
vite.config.js:
defineConfig({
plugins: [
requireTransform({
fileRegex: /.js$|.jsx$|.vue$/,
})
],
})
只写.vue正常打包
requireTransform({
fileRegex: /.vue$/,
}),

错误日志
✓ 516 modules transformed.
[vite_plugin_require_transform] Unexpected token (1:33) - make sure this is an expression.

1 | (vite_plugin_require_transform./)
| ^
file: C:/Users/Administrator/Desktop/xx/node_modules/_call-bind@1.0.2@call-bind/callBound.js:1:33
error during build:
SyntaxError: Unexpected token (1:33) - make sure this is an expression.
1 | (vite_plugin_require_transform./)
| ^
at instantiate (...\node_modules_@[email protected]@@babel\parser\lib\index.js:72:32)
at constructor (..._@[email protected]@@babel\parser\lib\index.js:358:12)
at Parser.raise (...\node_modules_@[email protected]@@babel\parser\lib\index.js:3335:19)

"vite": "^4.1.0",
"vue": "^3.0.0",
"vite-plugin-require-transform": "^1.0.9"

Ex1 (di in just js file):

let l = 'en' //'en.svg' work fine
let u = require(`@assets/img/flags/${l}.svg`) //'.svg' will loss
console.log(u)

Error: Failed to load url /src/assets/img/flags/ru (resolved id: /src/assets/img/flags/ru) 

Ex2 (di in vue component):

<img :src="require(`@assets/img/flags/${$i18n.locale}.svg`)"/>

Error: Cannot find module '' imported from...
42 |  import * as _vite_plugin_require_transform_os_ios_5 from "@assets/img/icons/os_ios.svg";
43 |  import * as _vite_plugin_require_transform_arrow_lang_6 from "@assets/img/icons/arrow_lang.svg";
44 |  import * as _vite_plugin_require_transform__7 from "";
   |                                                      ^

Version

"vite": "^2.9.8",
"vite-plugin-require-transform": "^1.0.3",

Usage

import requireTransform from 'vite-plugin-require-transform';
// ...
plugins: [
    // react(),
    requireTransform
 ],
// ...

Problem

failed to load config from /****/vite.config.js
error during build:
TypeError: requireTransform is not a function
    at file://*****/vite.config.js?t=1658215076374:14:5
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)

👋 Hey,

Great plugin 👏 , so far, it's the only that's been able to help me migrating from webpack to vite.
I have an auto generated typescript file based on my file structure. This file generates alot of dynamic require statements and your plugin so far has been the only one able to properly transpile this.
However, I have most files with duplicates of different extensions, and your plugin breaks when I import files in this condition:

  const ImagesHudShiftKeyJSON = require("assets/images/hud/shift_key.json").default;
  const ImagesHudShiftKeyPNG = require("assets/images/hud/shift_key.png").default;
  const ImagesHudXKeyJSON = require("assets/images/hud/X_key.json").default;
  const ImagesHudXKeyPNG = require("assets/images/hud/X_key.png").default;

Whether other native methods are not supported？

"typescript": "4.9.5",
"vite": "4.2.0",
"vite-plugin-require-transform": "1.0.12"

SyntaxError: Identifier '_vite_plugin_require_transform_fruchterman' has already been declared (55:6) in /node_modules/@antv/layout/lib/layout/index.js

Hello again,
do you know why it happens during the project build?

Thanks for your support

react项目中配置了该插件后，npm run dev 正常运行，但是npm run build 就会报"default" is not exported by "node_modules/react/cjs/react.development.js", imported by "node_modules/react/index.js".这样的错误，注释该配置代码，npm run build反而成功，请问该如何解决呢？

Hello, WarrenJones.

I found problem while i use this plugin.
When i run yarn dev, it threw an error [ TypeError: requireTransform is not a function ], i didn't know why.
I make some test, use command [ yarn create vite web ] to create project several times, the problem can't be fixed.
Can you take a look?

#env
[ yarn: 1.22.10 ]
[ vite/3.0.3 darwin-x64 node-v16.14.0]
[ "vite-plugin-require-transform": "^1.0.3" ]

#vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import requireTransform from 'vite-plugin-require-transform'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex:/.ts$|.tsx$|.vue$|.js$/
    }),
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
  ],
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  base: '/',
  build: {
    target: 'modules',
    outDir: 'dist',
    assetsDir: 'assets',
  },
  server: {
    port: 4000,
    open: true,
    cors: true,
    proxy: {
      '/proxy': {
        target: 'http://192.168.31.124:808/',
        changeOrigin: true,
        rewrite: (path)=>path.replace(/^\/proxy/, '')
      },
    }
  }
})

#package.json

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/node": "^18.6.1",
    "axios": "^0.27.2",
    "crypto-js": "^4.1.1",
    "element-plus": "^2.2.10",
    "google-protobuf": "^3.20.1",
    "jsencrypt": "^3.2.1",
    "less": "^4.1.3",
    "pinia": "^2.0.17",
    "protobufjs": "^7.0.0",
    "protoc-gen-ts": "^0.8.5",
    "protocol-buffers": "^5.0.0",
    "sass": "^1.54.0",
    "ts-proto": "^1.121.2",
    "unplugin-auto-import": "^0.10.1",
    "unplugin-vue-components": "^0.21.2",
    "vue": "^3.2.37",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vite-plugin-require-transform": "^1.0.3",
    "vue-tsc": "^0.38.4"
  }
}

We have some CSS which is affected by vitejs/vite#3924

We should add the imports in order of appearance.
Imports are correctly iterated in map insertion order.
However, they are added in reverse order due to ast.program.body.unshift.

There might be additional issues when mixing require and import, but we can probably ignore them for now.