text:
Add more entry points

In addition to src/index.js, I have other entry points in my app. How do I add them?

You could render to multiple html elements in index.js, is that what you mean?
reactdom.render(App1, div1)
reactdom.render(App2, div2)
reactdom.render(App3, div3)

@riceyeh I think you asked this already? is there anything here different from https://github.com/facebookincubator/create-react-app/issues/1079

Can you explain your use case in more detail?whike you asked this earlier, I wonder if I misunderstood your use case.

For example, when preparing multiple apps I might want to do index.html for web and touch-kiosk.html for other devices. Basically using components and composition to do multiple apps. For this I need not just few html files but multiple entry points for webpack.

I would like to be able to create multiple bundles.
For example:
admin.bundle.js       # for admin section in my site
client.bundle.js        # for client section

Now I am forced to create two applications:
create-react-app admin
create-react-app client

This approach seem to be excessive. It would be great if it was possible to separate the bundles within a single application.

Thanks for sharing the use cases. We might support this eventually but for now I recommend either separate apps or ejecting and manually configuring Webpack.

You could do something funky with shell scripting. Not sure how practical this is but it will solve your problem (from how I interpret it).
Have two entry point js files, lets go with user.js and admin.js.
Have two build commands in package.json; build-user, build-admin.
When you go to run build-user, before running react-scripts build, have some shell code that copies user.js to index.js in your source code. Same for build-admin, just copy it's entry point to index.js before running the actual build command. This way if you're working on the same entry point consistently, you can still use build.
package.json
"build": "react-scripts build",
"build-user": "cp src/user.js src/index.js && react-scripts build",
"build-admin": "cp src/admin.js src/index.js && react-scripts build"

Maybe we could pass entry point to webpack instead? Then add instructions of shell scripting it.

I ran in to a similar issue today, and there appears to be an easier and more elegant workaround to this, similar to what @tbillington had mentioned.  Keep in mind, I am pretty new to React/Webpack/Babel/etc, so forgive me any nube mistakes.
You can simulate having multiple HTML files by using URL parameters on the Index.html file.  In index.js, you simply parse out the URL param and serve the appropriate React Component into the root div based on that parameter.  In this case, the default would be App, but if you load it with
_http://www.myhost.com/index.html?startPage=SecondApp_
... it will serve up the SecondApp React component.
The App.js and index.html are the boilerplate created by create-react-app.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import SecondApp from './SecondApp';
import './index.css';

// Copied from http:jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
function getUrlVars() {
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

var urlParams = getUrlVars();

switch (urlParams["startPage"]) {
  case "SecondApp":
    ReactDOM.render(<SecondApp />, document.getElementById('root'));
    break;

  case undefined:
  default:
    ReactDOM.render(<App />, document.getElementById('root'));
    break;
}

SecondApp.js
import React, { Component } from 'react';

class SecondApp extends Component {
    constructor() {
        super();
    }
    render() {
        return
MY SECOND APP!
;
    }
}

export default SecondApp;

This way, everything will get packaged, minified, transmorgrifacated, etc.  It seems a lot more palatable to do it this way than ejecting entirely.  If you have legacy HTML/Javascript that isn't part of the module system, you put that in the public directory (and subdirectories), and Webpack will just copy it untouched.
Let me know if this is helpful.
Nick

I'm also trying to implement a User / Admin scenario.
@carruthe, I believe your approach is not working for me because the User part is simple and should be as light weight (code size wise) as possible as it's expected to be accessed mainly on mobile. The Admin part is more complex with more dependencies and expected to be accessed predominantly on desktop. I'd therefore prefer separate JS bundles for Client and Admin.
@tbillington, I think your suggestion should work with a bit of extra scripting to merge the separate build outputs into one, or am I passed duct-tape-strength?

For admin/user use case you can use require.ensure(dependencies, callback) to load module async.
more detail
but I like create-react-app support multiple entry/bundle.

I agree it's something we'd like to see in the future.

I've implemented this as proof of concept, so you can try it already by installing spiking-react-scripts@0.9.2-fork.2:

npm uninstall --save-dev react-scripts
npm install --save-dev spiking-react-scripts@0.9.2-fork.2
Create the ./pages folder in the root of project and put them a *.js file (for example admin.js)
npm run start
Open http://localhost:3000/admin.html 🎉

Also I think it's a good first step for prerendred pages. All we need now is to generate *.html pages differently.
Changes: https://github.com/stockspiking/create-react-app/commit/fced96efe4d2c717ec95f48548998b5da7e03dcc

Known issues

Dev server doesn't recompile after adding new entries
New separated chunk /static/js/polyfills.js may be added after other scripts.

@kohver Do you think it would be best to have a separate html file or using react-router to lazy load those extra js required. Something like this http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/

My use case of having multiple entry points is that i'm developing plugins for cloud solutions of atlassian (jira, confluence) and all plugins injected into the system by iframe, so in different places like admin panel, main page panel, sections inside issues e.t.c. i need html page, since i want to use react i need to split my app into multiple pieces. It's quite inconvinient to create different folders for each section of the whole app bcs they could be very small and it would be easier to split them into folders by page or section. So the only way to me (for now) is to create my own build process.

I also have a similar use case as Alexter-progs. I am developing a chrome extension which requires both background.js and inject.js files. At present, there isn't a way for me to generate separate bundles to be able to make a chrome extension.

If you ask me, application should be separated into logical bundles and modules. It may sound a bit complicated, but let me explain.
For example, we want to build large application, with frontend (landing page), customer dashboard and admin dashboard.
We'll have 3 bundles, let's call them frontend, customer, admin. They are nothing but entry-points, only containing routes. Bundles should be able to reuse code, e.g. frontend will display plans for customers, which is edited/maintained in admin dashboard. Now we're approaching modules.
Module - set of components/reducers/middlewares/actions/etc grouped by logic, e.g. Users, Plans, Notifications, UIKit. Each modules could communicate with each other and also be used by bundles only via single index.js containing all module's exports. Each module should be loaded on-demand, so we separate each bundle and module into it's own chunk.
I would be really happy if we can have current structure as simple application and smth called advanced similar to I've described above. E.g. create-react-app foo creates simple app by default, but if we use create-react-app foo --advanced it would switch to advanced mode.
/cc @gaearon

Hi, using webpack built-in MultiCompiler it is quite easy to run different builds at the same time (including shared cache and quick rebuilding when watching).
In the most basic setup it would use the same index.html template and generate index.html, index2.html and indexanything.html from index.js, index2.js and indexanything.js, with minimal page-specific bundles, but using the same output dirs for assets. That would necessitate changing only a few lines in create-react-app react-scripts. I could send a PR as a discussion point, so we could see how it affects testing, routing etc? Somebody more knowledgeable in create-react-app customs could continue from there.
It might also be possible to configure source templates, output paths, etc, from package.json fields or file system structure (such as src/pages/indexname/index.js), but I would guess that outputting properly to different paths would need more involved changes depending on how paths are handled in build scripts. I could look into this briefly too, if you have opinions on how it should work...

I met the same problem, here is my way, it works :
Four steps to add multiple entry points to create-react-app
(say we add an admin.html):
1. Eject the project
npm run eject

2. Add multiple entry to webpack.config.dev.js
entry: {
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
      ]
  },
  output: {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  },

3. Modify HtmlWebpackPlugin
add a new plugin node:
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'build/admin.html',
    }),

4. webpack Dev Server
rewrite urls
/config/webpackDevServer.config.js:
    historyApiFallback: {
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    }

detail: http://imshuai.com/create-react-multiple-entry-points/

Thanks @maoshuai. Works perfectly!

@maoshuai, Worked out well, thanks. Though I had to change the value of filename to 'admin.html', without the build/ like this...
 new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    }),

@maoshuai Great solution but doesn't work exactly as expected while running
npm run build
Both HTML files: index.html and admin.html contain the same JS files: index.bundle.js and admin.bundle.js. If you use the same ID in different HTML files (i.e.

) only the last loaded JS will render:
ReactDOM.render(<App />, document.getElementById('root'));
or
ReactDOM.render(<Admin/>, document.getElementById('root'));
.\scripts\build.js should be also modified, unfortunately I'm completely new with React and Webpack. Could someone help?

@Sowed You are right, I had amended it.

Have some effects when change the output file name? The filename is "bundle.js" definitely in react-dev-utils/webpackHotDevClient.js.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js#L36

HI guys. I'm just wonder how you feel about extending webpack.config? Same or similar way as Storybook did it https://storybook.js.org/configurations/custom-webpack-config/? In that way you'll give more power to the end user. I can imagine something like this will kick off creating plugins for react-create-app and it could became quite conflicting. However, I believe this could be handled by some conflict message which warn user whenever overwriting property trying to overwrite already overwritten property. Thanks

@maoshuai What changes might one need to make if using a library and libraryTarget in the webpack output?

Hi guys.
My use case is this:
When I create a new component and I want to actually release it standalone, I still need an app as a testbed/dev environment. One solution would be to use storybook, another - what I do - is create a separate project with create-react-app, and then I have two projects, e.g. my-component and my-component-examples. It works, but it's clumsy.
I'd prefer having src/examples and src/my-component with the ability to build e.g. just the component á la "build": "react-scripts build src/my-component".
By the way, the electron-webpack project has an interesting approach. It's not perfect yet, and it would require quite some hard-wiring inside create-react-app, but: As a user we define a custom webpack config, e.g. in package.json, and that's justthe path to a .js file that simply exports a partial configuration, and under the hood it gets merged via webpack-merge.
What's missing in the electron-webpack approach (as of now) is the abiity to specify the merge strategy from outside, it's using merge.smart automatically so it's easy to add stuff (loaders, entry points), but you cant replace anything.
Anyways, just a suggestion. The ergonomy of that approach is great: As a user, you just use what's provided and don't care, until you do care and add some modifications to the default config.

I also want this since I have multiple applications in my single CRA setup (since I have a lot of shared components). I tried this approach:
import AsyncLoad from './components/AsyncComponent' // this is basically react-loadable

const App = AsyncLoad({ loader: () => import(`${condition? './App1' : './App2'}`) });

ReactDOM.render(<App />,
  document.getElementById('root')
)

The problem is that webpack is bundling this stuff a lot of time. If I do simple imports, it bundles in below a minute.

@themre You could improve that by using compile-time conditional switches. Then webpack won't bundle all possibilities. E.g:
importApp() {
    switch (process.env.MY_CONDITION) {
       case 'App1': return import('./App1');
       case 'App2': return import('./App2');
    }
}

The trick is to have explicit and static imports. I think this should work because Uglify pluin removes dead code after static analysis.

@loopmode you mean the webpackConfig option (as for the custom webpack config file)? I could imagine that the custom webpack file could either export a plain object or a function.
In case of a plain object, that could be merged. In case of a function, that function could receive the current webpack configuration and is expected to return a new webpack configuration. Then you could do whatever you want with your webpack configuration. (webpack itself allows for exporting a function too)

@rmoorman Yes absolutely, that works too. Just receive the config, modify it and return it again. In that case, webpack-merge doesn't even have to be known to create-react-app - we "users" could decide whether we need it or not, as in many cases it would be enough to just modify the given config a little.

Any update on this? Using a similar approach to @tbillington at the moment

@gaearon adding a feature to pass entry point as param to 'react-scripts build' will be a good feature right.
package.json
"build": "react-scripts build",
"build-admin": "react-scripts build src/admin.js",
"build-kiosk": "react-scripts build src/kiosk.js"

or
"build": "react-scripts build",
"build-admin": "react-scripts build --entry src/admin.js",
"build-kiosk": "react-scripts build --entry src/kiosk.js"

build directory
build
├── asset-manifest.json
├── favicon.ico
├── images
├── static
├── index.html
├── admin
│   ├── index.html
├── kiosk
│   ├── index.html

In the meantime, a way around this is to pass through environment variables that determine which file to include for your app and then specify multiple builders in your package.json. eg:
package.json
...
"start": "react-scripts start",
"start-mobile": "REACT_APP_WHICH_APP=mobile npm start",

App.js
switch (process.env. REACT_APP_WHICH_APP) {
  case 'mobile':
    RootScreen = require('./screens/mobile/RootScreen').default;
    break;

  default:
    RootScreen = require('./screens/desktop/RootScreen').default;
    break;
}

export default RootScreen;

Remember your environment variables must begin with REACT_APP_ in order for them to be picked up.

That seems like a totally valid solution, not just a workaround. One could have a file entry.js and use REACT_APP_ENTRY in the switch-case there.

I have a general purpose "App Variants" feature in my fork.  It works like react-native's .ios vs .android, but is configurable, like this:
app/
  package.json
    "targets": { // configure variants
      "ios": {   // configure ios variant
        "jsExts": [".ios.js", ".cor.js"],
        "appHtml": "index.cor.html"
      },
      "android": {   // configure android variant
        "jsExts": [".android.js", ".cor.js"],
        "appHtml": "index.cor.html"
      },
    },
    "scripts": {
      "build": "react-scripts build", // standard build
      "build:android": "TARGET=android react-scripts build",  // build android
      "build:ios": "TARGET=ios react-scripts build"  // build ios
    }
  src/
    App.js
      import comp1 from './comp1'
    comp1.js  // use in standard build
    comp1.android.js // use in TARGET=android build
    comp1.cor.js // common fallback for both ios and android builds
    comp1.ios.js // use in TARGET=ios build
  public/
    index.html // use in standard build
    index.cor.html // use in TARGET=ios and TARGET=android build
  build/  // prod output for standard build
  build_android/  // prod output for TARGET=android build
  build_ios/  // prod output for TARGET=ios build

I'd PR that here if it has any support.

I had the same problem developing Chrome extensions with React, and there is my workaround.

Add additional html file to /public' directory. It has to be almost the same as index.html` except following changes

Change id of root element so for every entry point it has to be uniq

Manually add

@avorobiov This is my favorite approach so far :) This will only work in dev, though, right? (Since /static/js/bundle.js doesn't have a fingerprint in the name.)

For one possible approach - Neutrino has the concept of a mains pref:
https://neutrino.js.org/api/#optionsmains
Which is then used for:

entry point definitions, including pre-pending webpack-dev-server/client
configuring multiple instances of html-webpack-plugin
...and so on.

Whilst we are reluctant to add too many options to Neutrino, making users manually override every case where the entry point is referenced was pretty burdensome, so it seemed worth the trade-off.

Also, neutrino is working on a web-extension preset (module).
The purpose is to build a new work-flow (files organization, start script...) for Web Extension.

@poupapaa I like your solution, so I followed your instruction however in my build/, my index.html is including the css and js for the other page instead of the chunks I specified in the HTMLWebPackPlugin config.
Can you help me? Here's my config-override.js
// config-overrides.js
const paths = require('react-scripts/config/paths');
const path = require('path');
const publicPath = paths.servedPath;
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Define the paths to your javascript & HTML files
// glrl.js should be in your src folder
// glrl.html should be in your public folder
paths.glrlJs = paths.appSrc + '/glrl.js';
paths.glrlHtml = paths.appPublic + '/glrl.html';

// Utility function to replace plugins in the webpack config files used by react-scripts
const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (pluginIndex === -1) {
    return plugins;
  }

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

module.exports = function override(config, env) {
  // Define the entries for index & glrl
  config.entry = {
    index: [
      require.resolve('react-scripts/config/polyfills'),
      paths.appIndexJs,
    ],
    glrl: [
      require.resolve('react-scripts/config/polyfills'),
      paths.glrlJs,
    ]
  };

  // Split code into chuncks for index & glrl
  config.output = {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  };

  // Create a HTML entry for index that only includes code for the index bundle
  const indexHtmlPlugin = new HtmlWebpackPlugin({
    inject: true,
    title: 'Double Up',
    chunks: ["index"],
    template: paths.appHtml,
  });

  // Create a HTML entry for glrl that only includes code for the glrl bundle
  const glrlHtmlPlugin = new HtmlWebpackPlugin({
    inject: true,
    title: 'Green Light Red Light',
    chunks: ["glrl"],
    template: paths.glrlHtml,
  });

  // Replace the default HTML entry in the webpack config used by react-scripts with the index HTML entry
  replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), indexHtmlPlugin);

  // And finally add the second HTML plugin for your glrl page.
  config.plugins.push(glrlHtmlPlugin);

  return config;
};

I did some digging and it looks like replacePlugin function was not able to successfully replace the original config for index.html. Still looking for a solution to override/replace it.

@gaearon

My opinion is this is incredibly convoluted.

Wouldn't enabling custom webpack configuration, maybe using something like webpack-merge be a lot less convoluted way of enabling this (without ejecting or forking CRA)

@poupapaa @carolozar
Hi, can I ask for help? seems I have a problem when building my application, it does not add the "JS" and "CSS" in html inside the build folder, Please see below my code:
const paths = require('react-scripts/config/paths');
const path = require('path');
const publicPath = paths.servedPath;
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Define the paths to your javascript & HTML files
// overriding index to member and add admin
// [name].js should be in your src folder
// [name].html should be in your public folder

paths.adminJs = paths.appSrc + '/admin/index.js';
paths.adminHtml = paths.appPublic + '/admin.html';
paths.appIndexJs = paths.appSrc + '/member/index.js';

// Utility function to replace plugins in the webpack config files used by react-scripts
const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (pluginIndex === -1)
    return plugins;

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

function rewire(config, env) {
  // check and get portal value: member or admin
  const portal = process.env.REACT_APP_PORTAL || 'member'

  // Define the entries for index & admin
   config.entry = {
    index: [
      require.resolve('react-scripts/config/polyfills'),
      paths.appIndexJs,
    ],
    admin: [
      require.resolve('react-scripts/config/polyfills'),
      paths.adminJs,
    ]
  };

  // Split code into chuncks for index & admin
  config.output = {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  };

  const htmlTemplates = {
    member: paths.appHtml,
    admin: paths.adminHtml,
  }

  // Create a HTML entry for index that only includes code for the index amd admin bundle
  const htmlPluginConfig = new HtmlWebpackPlugin({
    inject: true,
    chunks: [portal],
    template: htmlTemplates[portal],
  });

  // Replace the default HTML entry in the webpack config used by react-scripts with the index HTML entry
  config.plugins = replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), htmlPluginConfig);

  return config
}

module.exports = rewire

`

Thank you @poupapaa  for the perfect solution, but I found that the devServer config was not rewritten. By reading the document of react-app-rewired, I found the way to modify devServer config by config-override.js.
Here is my config-override.js
const paths = require('react-scripts/config/paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rewireLess = require('react-app-rewire-less-modules');

// 多页配置：增加入口
paths.appAdminJs = paths.appSrc + '/admin.js';

const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (-1 === pluginIndex) {
    return plugins;
  }

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

module.exports = {
  webpack: (config, env) => {
    if ('development' === env) {
      config.entry = {
        index: [
          require.resolve('react-scripts/config/polyfills'),
          require.resolve('react-dev-utils/webpackHotDevClient'),
          paths.appIndexJs,
        ],
        admin: [
          require.resolve('react-scripts/config/polyfills'),
          require.resolve('react-dev-utils/webpackHotDevClient'),
          paths.appAdminJs,
        ]
      };
      // 多页配置：区分开入口文件
      config.output.filename = 'static/js/[name].bundle.js';

      const indexHtmlPlugin = new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        // 多页配置：2.x 版本默认开启 optimization ，chunks 中需要增加 'vendors', 'runtime~admin'
        chunks: ['vendors', 'runtime~index', 'index'],
        filename: 'index.html',
      });
      const adminHtmlPlugin = new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        chunks: ['vendors', 'runtime~admin', 'admin'],
        filename: 'admin.html',
      });
      // 多页配置：
      config.plugins = replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), indexHtmlPlugin);
      config.plugins.push(adminHtmlPlugin);
    } else {
      config.entry = {
        index: [require.resolve('react-scripts/config/polyfills'), paths.appIndexJs],
        admin: [require.resolve('react-scripts/config/polyfills'), paths.appAdminJs],
      };
      const indexHtmlPlugin = new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
        chunks: ['vendors', 'runtime~index', 'index'],
        filename: 'index.html',
      });
      const adminHtmlPlugin = new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
        chunks: ['vendors', 'runtime~admin', 'admin'],
        filename: 'admin.html',
      });
      // 多页配置：替换 index.html 生成规则
      config.plugins = replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), indexHtmlPlugin);
      // 多页配置：添加 plugin 生成 admin.html
      config.plugins.push(adminHtmlPlugin);
    }
    return config;
  },
  devServer: (configFunction) => {
    return (proxy, allowedHost) => {
      const config = configFunction(proxy, allowedHost);
      // 多页配置： 指明哪些路径映射到哪个html
      config.historyApiFallback.rewrites = [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ];
      return config;
    };
  },
};

Hi! I created a package to make it a bit more convenient: https://github.com/tadatuta/rewire-entry

@gaearon, isn't this a stupid simple problem to solve or am I missing something? Willing to submit a PR if this looks about right to you, but I understand if there are some concerns about introducing a vendor.js alongside n number of entry points. Either way, we should talk it out. Looking for some guidance before committing too much time into this.
This also opens up a whole new topic/concern about bundle optimization and if we want CRA to have any of that at all. If we did, I might suggest a similar setup to what we use at Nordstrom Rack | HauteLook, which provides the following bundles:

vendor.js all 3rd-party code from the node_modules folder. Large file, but cached and very rarely changes.
common.js contains common chunks of business code between multiple entry points. Changes pretty much every deploy, but not likely to be near as big as vendor.js.
<entry-point>.js contains mostly code specific only to that entry point. Should be a pretty small file and only changes if that entry point has been changed.

The webpack configuration should look something like this:
// webpack.config.babel.js
import { compact, keys } from 'lodash';

const isDev = NODE_ENV === 'development';

export default {
    plugins: compact([
        isDev && new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: 3,
        }),
        !isDev && new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            chunks: keys(browserMainEntries),
            minChunks: 3,
        }),
        !isDev && new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['common'],
            minChunks: isExternal,
        }),
    ]),
}

function isExternal({ context }) {
    return context && context.indexOf('node_modules') !== -1;
}

@GAumala @lepture since we also want to change the index html can we change like this?
20a21
> const envEntryPoint = process.env.ENTRY_POINT || 'index';
82,83c83,84
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),
104,105c105,106
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),

This could work with naming convention, as it does now.
index.js --> Normal single entry
*.entry.js -> Multiple entrypoints.

In case you run into this problem trying to build a chrome extension (and need eg. an options.html and a index.html), here is what worked for me:
I just appended a hash to the index.html and "route" to the correct view in App.js. Something like:
  "manifest_version": 2,
  "name": "Random",
  "version": "1.0.0",
  "options_page": "index.html#options",
...
  "browser_action": {
    "default_popup": "index.html#popup"
  },```

Happy New Year! (and soon Chinese New Year)
I've been watching this issue for a while, and I can see there's a couple workaround. Which one is the "recommended" way (as in, future proofing in line with CRA direction)?

@wiradikusuma I do think there is no "recommended" way as long as the feature is not provided natively. The solution you chose, depends always on your requirement and the purpose of the app.
There are a lot of good solutions in this discussion here. Thanks to all of you!

A different use case than what was described here before: we need (and forked to get) a second entrypoint for our service worker.
The current SW approaches (with workbox and plugins) is seriously crippled for any real service worker logic (BackgroundSync, push notifications, etc). By having an additional entrypoint you gain the same Typescript stack, code sharing, etc.
@gaearon I agree that it's a complicated use case, but the point of great tools is to be simple at first and let you access more expert-y features when you need them. I really wished there was an other way than forking, SW are an advanced feature, but fiddling with react-scripts and maintaining your fork afterwards is a whole different game.

Since your fork is now up and running, maybe Facebook maintainers will accept a pull request?

Our fork is pretty much "make it work" for our use case, definitely not "make it right". There would be multiple other concerns for inclusion in a project like CRA (docs, tests, ), I'm not sure a PR with our minimal modifications would be needed.
That being said, feel free to use it, or be inspired from it, it's available at https://github.com/ouihelp/create-react-app/pull/4/files - and you can also try it with:
yarn create react-app sw-entrypoint-test-app --typescript --scripts-version @ouihelp/react-scripts

vue-cli has the feature with pages

Just wanted to post an alternate requirement for multiple entry-points that isn't the normal "User" app and "Admin" app thing.
Implementing "Silent Authentication" with an identity provider such as Auth0:  https://auth0.com/docs/api-auth/tutorials/silent-authentication
You definitely don't want the silent-auth redirect loading a lot of code.  But at the same time there are definitely a few things you do (or at least I do) want to share at a code level (post target, etc.) without having to go all the way to defining those shared parts as configuration or even factoring out a whole external library.
I'm fine with ejecting being the solution to this - just wanted to mention it as a use-case of this feature for future consideration.

I think it's obvious that most of the people want a config file at project root to overwrite specific keys of react-scripts' Webpack configuration (and leave leave the rest as they are) - without ejecting or forking the whole entity of react-scripts. Is that really such a challenge?
I mean... This could also be in your (Create React App team) interest, when you look at this:   https://github.com/facebook/create-react-app/issues?utf8=✓&q=is%3Aissue+webpack
At least 1/3 of all issues are related to Webpack.

We had to build an admin / portal apps and did not want to come up with two different projects as this requires extracting common components into third project, which complicates the entire stack.
As create-react-app is a single app build system, we came up with the following solution:
Assuming you have two entry points admin & portal, we simply maintain two entry point files (instead of the default index.js), so we have:

src/admin.js
src/portal.js

then we we have a simple switch-entrypoint command that does:
# replace "homepage" property in package.json
sed -i '' -e 's/\("homepage": \)\(.*\)/\1"\/${ENTRYPOINT}",/' package.json
# override index.js with the correct entry point
cp src/${ENTRYPOINT}.js src/index.js

for those who's using Makefile, here's an example
Advantages:

No eject
Simple and clean

"Disadvantages":

Two build folders
Cannot start single dev server for both projects

I personally see the "Disadvantages" as a positive thing as IMO we should treat our different entry points as isolated apps.
Thanks

Here is an example CRA with multiple entries without ejecting.
Basic idea is to symlink desired entrypoint to index.js on start and build, and you can have how many you want, in a single app.
https://github.com/iamandrewluca/cra-multiple-entries/pull/3

Looking at PR 5671 (which was closed because nobody reviewed it) seemed like small change to support output to multiple html files.
I'm admittedly new to the CRA stack. But I'm surprised to see this issue about multiple entry points limping along for over two years. Is this not a common problem, or, are most folks only building small-sized apps with this framework?
Isnt there just some sort of a "safety valve" placeholder one can add into webpack to support modifications/overrides to support something like 5671

Does anyone have an example working for v3.2.0?

Or you could just use react-router-dom
Example:
https://reacttraining.com/react-router/web/example/url-params

This package https://github.com/Derek-Hu/react-app-rewire-multiple-entry worked flawlessly for me and we have a non standard CRA setup.

I successfully workaround this using dynamic import and React lazy loading of main component, might want to see in this gist
This way, while the entry point is still the unswitchable index.js, main component loaded by it can still be switched using environment variable.

Just so everyone's clear, switching the entry point via environment variables or otherwise does not actually solve the problem of not having multiple entry points. With actual multiple entry points, you can optimize the bundles via webpack such that scripts are shared between bundles in an efficient way. You get none of this with only a single entry point, because webpack doesn't have the whole picture.

Having to follow the project structure is just too funny. I'm ejecting CRA at this point.

@jedmao I get your point, I even have an example where this would be useful.
We have a project where it has 5 frontend modules. Each module share same library also created internaly as living style guide. Would be great when building all 5 modules, they would share, common dependencies like, react, react-dom, bootstrap, reactstrap, our living style guide, and more dependencies.

And you can do exactly that. You just need to eject and tweak your webpack configuration. It works beautifully.

And you can do exactly that. You just need to eject and tweak your webpack configuration. It works beautifully.

The supposed benefit of CRA is having the easy path of React development without needing to tweak configurations. Using CRA is very streamlined in that it allows seamless upgrade of try-and-tested best practice configuration. Most boilerplate is clone-once-then-orphan from its upstream repo, that cannot be easily upgraded with NPM. Ejecting CRA and tweak sounds great, except when you have a lot of repo/app you need to maintain, each of them might need update every once in a while. Allowing customization without ejecting is opening CRA for much wider use cases. If you're suggesting ejecting, everything becomes possible but you're defeating the purpose of easy maintenance of CRA bootstrapped app. If ejecting is already desired, I think we won't be here asking for these features.

I agree, but considering the complexity of just blindly adding more entry points without accounting for your specific bundling needs, which will 100% need tweaking, I think the real solution here is to make this aspect and the ability to tune bundles both configurable in a CRA.
Understanding that making CRA configurable is not yet within the design goals of CRA, ejecting is the only viable option.

I recently encountered a similar scenario where I'd like multiple entries points and stumbled onto this issue. I'm glad to see it's still active and under discussion. I've been hesitant to eject, but I understand there is a lot of complexity with CRA managing user defined entry points.
Reading through the comments I was able to hack together a solution that should code split and bundle assets by combining the solution from @carruthe and @benedictjohannes.
Disclaimer I will be ejecting and not using this solution, but I wanted to go ahead and post it for others if they wanted to discuss the advantages and disadvantages of this approach. I've enjoyed reading through all of the creative solutions on this thread.
By combining dynamic imports and url  parsing here is the solution I have working locally without ejecting.
import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import Parser from './parser'; // Parser is a URL parser to extract the example parameter.

// Parses the browser url for the example parameter value.
const { example } = Parser.parse();

const Example = lazy(() => import(`./Example${example || 3}`));

const App = () => (
  <Suspense fallback={
Loading...
}>
    <Example />
  </Suspense>
);

ReactDOM.render(<App />, document.getElementById('root'));

Source code here: https://github.com/StephenEsser/example-code-splitting
Example demo here: https://stephenesser.github.io/example-code-splitting/
The url parser algorithm is from here
Dynamic Imports information can be found here.

Hi @gaearon
Could you please share you thought on what could be the best way for doing this on CRA 3.3.0?

I met the same problem, here is my way, it works :
Four steps to add multiple entry points to create-react-app
(say we add an admin.html):
1. Eject the project
npm run eject

2. Add multiple entry to webpack.config.dev.js
entry: {
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
      ]
  },
  output: {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  },

3. Modify HtmlWebpackPlugin
add a new plugin node:
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    }),

4. webpack Dev Server
rewrite urls
/config/webpackDevServer.config.js:
    historyApiFallback: {
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    }

detail: http://imshuai.com/create-react-app-multiple-entry-points/

When I try this approach, I'm getting the following error:
Cannot read property 'filter' of undefined

Customize-cra changed its configuration after upgrading to 2.x. Here is an example you can refer to the following：https://github.com/goblin-laboratory/cra-multi-page-template

@DanZeuss
Customize-cra changed its configuration after upgrading to 2.x. Here is an example you can refer to the following：https://github.com/goblin-laboratory/cra-multi-page-template

A functional example of create-react-app V3 working with multiple entry points: https://github.com/DanZeuss/create-react-app-multiple-entry-points

@DanZeuss can you split changes into different commits, so we can see what you changed?

Initial app commit
App ejected*
Your chagnes

@DanZeuss

When I try this approach, I'm getting the following error:
Cannot read property 'filter' of undefined

the 'filter' error is caused by:
      new ManifestPlugin({          // ......original code        }),
modify them:
      new ManifestPlugin({
        fileName: "asset-manifest.json",
        publicPath: publicPath,
        generate: (seed, files, entrypoints) => {
          const manifestFiles = files.reduce((manifest, file) => {
            manifest[file.name] = file.path;
            return manifest;
          }, seed);
          const _entrypoints = Object.values(entrypoints).reduce(
            (total, cur) => [...total, ...cur],
            []
          );
          const entrypointFiles = _entrypoints.filter(
            fileName => !fileName.endsWith(".map")
          );
          return {
            files: manifestFiles,
            entrypoints: entrypointFiles
          };
        }
      }),

and it works well.

Hi, any update on this four year issue? Multiple entry-points are an absolute must in security perspective.

security perspective.

What do you mean?

As @DanZeuss mentioned in #8249

My intention with this implementation is to allow the user add multiple entry points assuming that it’s going to generate separate bundles for each entry point.
Why?
Because security. Let’s me introduce a scenario for you to understand my point. There is an application that is defined to work with many security best practices. One for example is to not allow the user have access to the application and all content related to it (JavaScript files, images, html, etc) without being authorized through login. The user may have access only after logged in.
It’s to avoid the user have access to (included) JavaScript file/app and try to get some way to perform something the the user shouldn’t (understanding the code and injecting something, for example)
With this approach implemented, we can serve different apps in order to not have the whole application in a single file. It also avoids the user to have 2 separate (cra) applications for this purpose. This also avoid the user to eject cra and lose all benefits of it, including th futures one.
So, I hope we can reach a deal, but, independent our deal, it also needs the approvals from the reviewers, which maybe are offline for now. But I really hope to get a feedback from them.
Stay blessed

Hello,
I wanted to implement multiple entry points in my application, Do we have some clear example/link which will be helpful, I am new to webpack and do not have thorough knowledge of it.

Actually react-scripts configures bundler to support automatic multiple entry points out from the box. It splits bundle for chunks even when you do nothing special. You seen 0.chunk.js and so on? This is splittings for small chunks, it is already here (with some automatic splittings criteria).
If you want to provide some help to bundler to make it better understand the structure of your application, - then you can directly use asynchronous chunk loading for some components with something like react-loadable.
Multiple entry points allow you fully separate some code from anther to make two different app with different exclusive parts. Usually this is significantly different applications. For such case I use different create-react-app projects. Shared (library) code is in common project and multiple src dir with alias is used to its integration.

@harshalpandey, I know this is a really long thread, so maybe you missed it in the collapsed comments, but I hope this comment is what you're looking for.
I spent a lot of time with the webpack bundle analyzer to ensure it was a highly optimized configuration; however, it does require ejecting a CRA. You might have to play with the minChunks values until the bundle analyzer shows you what you're looking for, which should be:

A big vendor.js file (contains mostly node_modules).
A smaller common.js file (contains mostly header, nav and footer code, shared between most pages on your site).
A bunch of other smaller files, ranging from small to super tiny (should be just page-specific code at this point).

According to the image, it is noticeable to the naked eye that the largest area is occupied by the localization of moment and lodash.
This indicates an incorrect assembly. Localizations (including moment) are definitely not needed in budnle, only one is used in the application. They must be assebled separately, here is an example [intl-webpack-plugin] (https://oklas.github.io/component-intl-example/)
I have not met a situation where lodash would be needed at all. Neither in my projects or in which I had to work. The es allows you to make a lot of things. Someones even struggle to avoid lodash. Nevertheless, if you really want to take something from lodash, you should use individual imports and not drag all existing code to the client.
Regarding everything else, based on these two examples above, it should be more interesting not how the bundle is assembled, but the app coverage. That is, how much code in the bundle really executes in the application (and recuired to be in bundle).

That image is from 2015, so take it for what it's worth 😄

The mentioned questions is not related to the year and bundle version. It is application configuration and with same errors it will be bundled same way today (as before).

@oklas his point was to show how app bundle can be splitted, not what actually is included in bundle
This weekend I experimented with angular-cli. They have a config, where you can add multiple projects
e.g.

For each project you can configure a lot of options
e.g

Maybe react-scripts should start moving to use this aproach maybe, to have a config file.

Hello Guys,
Thanks a lot for your reply, But I am still not clear about the implementation with react application.
Let me try to tell you the exact use case of what exactly I want to achieve in my application.
Basically I need two entry points in the application one for the mail application and another is for the admin panel.
For Ex.
localhost:3000/app - it should run the main application.
localhost::3000/adminApp - it should run the application which will only be having menus that are related to admin.
Please let me know what is the exact solution I can use which will resolve my problem.
if something other then multiple entry points we can do to achieve this without ejecting the application that will also be fine.

import Loadable from 'react-loadable'
import Loading from './my-loading-component'
import {BrowserRouter as Router, Switch, Route} from "react-router-dom"

const LoadableApp = Loadable({
  loader: () => import('./my-app'),
  loading: Loading,
});

const LoadableAdmin = Loadable({
  loader: () => import('./my-admin'),
  loading: Loading,
});

const App = () => (
  <Router>
    <Switch>
      <Route path="/app"><LoadableApp/></Route>
      <Route path="/admin"><LoadableAdmin/></Route>
    </Switch>
  </Router>
)

My situation I have my main App.js using index.html but I also have chromecast-receiver.html for Google Chromecast application, I can't figure out a way to build and bundle my Chromecast App with CRA

@oklas
Thanks for your solution.
I have one doubt/question. The solution which you have mentioned in which we are anyway using React Routes.
So after deploying build of my application on the server.
if I run my application and hit URL https://example.com it will initiate the route and then I can hit any of the URL (/app , /admin), and accordingly, it will load the related component.
But If I directly hit the URL https://example.com/app or https://example.com/admin , I think it will search for app or admin directory in my build folder and it will give me an error that
Not Found
The requested URL /app was not found on this server.
Do we have any solution for this?

@harshalpandey when having a SPA, in most of cases server should return index.html when no request handler found.

You could do something funky with shell scripting. Not sure how practical this is but it will solve your problem (from how I interpret it).
Have two entry point js files, lets go with user.js and admin.js.
Have two build commands in package.json; build-user, build-admin.
When you go to run build-user, before running react-scripts build, have some shell code that copies user.js to index.js in your source code. Same for build-admin, just copy it's entry point to index.js before running the actual build command. This way if you're working on the same entry point consistently, you can still use build.
package.json
"build": "react-scripts build",
"build-user": "cp src/user.js src/index.js && react-scripts build",
"build-admin": "cp src/admin.js src/index.js && react-scripts build"

this sadly is still the best solution to avoid to eject
maybe is possible to use https://github.com/timarney/react-app-rewired/ and use some webpack plugin / configuration?

any recommendation for me?

ugh, let me throw another one at u guys...
Electron application where you want 'modals', or, components in different windows, and you want said windows written in React. I have to pass different html files to electron, and it would be awesome if I could have multiple entry points because then my project looks like
/public
index.html
modal.html
/src
/features
/app
/modal
index.js
modal.js
It seems to be a real pain to acheive this without ejecting and knowing everything about webpack

You could do something funky with shell scripting. Not sure how practical this is but it will solve your problem (from how I interpret it).
Have two entry point js files, lets go with user.js and admin.js.
Have two build commands in package.json; build-user, build-admin.
When you go to run build-user, before running react-scripts build, have some shell code that copies user.js to index.js in your source code. Same for build-admin, just copy it's entry point to index.js before running the actual build command. This way if you're working on the same entry point consistently, you can still use build.
package.json
"build": "react-scripts build",
"build-user": "cp src/user.js src/index.js && react-scripts build",
"build-admin": "cp src/admin.js src/index.js && react-scripts build"

this sadly is still the best solution to avoid to eject
maybe is possible to use https://github.com/timarney/react-app-rewired/ and use some webpack plugin / configuration?

I have to keep pointing out that this is NOT a solution, as it eliminates the possibility of bundle optimizations between entry points. If that doesn't matter to you, then I suppose it's an OK solution. Just don't want to lead anyone astray here.

Maybe owners should add the repo on issuehunt. To collect donations for most wanted features.

lol, 'eh'
My solution was:
use react-app-rewired
Config for anyone who needs it in the future
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin');

const path = require( 'path' )

module.exports = {
  webpack: ( config, env ) => {
    // We need a way to transpile web workers so we can use them within react,
    // so it was necessary to override the default webpack config. This may
    // not be necessary in the future
    config.module.rules.push({
      test: /\.worker\.js$/,
      use: { loader: 'worker-loader' }
    })

    // We also need a way to use node modules in web workers, so we override the
    // default target to electron-renderer
    config.target = 'electron-renderer';

    //  Push the other html page
    config.plugins.push( new HtmlWebpackPlugin( {
      inject: true,
      chunks: ["test"],
      filename: 'test.html',
      template: path.join( __dirname, 'public', 'test.html' ),
    } ) )

    //  Tell React Dev server to use other names than main
    config.plugins.push( new ManifestPlugin( {
      fileName: 'asset-manifest.json',
      publicPath: '/',
      generate: (seed, files, entrypoints) => {
        const manifestFiles = files.reduce((manifest, file) => {
          manifest[file.name] = file.path;
          return manifest;
        }, seed);
        // Previous code
        // const entrypointFiles = entrypoints.main.filter(
        //   fileName => !fileName.endsWith('.map')
        // );
        const entrypointFiles = {};
        Object.keys(entrypoints).forEach(entrypoint => {
          entrypointFiles[entrypoint] = entrypoints[entrypoint].filter(fileName => !fileName.endsWith('.map'));
        });
        return {
          files: manifestFiles,
          entrypoints: entrypointFiles,
        };
      },
    } ) )

    //  Necessary for some reason I don't entirely know
    config.output['globalObject'] = 'this';
    return config
  },
  jest: ( config ) => {
    return config
  },
  devServer: ( configFunction ) => {
    return ( proxy, allowedHost ) => {
      const config = configFunction( proxy, allowedHost )
      return config
    }
  },
  paths: ( paths, env ) => {
    return paths
  }
}

My solution is:
script on package.json
    "dev": "react-scripts start",
    "dev:admin": "REACT_APP_MODE=admin  react-scripts start",

and index.js
import React from 'react'
import ReactDOM from 'react-dom'
import CustomerApp from './App'
import AdminApp from './AdminApp'

const App = process.env.REACT_APP_MODE === 'admin' ? AdminApp : CustomerApp

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
)

this is the patch I have been using
20a21
> const envEntryPoint = process.env.ENTRY_POINT || 'index';
82,83c83,84
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),
104,105c105,106
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),

so I can do
ENTRY_POINT=index yarn build
ENTRY_POINT=index2 yarn build
ENTRY_POINT=index3 yarn build
``

this is the patch I have been using
20a21
> const envEntryPoint = process.env.ENTRY_POINT || 'index';
82,83c83,84
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),
104,105c105,106
<   appHtml: resolveApp('public/index.html'),
<   appIndexJs: resolveModule(resolveApp, 'src/index'),
---
>   appHtml: resolveApp('public/' + envEntryPoint + '.html'),
>   appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),

so I can do
ENTRY_POINT=index yarn build
ENTRY_POINT=index2 yarn build
ENTRY_POINT=index3 yarn build

Perfect, i hope it won't broke in the future

Another use case for this is when you have a mostly static site and you want to add bits of React here and there while being able to take advantage of webpack and keep the bundles separate.
For example, if you have a React form on the homepage of mysite.com and you also want React to handle a list of FAQs at mysite.com/faq, you don't want users visiting the FAQ page to load a bundle containing code that is not relevant.
I can understand if this is out of scope for CRA though.

My use case for multiple entry points is implementing an OpenID Connect silent login in an iframe. The second entry point for the applications is a light weight page that is the result of the login redirect, and communicates with the main page via postMessage. This could be done as an application route or similar, but redirecting to a /silent_renew.html that loads just enough JS to communicate feels a lot cleaner to me than redirecting to /silent_renew that is a HTML5 route in the main application.

Well. CRA is aiming at SINGAL page Apps, but soon you'll find the js is too
git to fit in one page, so split into multiple pages would be a good idea
and all pages could re-use the same login form component etc.
I use a patched version like Vitaly above. Hope this would be implemented
as a standard feature.
On Sun, Oct 11, 2020 at 9:17 AM Nicholas Steicke notifications@github.com
wrote:

My use case for multiple entry points is implementing an OpenID Connect
silent login in an iframe. The second entry point for the applications is a
light weight page that is the result of the login redirect, and
communicates with the main page via postMessage. This could be done as an
application route or similar, but redirecting to a /silent_renew.html
that loads just enough JS to communicate feels a lot cleaner to me than
redirecting to /silent_renew that is a HTML5 route in the main
application.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/1084#issuecomment-706634216,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAHVBEFVPTFKAJNNCK6OOLSKEBRZANCNFSM4CXDVI2A
.

--
About: http://about.me/dujinfang
Blog: http://www.dujinfang.com
Proj:  http://www.freeswitch.org.cn

Fort this, you could be using code splitting

Em 10 de out. de 2020, à(s) 22:12, Francesco Truzzi notifications@github.com escreveu:

Another use case for this is when you have a mostly static site and you want to add bits of React here and there while being able to take advantage of webpack and keep the bundles separate.
For example, if you have a React form on the homepage of mysite.com and you also want React to handle a list of FAQs at mysite.com/faq, you don't want users visiting the FAQ page to load a bundle containing code that is not relevant.
I can understand if this is out of scope for CRA though.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

Fort this, you could be using code splitting

There is an example above

I found this post that may help some people with this issue. It seems to work for me.
https://blog.logrocket.com/multiple-entry-points-in-create-react-app-without-ejecting/
"TL; DR
You can create multiple entry points in a CRA application without ejecting by using an environment variable to conditionally import container files. Doing this prevents code from the other containers appearing in the desired bundled build."

I did it using https://github.com/Derek-Hu/react-app-rewire-multiple-entry in the end.
Thank you @danvc and @oklas for the tip, but I wanted to avoid using react-router if possible.

@ftruzzi looks at this example that I've implemented (without external modules):
https://github.com/danvc/create-react-app-multiple-entry-points

Hello, guys, what about using React in chrome extension development?
There's no appHtml, but a content script entry which defined in manifest.json.
  "content_scripts": [{
    "matches": "<all_urls>",
    "js": ["./static/js/content.js"]
  }]

Since the create-react-app project has only one public/index.html, and a single src/index.js as js entrance, I use the following solution for multiple-page project.

<doctype html>

  <%= require("src/partials/getPageTemplate.js")(pageVariable) %>

// src/partials/getPageTemplate.js
module.exports = (appType) => {
  if( appType === appEnum.admin ){
    return `<div>Admin...</div>`
  }
}

// src/index.js
(async () => {
  if( process.env.APP = appEnum.admin ){
    await import("./admin")
  } else if( process.env.APP = appEnum.toolset ){
    await import("./toolset")
  }
})()

Hey @yarcowang did you manage to get this to work? Im trying to add two different content scripts (one uses all_frames, other one doesnt), but I cant seem to get it to work. Any ideas?

@ThisIsntPatrick4312 I'm using vite to manage the project, https://stackoverflow.com/questions/70522494/multiple-entry-points-in-vite, it seems simple to me.

authors: 9jaboy Alexter-progs AliFlux BrunoFenzl DanZeuss Dmarcoux111 GioLogist Morikko Obooman PeteW Sowed StephenEsser ThisIsntPatrick4312 a3diti aaesis andrmoel andymac4182 asaf ashnamuh avorobiov b4stien benedictjohannes bennettdams bradfordlemley carolozar carruthe codering danvc dmk255 dvkndn edmorley elzii ftruzzi gaearon gino8080 harshalpandey iamandrewluca imayka jedmao jessepinho jkarttunen juliaogris kiranps kohver kresli kulakowka lcoder leojh loopmode maoshuai martsie me21 miraage narthollis oklas onekamel plievone receter riceyeh rmoorman sertsedat seven1240 shorn smmoosavi tadatuta tbillington themre wespickett wiradikusuma xiaosongxiaosong yarcowang zhanzizhen


text:
Specify homepage based on environment?

Is this a bug report?
No.
Hi, all. I'm wondering what's the reason to have homepage be specified as the top-level parameter of package.json rather than allow it to be set with environment variable through a command line or .env.* files? My specific usecase is this:
I have two environments - staging and prod - serving two versions of my app with a following url scheme: proxy.myhost.com/my-app-staging and proxy.myhost.com/my-app-prod (the proxy machine aggregates a lot of apps and having a subdomain for each is not feasible). I build them by invoking either yarn build-staging or yarn build-prod, but the problem is that there is no way to specify homepage based on which script I am running. I was imagining defining "build-staging": "HOMEPAGE=/my-app-staging <rest of the build command>", but it doesn't seem to be possible right now?
I'm also using react-router, so setting "homepage": "." is not an option for me. (it results in client trying to request proxy.myhost.com/my-app-staging/some-dynamic-route/static/css/main.css upon navigating to a deep link).
Right now I'm just awk'ing the package.json on every build which I hardly can call a solution.

Have you tried to use PUBLIC_URL environment variable?

@miraage thanks for chiming in! I think I did not specify the exact problem clear: when CRA builds index.html it appends the paths to js and css bundles based on homepage (which PUBLIC_URL is sourced from), right? So here are the options that I currently have (homepage -> resulting path to js bundle when navigating directly to proxy.myhost.com/my-app-staging/some-dynamic-path):

Don't set homepage at all (in effect the same as set it to /) -> proxy.myhost.com/static/js/main.js - fails because proxy doesn't know which app to request main.js from
. -> proxy.myhost.com/my-app-staging/some-dynamic-path/static/js/main.js - fails because it's an invalid nav path
proxy.myhost.com/my-app-staging -> proxy.myhost.com/my-app-staging/static/js/main.js - works, but then there is no way to build prod version of the app from the same json config (it will point to staging static resources).

Unless I'm not seeing what are you proposing?

source: gharchive/issue

authors: miraage spolakh

repo: facebook/create-react-app

license: MIT

license_type: permissive

license_source: github-api


text:
Upgrade typescript-eslint to v2

v2 supports ESLint 6. However it also includes a number of breaking changes so we need to determine if any of them will impact our users: https://github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0

@typescript-eslint/no-angle-bracket-type-assertion is deprecated. So we need to change this line:
https://github.com/facebook/create-react-app/blob/4410f5ec30783cc60360b6e2306b95eead56c015/packages/eslint-config-react-app/index.js#L81
It's now called consistent-type-assertions. I believe it can be set as:
{ assertionStyle: 'as', objectLiteralTypeAssertions: 'allow' }

Not so sure about objectLiteralTypeAssertions though. There wasn't any existing rule on our config related to this.

This config is ok, it's no longer a warn and will show an error with this new config, but I think we have to deal with it. Using as is reasonable.

Is there a release ETA for this? I see it's already been PRed and merged. Great job and thanks, btw! 👍

authors: GLoganDR chibicode iansu pierreneter


text:
Disable copy to clipboard in cra --info

Fixes an issue where npx create-react-app --info throws an exception on Windows. The exception was caused by envinfo's copy to clipboard functionality; envinfo is distributed pre-bundled, but the dependency it uses for copying to the clipboard makes use of a binary on Windows that can't be found once the bundle is made. Disabling copy to clipboard fixes the issue. Closes #5757.
Verified by running create-react-app --info, everything works just fine.

Let's explicitly set it false in case the default changes?

source: gharchive/pull-request

authors: Timer heyimalex


text:
Remove project property from @typescript-eslint/parser options

The "project" property has a significant performance impact on linting,
and none our rules currently need it.
Fixes #6661.

We also have logic at the top of this file that is specific to the typescript project settings: https://github.com/facebook/create-react-app/blob/1f4516dd714732c00d1c3d02f9e3a3a495b3f608/packages/eslint-config-react-app/index.js#L26-L34.

Oops, missed those! I've removed them now :+1:

I removed some unnecessary code that was added for the project setting.

Oops, missed those too 😖 cheers

authors: ianschmitz jackwilsdon


text:
Fixed minor Typo errors

while going through this documentation I discovered few errors, though not conspicuous amazingly I spotted them out.

Motivation
(I felt inspired to check through this documentation after seeing on twitter the Open Source Immersion Program from Facebook and also due to my love for Open Source I immediately jumped at it)
Have you read the Contributing Guidelines on pull requests?
(Yes.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

thanks ;)

authors: olawanlejoel slorber

repo: facebook/docusaurus


text:
Facebook#1077 - Fix for input bug on Android - space or a special char clears the input

Summary
Fix for input bug on Android - typing space or a special char clears the input
https://github.com/facebook/draft-js/issues/1077
Test Plan

Add the component to your React website (test website)
Run Android emulator
Open your test website
Type a word into the component (for example, "All") and push space
Type another word (for example, "right") and push space

Expected behavior:
Text is not cleared, autocomplete is applied as expected
Wrong behavior fixed by this change:
Text is cleared or wrong symbols are added

+1

+1

+1

+1

+1

This works perfectly in our project and fixes typing on my german Android keyboard.

Just to report back, we've been running this patch in production for a week now and have gotten 0 complaints about typing on Android anymore. :tada:

is this committed ?

Update: This doesn't work perfectly, while it makes it possible to type on a german keyboard there's still bugs when autocorrecting/in some other cases that I haven't been able to track down. At least it doesn't crash the editor though...

+1

I found this works better with my keyboard
var composedChars = textInputData.trim() ? textInputData : compositionInputData + textInputData

due sometimes the value of textInputData  is " " (a space character)

ETA on this?

+1

Seeing this issue recently on draft-js using Gboard only.

+1

Also confirmed that this is popping up on draft-js using Gboard.

Just tested this on Android and it 100% does not work. Unlike other editors, you can't even trick Draft into working.

This seems to be broken when the caret is placed in the middle of another word. Typing any character causes the full gboard suggestion to be inserted.

@aminland I can't get anywhere close to that level of functionality with Gboard.

Sorry I meant that's the behaviour with this PR applied.

@flarnie any way we could get this test and merged for any future release?
As you can see from the comments it's not the perfect fix, but at least people can type something when on Gboard. Currently it's completely broken.
I understand you might be very busy, we just want to know if this will be considered for a future version or not.
Thx for keeping this project going!

Bump.

bump! keen to know if this stop gap fix will be introduced

Am I correct in understanding that on these Android phones, no beforeinput events are received?
Does anyone know in what cases both data variables end up with nonempty content?
@arypurnomoz Can you elaborate on when you were seeing a space char in data where you wouldn’t expect?
If we can answer these three questions I think this PR should be OK for merge.

@sophiebits just to note, as I said above the typing experience still sucks on Android with this patch applied. Autocorrect messes the text up really really bad.
The only thing this patch adds is that the editor doesn't crash on Android, but imo this isn't anywhere ready for production usage with real users.

@pb-expa that's exactly what we did too! 👍  See https://github.com/withspectrum/spectrum/pull/2868, specifically our custom draft-js-plugins-editor wrapper:
https://github.com/withspectrum/spectrum/blob/e7d02da6d03348a54cbbb9c132512a9d8b477657/src/components/draft-js-plugins-editor/index.js#L80-L86

+1

+1

Please stop posting +1. I'm going to delete all the (many) +1 comments here. The way this gets merged is if we find answers to the questions I posted above.

Lots of information related to those questions here: https://github.com/ianstormtaylor/slate/issues/2062
As per @thesunny's research, as I understand it, there is no beforeinput before Android API 27, which corresponds with Android Oreo 8.1.0.

@sophiebits You should just merge it, even a partial fix is a better fix than leaving it bugging. We heavily invested in integrating this component and turns out it's unusable on Android devices. It's a bad that it's not working, but it's real shame FB that you're even halting the patches to be merged.

@thesunny - thanks so much for the detailed response above! I'm sure it will help inform further attempts for improving Android Web support in Draft.js.
I also wanted to mention that @flarnie has compiled a very thorough list of issues + explanation of the state of Android Web support on #1895 .

Ok, my friends, I am closing this PR. First, it was never a fix for the full problem, I covered only limited number of issues, listed in the description - at that point in time it was enough. Since I issued this fix, Google implemented a lot of changes that make this fix just utterly insufficient: so many other issues appeared and fixing just this side effect doesn't change the game significantly at all.

authors: Slapbox alandardic aminland arypurnomoz ashevtcov ayyazdaniaryan bchmn charlespeach dfeinzeig dorraba ducnvhn enterline fabiomcosta gilatwix jonescr3 jrserani mikesheetal mxstbr niveditc pb-expa rameshvishnoi90904 sandorvasas shaulgo sophiebits tanat

repo: facebook/draft-js

license: mit

license_source: bigquery


text:
dynamic type tests don't work in ternary operator

here is an example
const stringFunc = (x: string) => null;
const numberFunc = (x: number) => null;

// this works
const ifElse = (a: string | number) => {
    if (typeof a === 'string') {
        return stringFunc(a);
    }
    else {
        return numberFunc(a);
    }
}

// this gives error "string: this type is incompatible with number"
const ternary = (a: string | number) =>
    a === 'string' ? stringFunc(a) : numberFunc(a);

live example

You missed a 'typeof' in your ternary
const ternary = (a: string | number) =>
  typeof a === 'string' ? stringFunc(a) : numberFunc(a);

shame on me

repo: facebook/flow


text:
Object type with indexer, saved to a variable, throws a syntax error

I've searched for a while but I can't figure out what I am doing wrong. This:
@flow
type PrefixesShape = {
    [string]: {
            [string]: string
    }
}

throws this:
file.js:3

    3:    [string]: {
                 ^ Unexpected token ]

You are probably using older version of Flow, try updating

Hmm, I'm not sure. I'm currently using v0.46.0, should I upgrade to v0.47.0?

Even the colon here (the one in line 3 prefixToCssmods?: {) throws syntax error. I'm using gulp-flowtype. Weird, I must have missed something.
const convertCssModuleClassnames =
    (
        prefixToCssmods?: {
            [string]: {
                [string]: string
            }
        }
    ) => (classNames?: string): string => (
        prefixToCssmods && classNames
        ? classNames.split(' ').map((className) => {
            let convertedClassname

            Object.keys(prefixToCssmods).forEach((prefix) => {
                const regexp = new RegExp(`^${prefix}`)

                if (regexp.test(className)) {
                    convertedClassname = prefixToCssmods[prefix][className.replace(regexp, '')]
                }
            })

            return convertedClassname ? `${convertedClassname} ${className}` : className
        }).join(' ')
        : classNames
    )

Can you reproduce it on https://flow.org/try/ ?

Here it is. I suspect Flow doesn't support curried arrow functions well yet, does it?

Here, I've used non-arrow functions for my creating my curried function. It seems that curried functions aren't well yet regardless if it's arrow or not.

Anyway, it seems to be proved that my original issue isn't of Flow itself. Thanks.

I've searched for a while but I can't figure out what I am doing wrong. This:
@flow
type PrefixesShape = {
    [string]: {
            [string]: string
    }
}

throws this:
file.js:3

    3:    [string]: {
                 ^ Unexpected token ]

authors: chrisregner-com vkurchatkin


text:
Argument checks at the beginning of a method are not respected later on

In this example, I have a and b. At the beginning of the method I do an argument check to make sure all values are valid so that I can use them later on. Flow freaks out if the argument check is not right after the if statement.
https://flow.org/try/#0C4TwDgpgBASghgOwCYHsC2AVc0C8UDeAUFFAnGhAFxQDOwATgJYIDmhAvgNyGEA2EwKHGrxk6LJCgAfUgFdevbv0EAjEYlSZs0uQu6EAZrIQBjYIxQIovFCwBqcXrIg0AFAEoCxKIwNRXcFA4eAjyvNIy3iQkKkEhYZ5E0VD0ArL0CNwk7DwkJpY0KPwAdDYsAcVkFO5ZUPkIhSVlriqV5BA1UAD0XVAAPAC0Q1AYABaMND6TBswQxfMcPCa8cDSTAMLoYJYQCIJJQupiWpIyoXrearAa4tpnYfokZQ5OLkH+njgAfF7Jvv7AcY0YqBYK6cJSSLJEiAibFWJg868RJRaKpYDpTKonKo+qNObNWHAuBtaq1PIFIoE2yuInw0kdTjdXqDYZjCZTUgoYAAfm8ORxPCAA

The issue here is that this.a can be a getter, e.g. function call which can have side effects.
So this is ok:
if (this.a == null) return;
console.log(this.a.name);
if (this.b == null) return;
console.log(this.b.name);

but this is not:
if (this.a == null) return;
if (this.b == null) return;
console.log(this.a.name);
console.log(this.b.name);

Also this is ok:
    const {a, b} = this;
    if (a == null || b == null) return;
    console.log(a.name);
    console.log(b.name);

Ahh yes, this was resolved a while ago, thanks for responding! I'll close this out...

authors: rickyp-uber stereobooster


text:
Remove double to in Flow Typed blog post

Grammar fix - Remove double to in Flow Typed blog post

Signed 🖌

doh! thanks

authors: jeffmo josescasanova


text:
How to debug Infer's backend

Hi,
I have had experience of developing compilers' backend. Generally the backend is started in debug, e.g. gdb, and stops at some breakpoints. The backend can be executed step by step and function calls can be followed by stepping into. The IR of the analyzed program can be printed to stdout/stderr or dumped into files.
However, as a newcomer of OCaml, I cannot find the counterpart things in debugging Infer's backend, which is implemented in OCaml and compiled to native code. Ocamldebug can only work on bytecode. For natvie code, gdb can break at modules' functions, but I found it is extremely hard to print variables' value in OCaml programs. That means examining IR and analysis results in Infer's backend is not easy.
I have read the book, real-world-ocaml and seen Mark Shinwell's video 'https://www.youtube.com/watch?v=NF2WpWnB-nk'. Both them does not give much instructions on printing variables in gdb.
How do you infer developers debug hundreds of thousands of lines of OCaml code?  Could someone give some advice?
Thanks a lot in advance.

Hi,
Most of us don't use a debugger to debug Infer. We just print elements, most of the IR elements have print functions, so we use those. To debug the symbolic execution in particular, we use html files that have printed most of the execution. You get those files with the option --debug, there is an html file for each source file in the folder infer-out/captured. Also, when you print things, if you use Logging.out, the output is only available in debug mode, and in infer-out/log/....
I hope this helps, let us know if you have more questions.

Hi @dulmarod
Thank you for your replay.  My question was answered.

authors: dulmarod leo-yinle

repo: facebook/infer


text:
[Java] Force javac to report in the correct language

This patch forces javac to report verbose output in English.
In my environment, the debug report in Japanese had caused Parsing.Parse_error at
https://github.com/facebook/infer/blob/master/infer/src/java/jClasspath.ml#L108.
This patch solved the error I encountered on compiling Hello.java.
I think $ infer -- javac -J-Duser.language=ja Hello.java will reproduce my bug if system supports the language. (My patch will not work with this case since the argument-specified language will override the language setting.)
Possible related issue: #30

@occho: Thanks for the pull request! We indeed did not consider this case.

@occho: Thanks a lot for fixing this! It seems that this pull request is fixing one of the most frequently reported issue when running Infer on Java. We were unable to reproduce this bug because we only use english as default local language.

@jeremydubreil It's my pleasure! :)

authors: jeremydubreil occho


text:
[Feature]: Add CLI options help to DefaultOptions and InitialOptions type definitions

🚀 Feature Proposal
The help here:
https://jestjs.io/docs/cli
Should be included in the Config.d.ts definition so they can be viewed inline when writing a jest.config.ts for a project.
Motivation
Less likely to make mistakes going back and forth to the web docs and back, if the user even knows they exist
Example

Pitch
More help is always better.

Wanna send a PR for it?

authors: JustinGrote SimenB

repo: facebook/jest


text:
Example for setupTestFrameworkScriptFile

Hi Jest,
I am having a little bit confused here regarding how to add jest.setTimeout(10000) globally in  setupTestFrameworkScriptFile. But I do not have see any clear example explicitly such an the code in jest.config.js. And I cannot find any example in
For current condition, I have :
jest.config.json
{
    "reporters": [
        "default",
        "./node_modules/jest-html-reporters"
    ],
    "setupTestFrameworkScriptFile": "jest-expect-message"
}

in my package.json
"scripts": {
    "test": "jest ./__tests__/ --config ./jest.config.json --detectOpenHandles --no-cache"
  }

So, how can I add jest.setTimeout(10000) globally in setupTestFrameworkScriptFile and also contains jest-expect-message? Could you please give an explicitly example?
Thank you. I appreciate for your help :)

This works for me in package.json:
  "scripts": {
    "test": "jest --setupTestFrameworkScriptFile=dotenv/config"
  },

authors: fergadipa tommedema


text:
Throw strings/object/numbers

now we can throw strings/objects/numbers and basically anything (still a very bad idea, but at least jest doesn't blow up)

Seems like you forgot to update some snapshots?

Created a new PR that is rebased.

authors: cpojer dmitriiabramov


text:
implement mockResolved/RejectedValue methods using mockImplementation

Summary
mockRejectedValue[Once] may cause an unhandled rejection. It is not easy to understand why this happens if you haven't already encountered this problem.
Details in related issue.
Test plan

Codecov Report

Merging #5720 into master will decrease coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #5720      +/-   ##
==========================================
- Coverage   63.66%   63.65%   -0.02%
==========================================
  Files         216      216
  Lines        7921     7918       -3
  Branches        4        3       -1
==========================================
- Hits         5043     5040       -3
  Misses       2877     2877
  Partials        1        1

Impacted Files
Coverage Δ

packages/jest-mock/src/index.js
86.68% <100%> (-0.13%)
:arrow_down:

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 74bf072...025b17e. Read the comment docs.

Nice, this also simplifies the code :) Thanks for your PR.

authors: codecov-io cpojer javinor


text:
perf(playground): load prettier and its parsers on demand in code block

Description

Dynamically loaded prettier and its parsers in code block on click of prettier icon.

Reduced around 1170.37KB (1.17MB) from main bundle and created respective chunks which will be loaded only on demand

Ran yarn build-playground-prod
Playground production build output

Before
After

Network calls (In Development)

Before
before.webm
Prettier and all its parsers are loaded initially

After
after.webm
Prettier will be loaded only on click of the prettier button

New Chunks created

parser-html
parser-postcss
parser-markdown
parser-babel
standalone

Main bundle size

Before
After

2141.87 KB/ gzip: 643.98 KB
974.13 KB/ gzip: 300.74 KB

Apologies for the late review @shanpriyan, but this looks good to me! Thanks for the contribution.
I think some of the E2Es are failing. You may need to add a waitForResponse or waitForTimeout into the "In the case of syntactically correct code, when the prettier button is clicked, the code needs to be properly formatted'" E2E.
Once that's added, I can then merge.

Apologies for the late review @shanpriyan, but this looks good to me! Thanks for the contribution.
I think some of the E2Es are failing. You may need to add a waitForResponse or waitForTimeout into the "In the case of syntactically correct code, when the prettier button is clicked, the code needs to be properly formatted'" E2E.
Once that's added, I can then merge.

No issues @thegreatercurve :)
I have added the waitForTimeout now.

authors: shanpriyan thegreatercurve

repo: facebook/lexical


text:
New parameter: hive.recursiveDirWalkerEnabled

Right now there is no way to configure this value, even if Hive is
configured to support recursive directory traversal/subdirectories. This
commit exposes the variable through a HiveClientConfig value.

@electrum what do you want to call the configuration name?

Merged

authors: dain danieltahara

repo: facebook/presto


text:
Element type based array, map and row encoding

Currently Array, Map and Row types' encodings are based on VariableWidthBlockEncoding regardless their containg types.
This is basically simple and easy to understand and implement.
But in some cases, ex an array of BIGINT, using VariableWidthBlockEncoding could waste space and computation time.
Even if the overhead is very little, we can avoid it by using containg types' block encodings.
There is no change at Row type as it's tuple of mixed types, but there would be a fundamental change at the Map type.
Before this, Map type was list of [k1,v1,k2,v2,...] encoded with VariableWidthBlockEncoding.
Now Map type is concated bytes of [k1,k2,...][v1,v2,...] encoded with each types' encoding.

This is an interesting approach, but I'm not sure we want to add getEncoding() to Type. See my other comment for an alternative approach we could take

Actually, Type.getEncoding is an abstraction of
// at TypeUtils.java
private static BlockEncoding getTypeEncoding(Type type)
{
    if (type instanceOf FixedWidthType) {
        return new FixedWidthBlockEncoding(((FixedWidthType) type).getFixedSize());
    }
    else {
        return new VariableWidthBlockEncoding();
    }
}

Discussed how this should work with @dain. He's going to try and refactor Type to support any object type as the getJavaType(), then you can just change it to be Block for array and some pair of blocks (or even something else) for maps. Ping us in a week or so, if we haven't gotten back to you by then

@haozhun is working on making Block be supported as a native container type

authors: cberner miniway


text:
Update Example state.md with Hooks

i updated only the example state to hooks!!

thanks rachel!!!

repo: facebook/react-native-website


text:
update ActivityIndicator.md

Step of https://github.com/facebook/react-native-website/issues/929

[x] Rearranged things to be in alphabetical order

Thanks!

authors: raajnadar rickhanlonii


text:
Version 0.44.0 应用一启动闪退 Open the application crash

react-native run-android
installDebug is SUCCESSFUL
但是应用打开（Open the application），就闪退（crash）

React Native version: 0.44.0
Platform: Android
Development Operating System: Windows
Dev tools:  Android Studio

05-09 16:38:13.982 15873-15914/cn.miguche.shcs.internal E/AndroidRuntime: FATAL EXCEPTION: mqt_js
Process: cn.miguche.shcs.internal, PID: 15873
java.lang.RuntimeException: Error calling AppRegistry.runApplication
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:148)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:208)
at java.lang.Thread.run(Thread.java:818)
Caused by: com.facebook.jni.CppException: Could not get BatchedBridge, make sure your bundle is packaged correctly
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:148)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:208)
at java.lang.Thread.run(Thread.java:818)
05-09 16:38:19.424 7116-7116/? E/DEVICE_SDKTAG: Error reading from /proc/1.
05-09 16:38:19.426 7116-7116/? E/DEVICE_SDKTAG: Error reading from /proc/2.
05-09 16:38:19.428 7116-7116/? E/DEVICE_SDKTAG: Error reading from /proc/3.
05-09 16:38:19.429 7116-7116/? E/DEVICE_SDKTAG: Error reading from /proc/6.

Look inside package.json for versions of react and react-native.
For example in mine this is what I see:
"react": "^16.0.0-alpha.6",
"react-native": "^0.43.4",
most people believe that when you do:
npm install
You are guaranteed that these versions are the ones installed.  But that is not always the case. Sometimes npm just grabs whatever it can find from internet.
You may need to do:
npm install --save react@16.0.0-alpha.6
npm install --save react-native@0.43.4
Dont assume that 'npm install' puts exactly what you need into node_modules.  You might have to occasionally clean out node_modules
rm -rf node_modules
npm install --save react@16.0.0-alpha.6
npm install --save react-native@0.43.4  // in your case 0.44.0  but check what's in package.json
npm install
Let us know if that fixes it.  (Also note in SOME cases you need to do 'react-native link' after the installs but you should see some messages about this after npm install if that's the case.

Hi there! This issue is being closed because it has been inactive for a while.
But don't worry, it will live on with Canny! Check out its new home: https://react-native.canny.io/feature-requests/p/version-0440--open-the-application-crash

authors: dobrienlzd hramos lanjie233

repo: facebook/react-native