Update to webpack 4 (#1145)

* remove some of the react errors, start to fix webpack HMR errors

* start upgrade to webpack 4

* more stuff to update webpack

* update webpack configs to work with webpack 4

* remove linting from truncate script

.babelrc

@@ -45,6 +45,11 @@
         "@babel/preset-env",
         "@babel/preset-react"
       ]
+    },
+    "development": {
+      "plugins": [
+        "react-hot-loader/babel"
+      ]
     }
   },
   "plugins": [

client/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { hot } from 'react-hot-loader';
+import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
@@ -22,7 +22,7 @@ const App = () => (
   </Provider>
 );
 
-const HotApp = hot(module)(App);
+const HotApp = hot(App);
 
 render(
   <HotApp />,

client/modules/IDE/components/Editor.jsx

@@ -363,7 +363,7 @@ Editor.propTypes = {
     content: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     fileType: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired
+    url: PropTypes.string
   }).isRequired,
   editorOptionsVisible: PropTypes.bool.isRequired,
   showEditorOptions: PropTypes.func.isRequired,

client/modules/IDE/reducers/ide.js

@@ -10,9 +10,9 @@ const initialState = {
   projectOptionsVisible: false,
   newFolderModalVisible: false,
   shareModalVisible: false,
-  shareModalProjectId: null,
-  shareModalProjectName: null,
-  shareModalProjectUsername: null,
+  shareModalProjectId: 'abcd',
+  shareModalProjectName: 'My Cute Sketch',
+  shareModalProjectUsername: 'p5_user',
   sketchlistModalVisible: false,
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,

client/modules/User/actions.js

@@ -84,7 +84,8 @@ export function getUser() {
         });
       })
       .catch((response) => {
-        dispatch(authError(response.data.error));
+        const message = response.message || response.data.error;
+        dispatch(authError(message));
       });
   };
 }

index.js

@@ -1,6 +1,5 @@
 if (process.env.NODE_ENV === 'production') {
   process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json'));
-  process.env.webpackChunkAssets = JSON.stringify(require('./dist/static/chunk-manifest.json'));
   require('./dist/server.bundle.js');
 } else {
   let parsed = require('dotenv').config();

package.json

@@ -63,9 +63,8 @@
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
-    "chunk-manifest-webpack-plugin": "github:catarak/chunk-manifest-webpack-plugin",
-    "css-loader": "^0.23.1",
-    "cssnano": "^3.10.0",
+    "css-loader": "^3.2.0",
+    "cssnano": "^4.1.10",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "^4.19.1",
@@ -73,19 +72,22 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.12.3",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
     "jest": "^24.8.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.11.0",
     "nodemon": "^1.18.9",
-    "postcss-cssnext": "^2.11.0",
-    "postcss-focus": "^1.0.0",
-    "postcss-loader": "^0.9.1",
-    "postcss-reporter": "^1.4.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-focus": "^4.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-reporter": "^6.0.1",
     "react-test-renderer": "^16.6.0",
     "rimraf": "^2.6.3",
     "sass-loader": "^6.0.7",
-    "style-loader": "^0.13.2",
+    "style-loader": "^1.0.0",
+    "terser-webpack-plugin": "^1.4.1",
+    "webpack-cli": "^3.3.7",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-node-externals": "^1.7.2"
   },
@@ -108,7 +110,7 @@
     "clipboard": "^1.7.1",
     "codemirror": "^5.42.2",
     "connect-mongo": "^1.3.2",
-    "console-feed": "^2.8.8",
+    "console-feed": "^2.8.10",
     "cookie-parser": "^1.4.3",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
@@ -129,7 +131,7 @@
     "js-beautify": "^1.8.9",
     "jsdom": "^9.8.3",
     "jshint": "^2.10.1",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "loop-protect": "github:catarak/loop-protect",
     "mjml": "^3.3.2",
     "mockingoose": "^2.13.0",
@@ -174,7 +176,7 @@
     "slugify": "^1.3.4",
     "srcdoc-polyfill": "^0.2.0",
     "url": "^0.11.0",
-    "webpack": "^3.12.0",
+    "webpack": "^4.39.2",
     "webpack-dev-middleware": "^2.0.6",
     "webpack-hot-middleware": "^2.24.3",
     "xhr": "^2.5.0"

server/migrations/start.js

@@ -1,3 +1,3 @@
 require('@babel/register');
 require('@babel/polyfill');
-require('./moveBucket');
+require('./truncate');

server/migrations/truncate.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import mongoose from 'mongoose';
+import slugify from 'slugify';
+
+const dotenv = require('dotenv');
+dotenv.config();
+
+import Project from '../models/project';
+
+// Connect to MongoDB
+mongoose.Promise = global.Promise;
+mongoose.connect(process.env.MONGO_URL, {
+  useMongoClient: true
+});
+mongoose.connection.on('error', () => {
+  console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
+  process.exit(1);
+});
+
+Project.find({}, {}, {
+  timeout: true
+}).cursor().eachAsync((project) => {
+  console.log(project.name);
+  if (project.name.length < 256) {
+    console.log('Project name is okay.');
+    return Promise.resolve();
+  }
+  project.name = project.name.substr(0, 255);
+  project.slug = slugify(project.name, '_');
+  return project.save().then(() => {
+    console.log('Updated sketch slug to: ' + project.slug);
+  });
+}).then(() => {
+  console.log('Done iterating over every sketch.');
+  process.exit(0);
+});

server/server.js

@@ -51,7 +51,7 @@ const corsOriginsWhitelist = [
 // Run Webpack dev server in development mode
 if (process.env.NODE_ENV === 'development') {
   const compiler = webpack(config);
-  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config[0].output.publicPath }));
+  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
   app.use(webpackHotMiddleware(compiler));
 
   corsOriginsWhitelist.push(/localhost/);

server/views/index.js

@@ -1,6 +1,5 @@
 export function renderIndex() {
   const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
-  const chunkManifest = process.env.webpackChunkAssets && JSON.parse(process.env.webpackChunkAssets);
   return `
   <!DOCTYPE html>
   <html>
@@ -35,13 +34,6 @@ export function renderIndex() {
     <body>
       <div id="root" class="root-app">
       </div>
-      <script>
-          ${process.env.NODE_ENV === 'production' ?
-          `//<![CDATA[
-          window.webpackManifest = ${JSON.stringify(chunkManifest)};
-          //]]>` : ''}
-      </script>
-      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/vendor.js']}` : '/vendor.js'}'></script>
       <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
       <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

webpack/config.dev.js

@@ -5,7 +5,10 @@ if (process.env.NODE_ENV === 'development') {
   require('dotenv').config();
 }
 
-module.exports = [{
+
+// react hmr being fucked up has to do with the multiple entries!!! cool.
+module.exports = {
+  mode: 'development',
   devtool: 'cheap-module-eval-source-map',
   entry: {
     app: [
@@ -15,14 +18,13 @@ module.exports = [{
       'react-hot-loader/patch',
       './client/index.jsx',
     ],
-    vendor: [
-      'react',
-      'react-dom'
+    previewScripts: [
+       path.resolve(__dirname, '../client/utils/previewEntry.js')
     ]
   },
   output: {
     path: `${__dirname}`,
-    filename: 'app.js',
+    filename: '[name].js',
     publicPath: '/'
   },
   resolve: {
@@ -34,11 +36,6 @@ module.exports = [{
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: Infinity,
-      filename: 'vendor.js',
-    }),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('development')
@@ -100,32 +97,4 @@ module.exports = [{
       }
     ],
   },
-},
-{
-  entry: path.resolve(__dirname, '../client/utils/previewEntry.js'),
-  target: 'web',
-  output: {
-    path: `${__dirname}`,
-    filename: 'previewScripts.js',
-    publicPath: '/'
-  },
-  resolve: {
-    extensions: ['*', '.js', '.jsx'],
-    modules: [
-      'client',
-      'node_modules',
-    ],
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          babelrc: true
-        }
-      }
-    ],
-  },
-}]
+};

webpack/config.examples.js

@@ -3,7 +3,7 @@ const nodeExternals = require('webpack-node-externals');
 
 module.exports = [{
   entry: path.resolve(__dirname, '../server/scripts/fetch-examples.js'),
-
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, '../dist/'),
     filename: 'fetch-examples.bundle.js'
@@ -22,7 +22,7 @@ module.exports = [{
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -36,7 +36,7 @@ module.exports = [{
 },
 {
   entry: path.resolve(__dirname, '../server/scripts/fetch-examples-gg.js'),
-
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, '../dist/'),
     filename: 'fetch-examples-gg.bundle.js'
@@ -55,7 +55,7 @@ module.exports = [{
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -69,7 +69,7 @@ module.exports = [{
 },
 {
   entry: path.resolve(__dirname, '../server/scripts/fetch-examples-ml5.js'),
-
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, '../dist/'),
     filename: 'fetch-examples-ml5.bundle.js'
@@ -88,7 +88,7 @@ module.exports = [{
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,

webpack/config.prod.js

@@ -1,8 +1,9 @@
 const webpack = require('webpack');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
-const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
 const cssnext = require('postcss-cssnext');
 const postcssFocus = require('postcss-focus');
 const postcssReporter = require('postcss-reporter');
@@ -13,36 +14,18 @@ if (process.env.NODE_ENV === "development") {
 
 module.exports = [{
   devtool: 'source-map',
-
+  mode: 'production',
   entry: {
     app: [
       '@babel/polyfill',
       'core-js/modules/es6.promise',
       'core-js/modules/es6.array.iterator',
       path.resolve(__dirname, '../client/index.jsx')
-    ],
-    vendor: [
-      'axios',
-      'classnames',
-      'codemirror',
-      'csslint',
-      'dropzone',
-      'htmlhint',
-      'js-beautify',
-      'jshint',
-      'react-dom',
-      'react-inlinesvg',
-      'react-redux',
-      'react-router',
-      'react',
-      'redux-form',
-      'redux-thunk',
-      'redux',
     ]
   },
   output: {
     path: path.resolve(__dirname, '../dist/static'),
-    filename: '[name].[chunkhash].js',
+    filename: '[name].[hash].js',
     publicPath: '/'
   },
 
@@ -53,16 +36,44 @@ module.exports = [{
       'node_modules',
     ]
   },
-
   module: {
-    rules: [
-      {
+    rules: [{
         test: /main\.scss$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader!sass-loader!postcss-loader'
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                postcssFocus(),
+                cssnext({
+                  browsers: ['last 2 versions', 'IE > 9']
+                }),
+                cssnano({
+                  autoprefixer: false
+                }),
+                postcssReporter({
+                  clearMessages: true
+                })
+              ],
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true
+            }
+          }
+        ]
       },
       {
         test: /\.jsx?$/,
@@ -76,11 +87,11 @@ module.exports = [{
       {
         test: /\.(png)$/,
         use: {
-            loader: 'file-loader',
-            options: {
-                name: '[name].[ext]',
-                outputPath: 'images/'
-            }
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'images/'
+          }
         }
       },
       {
@@ -92,58 +103,28 @@ module.exports = [{
         use: {
           loader: 'sass-extract-loader',
           options: {
-            plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
+            plugins: [{
+              plugin: 'sass-extract-js',
+              options: {
+                camelCase: false
+              }
+            }]
           }
         }
       }
     ]
   },
-
+  optimization: {
+    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+  },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('production')
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: Infinity,
-      filename: '[name].[chunkhash].js',
-    }),
-    new ExtractTextPlugin({ filename: 'app.[chunkhash].css', allChunks: true }),
     new ManifestPlugin({
       basePath: '/',
     }),
-    new ChunkManifestPlugin({
-      filename: 'chunk-manifest.json',
-      manifestVariable: 'webpackManifest',
-      inlineManifest: false
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false,
-        drop_console :true
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        postcss: () => [
-          postcssFocus(),
-          cssnext({
-            browsers: ['last 2 versions', 'IE > 9']
-          }),
-          cssnano({
-            autoprefixer: false
-          }),
-          postcssReporter({
-            clearMessages: true
-          })
-        ]
-      }
+    new MiniCssExtractPlugin({
+      filename: 'app.[hash].css',
     })
-  ],
-
+  ]
 },
 {
   entry: {
@@ -152,6 +133,7 @@ module.exports = [{
     ]
   },
   target: 'web',
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, '../dist/static'),
     filename: 'previewScripts.js',
@@ -165,7 +147,7 @@ module.exports = [{
     ],
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
@@ -175,12 +157,5 @@ module.exports = [{
         }
       }
     ]
-  },
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ]
+  }
 }];

webpack/config.server.js

@@ -12,6 +12,7 @@ module.exports = {
   },
 
   target: 'node',
+  mode: 'production',
 
   node: {
     __filename: true,
@@ -28,7 +29,7 @@ module.exports = {
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,