Skip to content

Instantly share code, notes, and snippets.

@alextorn alextorn/.babelrc
Created Oct 17, 2017

Embed
What would you like to do?
require is not defined in react.production.min.js (React 16) in vendor bundle
{
"plugins": [
[
"module-resolver",
{
"extensions": [
".js"
],
"root": [
"."
]
}
]
],
"env": {
"client:dev": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 Chrome versions"
]
},
"modules": false
}
],
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-class-properties",
"transform-object-rest-spread",
"syntax-dynamic-import",
"transform-es2015-classes"
]
},
"client:prod": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"> 1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
]
},
"modules": false
}
],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"syntax-dynamic-import"
]
},
"server": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
},
"modules": "commonjs"
}
],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"syntax-dynamic-import"
]
}
}
}
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import routes from 'app/shell/routes';
import Header from 'app/components/Header';
import Footer from 'app/components/Footer';
import styles from 'app/assets/styles/index.css';
const App = () => (
<Router>
<div className={styles.app}>
<Header />
<main className={styles.content} role="main">
<Switch>{routes.map(route => <Route {...route} key={route.path} />)}</Switch>
</main>
<Footer />
</div>
</Router>
);
export default App;
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import AssetsManifestPlugin from './plugins/AssetsManifestPlugin';
import ModulesManifestPlugin from './plugins/ModulesManifestPlugin';
import { locations, modules } from '../index';
const appStyles = new ExtractTextPlugin({
filename: modules.appProdCssFilename,
allChunks: true,
});
const vendorStyles = new ExtractTextPlugin({
filename: modules.vendorProdCssFilename,
allChunks: true,
});
export default {
entry: {
app: './app/shell/client/start.prod',
},
output: {
path: locations.assets,
publicPath: locations.assetsPublicUrl,
filename: `${modules.prodFilename}.js`,
chunkFilename: `${modules.prodChunkFilename}.js`,
},
performance: { hints: 'warning' },
context: locations.src,
devtool: false,
resolve: { extensions: ['.js'] },
target: 'web',
module: {
noParse: modules.minifiedJs,
rules: [
{
test: modules.jsModule,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
forceEnv: 'client:prod',
cacheDirectory: true,
},
},
},
{
test: modules.cssModule,
exclude: /node_modules/,
use: appStyles.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: modules.prodCssModuleClassName,
},
},
'postcss-loader',
],
}),
},
{
test: modules.cssModule,
include: /node_modules/,
use: vendorStyles.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
],
},
plugins: [
appStyles,
vendorStyles,
new webpack.HashedModuleIdsPlugin(),
new AssetsManifestPlugin({
path: locations.assets,
filename: modules.assetsManifestFilename,
}),
new ModulesManifestPlugin({
path: locations.assets,
filename: modules.modulesManifestFilename,
}),
new webpack.EnvironmentPlugin(['NODE_ENV']),
new webpack.DefinePlugin({ __DEV__: false }),
new webpack.optimize.CommonsChunkPlugin({
children: true,
// NB: `async` doesn't work, b/c this additional chunk must be sent to the client
// along w/ rendered post chunk. It might be possible to track it down
// in context of specific app, but it doesn't worth it for _this_ app.
// async: true,
minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => module.context && module.context.indexOf('node_modules') !== -1,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
}),
new webpack.LoaderOptionsPlugin({
debug: false,
minimize: true,
progress: true,
options: { context: locations.src },
}),
],
};
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(<App />, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.