Develop Reference

Build Vite Vue for production than PKG it, but keep external one ES module library

I have this Vue (Vite) that after build will be packaged with Vercel PKG. One of the ESModule library must be kept external, (not in the Vue production build).
The purpose of it is that after pkg package, this external lib can be updated without the need of the rebuild of the PKG package.
I have tried everything Vite docs says about external vue build. This is my last approach to make it happen:
export default defineConfig({
build: {
rollupOptions: {
external: ["../custom/custom.es.js"],
},
},
plugins: [
vue()
]
});
Here is where I use the library - (vue main.ts)
import { createApp } from 'vue';
const App from './App.vue';
const app = createApp(App);
import CustomComponents from '../custom/custom.es.js';
app.use(CustomComponents);
app.mount('#app');
The problem is that Vite build keeps including this external lib into the production bundle file and loading not from the external library, but the context in the production code.

Custom React Component Library - jest 'cannot find module react'- testing-library, rollup

I'm building a custom react component library to share with other applications. I'm using rollup and following this blog and a few others: https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
The relevant snippet of my rollup config is as follows:
export default [
{
input: "src/index.ts",
output: [ { file: packageJson.main, format: "esm", sourcemap: true } ],
plugins: [ peerDepsExternal(), resolve(), terser() ],
external: ["react", "react-dom"]
}
]
In my package.json I've moved react and react-dom from 'devDependencies' to 'peerDependencies'. My abbreviated package.json:
{
"name": "custom components",
"version": "1",
"devDependencies": {
...stuff, (but not react/react-dom)
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"main": "dist/esm/index.js",
"files": ["dist"]
}
Then using npm link I've imported my component library into another app which is using CRA and react-testing-library.
So far this works. I'm able to render my common components as expected.
However it seems like moving react/react-dom out of devDependencies is making my jest tests fail in both projects. In both cases jest cannot find react. The Jest output in my CRA that imports the components is as follows:
Test suite failed to run
Cannot find module 'react' from 'index.js' //<-- this is the index of the component library
However, Jest was able to find:
.../MyComponent.tsx
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js',...etc] (defaults)
And when I run my tests in my common component library:
Test suite failed to run
Cannot find module 'react' from 'MyComponent'
import React from 'react';
^
I'm not sure how exactly to get around this. If I move react/react-dom back to devDependencies, the tests will run successfully, but then any component using react state will fail to render due to multiple copies of React in the project.
Could this be an issue because I'm using npm link as opposed to actually publishing the application to npm and installing or is this an issue with my rollup config/jest config/package.json? Any help would be appreciated.

react and react-dom should be included in both devDependencies and peerDependencies of your library.
Including them in devDependencies makes them available when developing (and when running tests), but they won't be included in the library when you bundle them with Rollup (which is what you want).
Including them in peerDependencies tells any consuming applications "you must have these dependencies at the specified version range," but again, Rollup doesn't include them in the library bundle.
If you only include them in peerDependencies, they aren't installed when developing the library or running tests, although this might no longer be true if you're using npm v7.
You can run into the problem of having multiple versions of React in your project if your app includes them at a different version than your library, but if both the app and the library have the same version range you shouldn't have that problem.

Import custom component in React with react-select and crash with Error: Minified React error #188

I develop a custom library of components in React(16.4) and Webpack 4. Config was eject and import to other project with git+ssh://git#bitbucket.org.... on package.json.
Only one component doesn't work when I used this lib in other project, it's a select input develop with react-select (Jed Watson) and it crashes on click.
All app crashes and I have this error:
Uncaught Error: Minified React error #188; visit https://reactjs.org/docs/error-decoder.html?invariant=188 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Message from link in error above:
Unable to find node on an unmounted component.
I now my problem is with my webpack config but I don't find any solutions to fix this.
Last hope with community...

I had a similar situation - I am developing a custom component library and importing it into an external project. I had issues with react-bootstrap, react-transition-group, and other external libraries that dynamically mount/unmount DOM elements in production; minified react error #188 would crash production builds. Here's how I solved it in our webpack config under module.exports (both dev and prod configs):
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
"react-native": "react-native-web",
react: path.resolve("./node_modules/react"),
"react-dom": path.resolve("./node_modules/react-dom"),
"react-transition-group": path.resolve(
"./node_modules/react-transition-group"
)
}
This should override any other instances of these particular libraries in all dependencies; anytime they're imported/used, they're forced to use the version that my project dictates in the package.json. Please keep in mind that I'm using Webpack 3, so the fix for Webpack 4 may be different.

Thank you Abi.
I've just resolve it with other way. I add all library in "externals" in my webpack config like this :
externals: [
'react-select': {
root: 'ReactSelect',
commonjs2: 'react-select',
commonjs: 'react-select',
amd: 'react-select',
},
]

webpack dll configuration not working

I'm trying to create dll configuration with webpack 4, but i keep getting:
Uncaught ReferenceError: React is not defined
My configuration is very simple:
module.exports = {
entry: {
vendor: ["react", "react-dom"]
},
output: {
filename: "[name]-manifest.dll.js",
path: base.path.project("build"),
library: "[name]",
libraryTarget: "umd"
},
plugins: [
new webpack.DllPlugin({
name: "[name]",
path: base.path.project("build/[name]-manifest.json"),
context: base.path.src("app")
})
]
};
In my development configuration I use the dllreferenceplugin.
new webpack.DllReferencePlugin({
context: base.path.src("app"),
manifest: require("../build/vendor-manifest.json")
})
and of course i define externals in development configuration, because I don't want to include them again when building my development js file:
externals: {
react: "React",
"react-dom": "ReactDOM"
}
In my code I import React.
import * as React from "react";
But in the browser I keep getting React is not defined.
I have googled everything and have not found any solution to this problem?
Thank you for any help!

Use import React, { Component } from 'react'; myself. JSX wants react to be in scope.
Largely only see externals being used when making a library, like a npm module that other folks consume that uses React. React would be marked as an external in that package to avoid double including React in the local application and inside the module.
If this is your app build process, and not an npm module then should not be marking react as externals. Your bundle needs to include react. Marking react as externals excludes it from the bundle and makes it your responsibility to manually load React before the bundle is loaded.
The externals configuration option provides a way of excluding
dependencies from the output bundles.
See the docs on webpack externals here.

Just Remove the external property from your app webpack config file.Also, Include the dll file in your index.html file.
I was also facing the same issue, because I was using both dllReference plugin and external at the same time.

how to use react require syntax?

I see lots of examples for react structured with var React = require('react') syntax. When I try and use this I get "require is not defined". How do I use and set up my static project to use require syntax?
Update
In actuality I am looking for a webpack/browserify config file so I can get started with React and CommonJS quickly. I have only written react apps without said build tools

require is not a React api, nor is it a native browser api (for now).
require comes from commonjs and is most famously implemented in node.js, if you have used node.js, you will see requires everywhere.
due to the popularity of require in node, people have built tools which will transform code that is written in nodejs style to be useable on the browser.
there's a few benefits to using require, it helps you keep your code modular and for some projects it allows you to write isomorphic code (code that runs both on client and server with minimal change)
In order to use require, you will need to use a tool such as webpack or browserify, I will use browserify as an example.
first create an 'index.js'
require('./app.js');
alert('index works');
then create an app.js
alert('app works');
next install the browserify cli
npm install -g browserify
And call this command in your shell
browserify index.js > bundle.js
Now you will have a bundle.js, in your html page create a
<script src="bundle.js"></script>
And you should see both alerts run
Now you can continue to code, you can add react in your code by doing a
npm install react --save
and then require it in app.js for example
var React = require('react');
React.createClass({
render: function(){/*Blah Blah Blah*/}
})

BTW,
If you are using webpack you can add to your webpack.config.js config file
The following lines, eliminating the need to use require statements in your files:
plugins: [
new webpack.ProvidePlugin({
'React': 'react',
'$': 'jquery',
'_': 'lodash',
'ReactDOM': 'react-dom',
'cssModule': 'react-css-modules',
'Promise': 'bluebird'
})
],
This is of course less verbose and not all developers like it, but it's good to know :)