I use an UI library which has "require" statement.
I can use vite to run development mode successfully.
but when I build and preview the dist, the browser fail: Uncaught ReferenceError: require is not defined, because there are some "require" statement in the vendor chunk.
I have tried #rollup/plugin-node-resolve, #originjs/vite-plugin-commonjs but it doesn't work.
How can I fix that ?
You can fix it by using bundler like Webpack or Rollup to build your application for production. These bundlers can handle the require statements and convert them into valid JavaScript that can run in a browser. In your Rollup configuration, you can add the #rollup/plugin-commonjs plugin to handle the require statements. Then, instead of using Vite to build and preview the dist, use Rollup with the following command:
rollup -c
This will run the Rollup build process using the configuration specified in your rollup.config.js file.
#rollup/plugin-node-resolve, #originjs/vite-plugin-commonjs sometimes don't work if the library you are using has dependencies that are not compatible with CommonJS.
many library provide 'run esmodule' method. or try replace require() to import
Related
I have been coding with a React frontend and a Node/Express backend. But sometimes, I only need some plain Javascript without React, but still want the benefit of NPM and other Node modules. What is a way to do this?
You'll need a module bundler of some kind. There are many options including Webpack, Browserify, Gulp, and Parcel.
For Webpack, for example, from their example docs, the process could be:
Install webpack with npm install webpack and install webpack-cli
Install a module you want to use on the frontend, eg lodash
In src/index.js, import lodash: import _ from 'lodash'; and use it as needed. (You can also import other modules from NPM or from other places in your source code)
Set up webpack.config.js if you need custom build configuration settings
Run webpack to build the project: npx webpack. A single bundled JavaScript file will be created which contains all your source code and the imported Lodash's source code.
I have a node library that I'm developing called 'MyLib' that is compiled to a dist/my-lib.js file using the webpack command.
Now, I have another project that makes use of that library. I "included" it by doing:
npm install --save ../../my-library
And in my project's index.js I can do:
import { ExportedClass } from 'my-library'
...
const ec = new ExportedClass()
So far so good. Now, I make some changes to the lib and include some feature that uses a certain babel config, then I build the library and go back to the main project, but now the main project fails to compile and complains about a missing/disabled babel-loader config? Why?
Error in /.../my-library/src/MyClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /.../my-library/src/MyClass.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:14)
Isn't the purpose of building the other library is to be able to just import and use it? Why do I have to replicate its build env and dependencies in my project?
For context: Both my project and library are built using webpack and in development mode with target: node.
This question already has answers here:
SyntaxError: Cannot use import statement outside a module
(34 answers)
Closed last year.
I'm trying to import myArr from hello.js into index.js. However I get an error of
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
File hello.js
export let myArr = ['hello', 'hi', 'hey'];
File index.js
import { myArr } from './hello.js';
console.log(myArr);
Where am I going wrong?
Use version 2:
npm install node-fetch#2
node-fetch from v3 is an ESM-only module - you are not able to import it with require().
If you cannot switch to ESM, please use v2 which remains compatible with CommonJS. Critical bug fixes will continue to be published for v2.
I ran your code without any problems. Check for two things:
Node.js version >= 14. It only works with the latest version of Node.js.
Make sure your package.json includes a line for "type": "module". Without this line, Node.js assumes you want to use CommonJS modules rather than ESM.
I ran into a similar issue while building my React project.
Here's the error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/pradeep/Work/my_project/node_modules/#babel/runtime/helpers/interopRequireWildcard/_index.mjs
Then I realized that I am on a different Node.js version than the one used to install packages in this project.
I had two options:
Change Node.js version to the one required by this project and build again.
Stay on the Node.js version you have and remove the node_modules directory and package-lock.json file and do npm install again.
I chose the first approach and it worked for me.
If you have Node.js version lower than 14, e.g., v12 - you must specify this flag:
node --experimental-modules your.mjs
I use nvm to install the latest stable version of Node.js.
To delete the package-lock.json file and the node_modules folder, run npm. I then npm start to solve my problem.
Rename hello.js to hello.mjs.
You are using CommonJS right now with the .js extension. To import ES6 modules, you will have to change the extension of the file that you want to import to .mjs so it knows that it is an ES6 module.
The problem is that Node.js does not currently support import and export natively yet. It is still experimental according to the documentation. I recommend you use Babel to compile your code and allow you to use import and export.
For example, you can install the #babel/node package and run your project using:
npx babel-node index.js
Here are the documentation for #babel/node. Like the documentation state, this command is only meant for local development. In production, they recommend a configuration like this.
I'm working on a library using browserify. I have an entry point e.js which requires the files a.js b.js c.js.
As long as i'm just bundling the complete library,
browserify -e e.js -o dist/lib.js works just fine.
However, I'd like the library to be extensible by others. They should be able to load lib.js in their code and then require('./c.js')from the library.
Using factor-bundle it will always create a new dist/lib.jswhich is incompatible with the originally built one.
I guess using browserify -r with all internal dependencies to build dist/lib.jsand then doing a browserify -x ... -e module.js -o dist/module.js, externalizing all library dependencies will work, but isn't there an automated way of achieving this?
Is it possible to create a bundle with all dependencies being exported and then creating a second bundle for the add-on module which automatically externalizes everything from the first bundle?
Thanks for your answers!
How can I run browserify on a JavaScript module that requires the PhantomJS webpage module?
Since the webpage module is provided by PhantomJS, browserify can't find it and I get Error: module "webpage" not found. The --ignore and --exclude options both produce the error. The --ignore-missing option eliminates the import altogether.
Does browserify have a way to indicate that certain uses of require should not be included as a bundle dependency?
Background
I'm trying to write a PhantomJS script in ES6. I can transpile a single script into ES5 code that runs in PhantomJS, and I'm trying to use Browserify to transpile the entire dependency tree. Unfortunately, there are some dependencies it shouldn't pull in—those provided by PhantomJS—and compilation breaks because it can find those modules.
Perhaps I should be using a different tool than Browserify?
// browserify will resolve someNodeModule and include it in the bundle
var mymodule = require('someNodeModule');
var _require = require;
// browserify will ignore this, so 'webpage' is resolved at runtime inside phantomjs
var webpage = _require('webpage');