score:27
in case someone will run into this: here is my working rollup configs.
i updated the demo repo as well.
import babel from 'rollup-plugin-babel';
import filesize from 'rollup-plugin-filesize';
import noderesolve from 'rollup-plugin-node-resolve';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'umd',
sourcemap: 'inline',
},
],
plugins: [
progress(),
noderesolve({
browser: true,
}),
json(),
commonjs({
include: [
'node_modules/**',
],
exclude: [
'node_modules/process-es6/**',
],
namedexports: {
'node_modules/react/index.js': ['children', 'component', 'proptypes', 'createelement'],
'node_modules/react-dom/index.js': ['render'],
},
}),
babel({
babelrc: false,
presets: [['es2015', { modules: false }], 'stage-1', 'react'],
plugins: ['external-helpers'],
}),
visualizer(),
filesize(),
replace({
'process.env.node_env': json.stringify('production'),
}),
],
};
my original problem was assuming react dependency was external. this is correct for the component libraries but not for standalone app. i also had to fix some minor problems and named imports mapping.
hope this will save somebody some time.
score:3
here's a more up-to-date version using the supported rollup
plugins for anyone new who stumbles across this question wanting typescript support:
// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import peerdepsexternal from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
export default {
input: 'src/index.ts',
output: [
{
file: 'dist/index.js',
name: 'app',
sourcemap: 'inline',
format: 'iife',
},
],
plugins: [
peerdepsexternal(),
resolve({
browser: true,
dedupe: ['react', 'react-dom'],
}),
replace({
'process.env.node_env': json.stringify('production'),
}),
commonjs(),
typescript({
tsconfig: 'tsconfig.json',
sourcemap: true,
inlinesources: true,
}),
css({ output: 'dist/style.css' }),
],
};
});
this will output an index.js
and style.css
within the dist
folder
if you are not using typescript, just remove the typescript import and plugin from the sample.
Source: stackoverflow.com
Related Query
- How to bundle react app with rollup
- How to bundle a React app to a subdirectory on a server?
- How to detect the device on React SSR App with Next.js?
- How to run production react app in local with local back-end
- How to include "leaflet.css" in a React app with webpack?
- How to secure my react app api with csurf?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How do I configure my Nginx server to work with a React app in a subfolder?
- How to solve TypeScript error with axios response in React app
- how to use .env.qa or .env.staging with create react app
- how to deploy successfully React app with nextjs to AWS Amplify?
- how to config create react app with worker-loader
- How to run a React Native App with Node js Backend on Android Device?
- How to deploy React App on production with Server Side Rendering
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- How to setup react app with SCSS? (Errors)
- How to Merge React App into existing Website with existing HTML structure
- How to apply react-native-linear-gradient for the entire app background with React Native
- How to bundle a React app to work in ANY subdirectory on a server?
- How to serve React app with Material-UI and react-router
- How can I make my React app render Bootstrap tables with crud
- How to import .json file with typescript React App
- How to structure a React App with several functional areas on different ports?
- How to log in user with Google (through Firebase) in a React app with functional components?
- Deploying React + Express App to Kubernetes. How to structure it with docker?
- How do I integrate React with a non-trivial AngularJS app and existing grunt configurations?
- How do I make my react app still run with lint errors?
- how to run my node application and react app in the same time with one command?
- Bundle react app created with npx create-react-app to .js file using Webpack
- How to fix dependency error with React App using Jest
More Query from same tag
- Using different API url for development and production with React and axios
- Passing data from an input button click?
- Use react routes depending by condition
- Why isn't my React child component receiving new props?
- React Query execute mutation after query is fetched
- Recompose pure() vs React.PureComponent
- Redux dispatches are not firing for fetching API
- inline styles for tabs in material ui doesn't change color
- Getting a state of from a component and show it as a value attribute inside a div?
- Create a multilevel dropdown dynamically in React and get the value of selected submenu in dropdown
- React select and change the style of link
- How to catch HTTP response error and then pass to the caller
- unable to parse API value
- Compound Components - React Typescript
- How to change the color of a transparent background image's text in react native?
- In React, on button click, display alert for 5 seconds, then hide alert
- ESLint - how to disable react/forbid-foreign-prop-types?
- removing the y-axis margins
- Using React.memo with hooks for controlled inputs
- Object passed dynamically to React component gives Typescript error
- Create a React app with express, 'react-scripts' error
- Create React App http-proxy-middleware not working
- Can I use redux-saga's es6 generators as onmessage listener for websockets or eventsource?
- HTML5 File upload using .NET Core 2.0 Web api
- Angular 2+ , Router navigates to destinated route but wont load component
- Change value, add and remove fields of deep nested object with useState hook in react
- react.js antd carousel with arrows
- Unhandled Rejection (TypeError): appUser is not iterable
- How to use pickr color picker vanilla JS library within a React component?
- How to pass a function in React's Context?