originjs / vite-plugins

Packages

Package	Description	Version
@originjs/vite-plugin-commonjs	A vite plugin that support commonjs to esm in vite.
@originjs/vite-plugin-require-context	A vite plugin that support require.context in vite.
@originjs/vite-plugin-load-wasm	A vite plugin that support import and init webassembly file in vite.

vite-plugins's Issues

commonjs plugin: Uncaught Error: Dynamic require of "" is not supported

'require' in string will be unexpectedly parsed. eg. console.log("var foo = require('foo')")

Versions

• originjs: 1.0.2
• node: 14.18.1

Reproduction

source code:

 console.error("You need to import react !\nExample: react=require('react')");

'vite-plugin-commonjs' output:

import * as __require_for_vite_iuMxJX from "react"
console.error("You need to import react !\nExample: react=__require_for_vite_iuMxJX");

当引入node_modules/@XX开头的文件，会默认走到src/@XX

如果在node_modules中的插件是以@开头，导入就会有问题

如果我需要引入node_modules中的 @aa/plugin插件
/node_modules/@aa/plugin
const context = require.context('@aa/plugin'),会默认去到src/@aa/plugin。

建议先加载vite.config.ts中的resolve.alias,让用户自由配置从哪导入的模块:

export default ({mode})=>{
     return defineConfig({
         resolve: {
                alias: [
                    {
                        find:'@aa',
                        replacement:resolve(__dirname, 'node_modules/@aa'),
                    
                    },
                    {
                        find:'@',
                        replacement:resolve(__dirname, 'src'),
                    },
                ],
          },`
    })
}

欢迎大大们解答

Plugin transform required css

vite-plugins/packages/vite-plugin-commonjs/src/lib.ts

Line 36 in 568f5b7

importsString += `import * as ${packageName} from ${item[1].replace(/`/g, `'`)};\n`;

Plugin will transform require('./a.css') into import * as __require_for_vite_ygkiDV from './a.css';
In Vite 4.0.0, it will console a warning.Default and named imports from CSS files are deprecated. Use the ?inline query instead.

Bug Report | bugwith exporting boolean values in vite-plugin-commonjs

Versions

• originjs:
• node:

Reproduction

Additional Details

Steps to reproduce

What is Expected?

What is actually happening?

运行 vite build 时打包错误

Versions

• originjs:
  "@originjs/vite-plugin-require-context": "^1.0.6",
• node:
  14.17.3
• npm:
  7.21.0

Reproduction

Additional Details

Steps to reproduce

require.context('codemirror/addon/fold', true, /^\.\/[\s\S]+\/*\.(js|css)$/)

在运行 vite build 的时候报错

解析出来的正则表达式不是完整的

What is Expected?

What is actually happening?

Transform failed with 1 error: Unterminated string literal

Versions

• originjs: 1.0.3
• node: 16.14.2

Reproduction

https://stackblitz.com/edit/vitejs-vite-tsxtjf?file=vite.config.js,main.js

Uncomment the part in vite.config.js

Additional Details

Steps to reproduce

1. Open the reproduction link above
2. Uncomment the code part in vite.config.js
3. Re-run the project by vite, the error shows in console log and page does not load anything

What is Expected?

Expect the transform to succeed and the project runs properly

What is actually happening?

There is transform error:

 Internal server error: Transform failed with 1 error:<stdin>:2140:54: ERROR: Unterminated string literal
  Plugin: originjs:commonjs
  File: /home/projects/vitejs-vite-tsxtjf/packages/counter/dist/esm/index.js
      at failureErrorWithLog (/home/projects/vitejs-vite-tsxtjf/node_modules/esbuild/lib/main.js:1605:15)
      at eval (/home/projects/vitejs-vite-tsxtjf/node_modules/esbuild/lib/main.js:1394:29)
      at eval (/home/projects/vitejs-vite-tsxtjf/node_modules/esbuild/lib/main.js:666:9)
      at handleIncomingPacket (/home/projects/vitejs-vite-tsxtjf/node_modules/esbuild/lib/main.js:763:9)
      at Socket.readFromStdout (/home/projects/vitejs-vite-tsxtjf/node_modules/esbuild/lib/main.js:632:7)
      at EventEmitter.emit (https://vitejs-vite-tsxtjf.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:155573)
      at addChunk (https://vitejs-vite-tsxtjf.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:656476)
      at readableAddChunk (https://vitejs-vite-tsxtjf.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:656180)
      at Readable.push (https://vitejs-vite-tsxtjf.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:656864)
      at _0x461419.onStreamRead [as onread] (https://vitejs-vite-tsxtjf.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:783977)

Thank you so much for the plugin. Any help is really appreciated.

报错了，没有转换正确

我想导入 config 文件夹下的相关文件，但是使用了该查价转换，转换失败

Can provide configuration extension function for vite-plugin-commonjs

Can provide configuration extension function for vite-plugin-commonjs

使用import ｛xxx｝导入commonjs的module.exports导出的对象语法报错 ， does not provide an export name “name”

Versions

• originjs:
• node:

Reproduction

Additional Details

Steps to reproduce

What is Expected?

What is actually happening?

导入处代码main.js：
import {name} from ./demo

导出处代码demo.js：
module.exports={
name:1111
}

提示报错：does not provide an export name “name”

Is it possible to expose more configuration for `esbuildCommonjs`?

Hi. Thanks for the library.

Is your feature request related to a problem? Please describe.

The problem is, that I have to deal with module which is CommonJS, but as well it contains jsx in js files. The library is "@ui-kitten/components".

Describe the solution you'd like

Loader is configured here:

vite-plugins/packages/vite-plugin-commonjs/src/index.ts

Line 61 in 568f5b7

loader: "js",

As far as I understand if it would be possible to change it to "jsx" it suppose to work

Describe alternatives you've considered

no

Additional context

I'm trying to run react-native-web project with Vite. It's a torture

require context code regex match fail

Versions

• originjs: 1.0.7
• node: 14

Reproduction

Additional Details

const components = getFilesByContext(require.context('../components/views', false, /\.vue$/));

Steps to reproduce

1. pass the require.context return to a function params
2. the regex matched fail

What is Expected?

regex match right, no error

What is actually happening?

error with Unexpected token ')'

Tansform require error

source file:

converted file：

The method should be executed instead of directly exporting the method.
I think there should be a pair of parentheses here.

CommonJS plugin fails when strings contain comment markers

Versions

• node: 10.19.0

Reproduction

Attempt to import a minimized CommonJS module (I'm using zingchart-nodejs.min via @zingsoft/zingchart-svelte).

What is Expected?

It should be imported with no errors.

What is actually happening?

An error regarding an unterminated string is reported. The location given is for a comment marker // in the middle of a quoted string.

I took a look at the code (src/lib.ts). It looks as though you're stripping comments out without handling the case where the comment marker is inside a quoted string.

Perhaps the easiest way to fix this is to add an option to specify that the module you're importing is already minified and has no comments, and then don't call removeComments() if this option is enabled. Alternatively, you can just remove removeComments() completely, it doesn't matter if you convert a require into an import inside a comment.

Internal server error: Failed to resolve import "vertx“

version 1.0.1

在vite.config.js plugins添加 viteCommonjs()后，报 Internal server error: Failed to resolve import "vertx“

但是到这个文件看又没有这行代码。。

Unconditional default unwrapping causes problems

In line:

vite-plugins/packages/vite-plugin-commonjs/src/lib.ts

Line 37 in 74b73c3

code = code.replace(item[0], `${packageName}.default || ${packageName}`);

the transformation unconditionally unwraps the default property of exports if present. I use a library which assumes that require() returns an object with a default property and it is failing because the code ends up double-unwrapping which produces an undefined value.
AFAIK, unwrapping the default export is not part of the require expected behavior.

Versions

• originjs: 1.0.2
• node: 16.13.1

Reproduction

This is the case I am referring to specifically. In this line que component is required:
https://github.com/martinnov92/React-Splitters/blob/c9ca351426e55c41c2016c9cc1c647dd17974783/lib/Splitter.js#L20

In this line is it used:
https://github.com/martinnov92/React-Splitters/blob/c9ca351426e55c41c2016c9cc1c647dd17974783/lib/Splitter.js#L288

See that the use expects to have the default property.

Additional Details

Steps to reproduce

What is Expected?

That the transformed code be:

import * as __require_for_vite_JvR9OZ from "./Pane";
/*...*/
var Pane_1 = __require_for_vite_JvR9OZ;
/*...*/
React.createElement(Pane_1.default, /*...*/),

What is actually happening?

import * as __require_for_vite_JvR9OZ from "./Pane";
/*...*/
var Pane_1 = __require_for_vite_JvR9OZ.default || __require_for_vite_JvR9OZ;
/*...*/
React.createElement(Pane_1.default, /*...*/),

Which produces the error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Given the require semantics I think this should be considered a bug,. The default behavior should not automatically unwrap the default property. Maybe this behavior could be specified through a setting.

[vite-plugin-require-context] ViteRequireContext: is not a function

Steps to reproduce

Import it in vite.config.js then add it in the plugins array.
Let me show you what I mean...

import ViteRequireContext from '@originjs/vite-plugin-require-context';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [ViteRequireContext(), react()],
});

What is Expected?

Expected to load all the files within the specified folder using require.context() method.
for instance my code snippet is as below

export const heroTextureImports = importAllImages(
	require.context('../../assets', false, /\.(png|jpe?g|svg)/),
);

What is actually happening?

Throwing TypeError: ViteRequireContext is not a function.

Version

@originjs/vite-plugin-require-context: "^1.0.9"
react: "^18.2.0"
node: "v18.12.1"

import在某些情况下 失效

Versions

• [email protected]
• @originjs/vite-plugin-commonjs 1.0.3

Reproduction

配置vite方式

optimizeDeps.esbuildOptions = {
      plugins: [
        // lessLoader()
        esbuildCommonjs(['testA']),
      ],
    }

testA代码

const Form = require("testB");

testB中输出方式

export const Form = () => {}
export default function () {
    return ''
}

会报错找不到f2

https://github.com/originjs/vite-plugins/blob/main/packages/vite-plugin-commonjs/src/lib.ts#L37

require中有模版字符串没有解析

const img = require(../../assets/imgs/white.svg) //使用模版字符串 没有转换
const img2 = require('../../assets/imgs/white.svg')

thie regexp of requireRegex cannot match Template literals

Thanks for your amazing working first
thie regexp of requireRegex cannot match Template literals
I hope you can change requireRegex to /require\s*\(\s*(["'].*?["'])\s*\)/g;
I am badly need this

multiple transform for some commonjs package

look at this screenshot，this file has been transformed by some "esm to cjs"tools，and was compatibled by the function __importDefault, so 'no_data_png_1' will by wrapped with 'default' property, and with your plugin, you transfromed 'require'
to 'import', which will be transformed twice and wrapped another 'default' property.

In summary, this plugin is not suitable for package that is transformed by 'esm to cjs' tools!

'default' is not exported by..." TypeError: ViteRequireContext is not a function

Versions

• originjs: v1.0.9
• node: v20.14.0

Reproduction

Additional Details

Steps to reproduce

in vite.config.ts:

import ViteRequireContext from "@originjs/vite-plugin-require-context";
ViteRequireContext()
// however, ViteRequireContext .default() is OK. 

What is Expected?

What is actually happening?

failed to load config from /root/jaqn/vite.config.ts
error during build:
TypeError: ViteRequireContext is not a function
  

插件不生效

Versions

• originjs: 1.0.3
• node: 14.19.0
• vite: 3.0.2

按照如下文件配置后，插件没有生效，commonjs代码没有被转成es代码，所以报错：The requested module '/_fusion/lib/index.js' does not provide an export named 'Affix'

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import * as path from 'path';

const projectRootDir = path.resolve(__dirname);

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(projectRootDir, 'src') },
      {
        find: '@fusion',
        replacement: path.resolve(projectRootDir, '_fusion'),
      },
      {
        find: /^~(.*)$/,
        replacement: '$1',
      }  
    ]
  },
  plugins: [ viteCommonjs(), react()],
})

Bug Report - Issue with exporting boolean values in vite-plugin-commonjs

Versions

• originjs: "@originjs/vite-plugin-commonjs": "^1.0.3",
• node: v18.15.0

Reproduction

Additional Details

in a.js

  var a = false;
  export default a; 

in index.js

  var hasA = require("./a.js");

  const a = hasA || "A";
  
  console.log(a);
  
  module.exports = a;

a compressed value

Steps to reproduce

What is Expected?

a compressed value ：A

What is actually happening?

vite-plugins/packages/vite-plugin-commonjs/src/lib.ts

Line 37 in 568f5b7

code = code.replace(item[0], `(${packageName}.default || ${packageName})`);

If the line use ||, it will directly export a boolean value itself, such as false, which will cause the subsequent case to be used.

build以后，vit preview 会报Uncaught ReferenceError: require is not defined

安装的最新版本，viteconfig配置：

入口文件：

这个插件打包不支持吗

[vite-plugin-require-context] Import fails when the regular expression contains `,`

Versions

• originjs: v1.0.9
• node: v18.12.1

Steps to reproduce

• setup vite-plugin-require-context
• use require.context with the regular expression contains ,
  • ex. require.context(/[a-Z,]+.js/)

What is Expected?

• Import must not fail

What is actually happening?

• Import fails
  • because the following code causes the regular expression to be split in the middle.
  • const params = paramsSyntax.split(','); (lib/index.js: 54)

SyntaxError: Invalid regular expression: missing /
❯ node_modules/@originjs/vite-plugin-require-context/lib/index.js:57:40
❯ TransformContext.transform node_modules/@originjs/vite-plugin-require-context/lib/index.js:52:35

运行失败

改成’vite-plugin-commonjs‘则报错

node v14.17.5
vue v3.2.6
vite v2.5.2

vite-plugin-commonjs : not working for vite build

vite-plugin-commonjs is not working for vite build

Versions

• @originjs/vite-plugin-commonjs: 1.0.3

code

function registeredLayoutStore() {
  return {
    state: require('./store/state').default,
    actions: require('./store/actions').default,
    getters: require('./store/getters').default,
    mutations: require('./store/mutations').default
  };
}

Steps to reproduce

• run vite build
• run vite preview

What is Expected?

no error when use require

What is actually happening?

Uncaught ReferenceError: require is not defined

key2FilesMap为空，导致报错 start of generated code of __require_context_for_vite_function_0

【图1】

【图2】
如【图1】，如果key2FilesMap为空 {} ，会导致【图2】的错误

开启了 `transformMixedEsModules: true`, vite preview 依然报错 - require 是动态引入

开启了 transformMixedEsModules: true, require 动态引入文件， vite preview 依然报错

• 开启 transformMixedEsModules：
  build: {
  commonjsOptions: {
  transformMixedEsModules: true
  },
  },
• js文件内容

if (a) {
    require('a.js');
    require('b.scss');
}

if (b) {
    require(c.js');
}

或者：

function registeredLayoutStore() {
  return {
    state: require('./store/state').default,
    actions: require('./store/actions').default,
    getters: require('./store/getters').default,
    mutations: require('./store/mutations').default
  };
}

• run pnpm build
• run pnpm preview
• 错误如下：

Uncaught ReferenceError: require is not defined

Originally posted by @u373693041 in #9 (comment)

config some package require default or require all exports

in webpack's cjs bundle, has some package need require default, others need require all exports, can I config which need default and which need all exports?

vite-plugin-require-context - TypeScript

Is your feature request related to a problem? Please describe.

When I use vite-plugin-require-context plugin in my app, TypeScript throws an error "Property 'context' does not exist on type 'NodeRequire'."

Describe the solution you'd like

Some d.ts to use and augment the type system so require.context is not unknown to TS

Describe alternatives you've considered

I'v of course tried to augment NodeRequire interface but without success

Additional context

Pls provide some clear way how to use this plugin in a TypeScript project

引入第三方vue模块报错：module is not defined

bug原因：这个三方模块组件的写法是通过commomjs的写法来写的，如下

when deps use React.lazy, convert more 'default' wrapped the component

see this demo: https://github.com/SheldonWatson/vite-commonjs-isure

when @material-ui/icons/Search use React.lazy， can't render correctly，I don't really know it's vite's bug or your plugin'bug...

vite-plugin-require-context doesn't work for images

I've tried both of the following with various levels of configuration and can't get it to work.

I've defined the projectBasePath to the root directory just above src and as src and neither work. I've tried defining the asset in assetsInclude and build.rollupOptions.external and nothing seems to change. Is this plugin for JS only?

// src/SISU/shared/utilities/images-helper.ts
export const images = require.context("@Product/images/", false, /^.+?\.png|jpg|svg|gif$/);

// src/SISU/shared/utilities/images-helper.ts
export const images = require.context("../../../Product/images/", false, /^.+?\.png|jpg|svg|gif$/);

Output:

[vite]: Rollup failed to resolve import "/src/Product/images/arrow_left.png" from "utilities/images-helper.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Error: [vite]: Rollup failed to resolve import "/src/Product/images/arrow_left.png" from "utilities/images-helper.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

    at onRollupWarning (E:\root\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:41489:19)
    at onwarn (E:\root\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:41305:13)
    at Object.onwarn (E:\root\node_modules\rollup\dist\shared\rollup.js:23226:13)
    at ModuleLoader.handleResolveId (E:\root\node_modules\rollup\dist\shared\rollup.js:22510:26)
    at E:\root\node_modules\rollup\dist\shared\rollup.js:22471:26

TypeError: Cannot read properties of undefined (reading 'httpServer')

Commonjs: Transform of “require” must only be applied to global function named exactly “require”

The commonjs plugin should transform only calls to a global function called “require”. Calls to functions containing the term ”require” (e.g. “myrequire”) and calling “require” on an object (e.g. “myObj.require”) must not be transformed.

Versions

• originjs: 1.0.3

Reproduction

Unit tests that check this would be:

test('require function on object', () => {
  let code = `myObj.require("react");`
  let result = transformRequire(code, 'main.ts');
  expect(result.code).toMatch(`myObj.require("react");`);
});

test('require as part of function name', () => {
  let code = `myrequire("react");`
  let result = transformRequire(code, 'main.ts');
  expect(result.code).toMatch(`myrequire("react");`);
});

Fix

To fix this issue, the RegEx that searches the require function should be changed to be like this:

const requireRegex: RegExp = /(?<!\.)\b_{0,2}require\s*\(\s*(["'].*?["'])\s*\)/g;

Find the tests and the proposed fix in this pull-request: #26

The plugin incompatible with vue2 class component

Versions

• originjs:
• node:

Reproduction

Additional Details

Steps to reproduce

one file to use for vue mixin
the file use cjs require something
if the file have a string like 'http://xxx' , then it will get one error
example code and error

use plugin

What is Expected?

What is actually happening?