Develop Reference

Is it possible to make webpack consume a React components from a package and rebuild the package?

I'm trying to build an npm package to standardize my layout components that use geist components at their core. At first, I tried to use the npm package as if it was a local component but it throws a webpack loader error when it tries to read the component for example:
Module parse failed: Unexpected token (6:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Badged = ({ content }) => {
| return (
> <Badge>
| <b>{content}</b>
| </Badge>
After reading around a bit it seems I need something like webpack or rollup to build everything to a dist folder in my npm package. How can I set up a pipeline to consume the type data from the source package and build my components to a dist folder?

As a rule of thumb, Webpack is used as an application bundler while Rollup is used as a library bundler. The reason for this is that, historically, Rollup could produce tree-shakable ESM Module output. Webpack recently added support for ESM output.
The general steps for library development are:
Setup a bundler like Rollup, etc.
Configure it to produce both ESM and Common.js output in the dist folder.
When publishing the package, ensure that dist is added to files or at least not added to npmignore list.
Always published a compiled code. The main or entry field should point to the compiled code's entry file.
When publishing a library, make use of externals to exclude all third-party node_modules from your bundle so that they are explicitly installed on users side and your library contains only your code. Nearly all bundlers support this feature.

vite: how to handle "require" statement in third-party module?

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

Why bundle NPM packages if they will be bundled by consuming project?

I’m building a TypeScript package to be published on NPM. I’ll be consuming this package in future web development projects likely using Vite. When I build a future website with this module, does it matter if it’s already bundled? Won’t Rollup (used by Vite to build the website) bundle the code regardless of whether the code on NPM is bundled (like in a lib.esm.js file)? Why not just use TSC (TypeScript Compiler) to compile TS to JS for NPM and then let the consuming project (whether Rollup or Webpack or Parcel) bundle it optimizing for the browser?
What am I missing that other NPM authors know?
Note, I’m authoring this package as strictly an ESM Module (type: module) so I’m not worrying about CJS.

You’re right. You don’t need to bundle it. Just transpile each file individually from the source directory to the output directory and point your package.json’s main to the transpiled entry point. Use Babel directly.
An example of this is react-markdown.

How do you add Node to the frontend?

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.

Need NPM Module that depends on babel 7, but my project uses babel 6

I am writing an NPM module that contains some React components and has #babel/core 7 as a dependency. I am testing out this module locally by linking it (via npm link) to an existing project and trying to import components from the module. At runtime though, I get the following error:
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version.
My existing project and all of its dependencies are a bit older and still use babel 6. Is there any way for me to get around this without upgrading to babel 7? Thanks!