ardatan / meteor-webpack

https://medium.com/@ardatan/meteor-with-webpack-in-2018-faster-compilation-better-source-handling-benefit-from-bc5ccc5735ef
MIT License
123 stars 29 forks source link

DevServer does not restore Accounts hooks and settings #73

Open alexmarczinek opened 5 years ago

alexmarczinek commented 5 years ago

I have currently an issue with the dev-server. While using it, it looks like the Accounts hooks and options are getting cleaned but not restored correctly.'

E.g. when setting a breakpoint in Meteor.startup Accounts._options has values. However afterwards they get cleaned and results in Accounts._options = {} the validateNewUser hook is also removed.

Maybe related to Issue #15?

packages:

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.4.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.6.2                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker

standard-minifier-css@1.5.3   # CSS minifier run for production mode
standard-minifier-js@2.4.1    # JS minifier run for production mode
shell-server@0.4.0            # Server-side component of the `meteor shell` command

react-meteor-data       # React higher-order component for reactively tracking Meteor data
tracker
universe:i18n
mdg:validated-method
accounts-password
email
meteortesting:mocha
kit:basic-auth
fourseven:scss
http
ardatan:webpack
ardatan:webpack-dev-middleware

package.json:

{
  "name": "xys",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "rm -fr .meteortest",
    "test-app": "TEST_WATCH=1 meteor test --full-app --test-app-path $(pwd)/.meteortest --once --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer",
    "lint": "eslint . --fix",
    "pretest": "npm run lint --silent",
    "build": "webpack"
  },
  "pre-commit": "lint",
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime": "^7.4.5",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-brands-svg-icons": "^5.8.2",
    "@fortawesome/free-regular-svg-icons": "^5.8.2",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "animate.css": "^3.7.0",
    "bcrypt": "^3.0.6",
    "bootstrap": "^4.3.1",
    "formik": "^1.5.7",
    "history": "^4.7.2",
    "jquery": "^3.4.1",
    "js-md5": "^0.7.3",
    "meteor-node-stubs": "^0.4.1",
    "popper.js": "^1.14.6",
    "prop-types": "^15.6.2",
    "query-string": "^5.1.1",
    "react": "^16.7.0",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-cookie-consent": "^2.3.1",
    "react-dom": "^16.7.0",
    "react-ga": "^2.5.7",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-toastify": "^5.1.1",
    "simpl-schema": "^1.5.5",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-transform-react-display-name": "^7.2.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-react-jsx-self": "^7.2.0",
    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@meteorjs/eslint-config-meteor": "^1.0.5",
    "autoprefixer": "^9.5.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.0",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-react": "^7.13.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "react-hot-loader": "^4.8.8",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-hot-server-middleware": "^0.6.0",
    "webpack-meteor-externals": "0.0.5",
    "webpack-node-externals": "^1.7.2"
  },
  "eslintConfig": {
    "extends": "@meteorjs/eslint-config-meteor"
  }
}

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const meteorExternals = require('webpack-meteor-externals');
const nodeExternals = require('webpack-node-externals');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

const clientConfig = {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
  },
  entry: ['@babel/polyfill', './client/main.js'],
  output: {
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['eslint-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-class-properties'],
            },
          },
        ],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return [
                  precss,
                  autoprefixer,
                ];
              },
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/main.html',
      favicon: './client/favicon.png',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    extensions: [
      '*', '.js', '.jsx',
    ],
  },
  externals: [
    meteorExternals(),
  ],
};

const serverConfig = {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
  },
  entry: [
    './server/main.js',
  ],
  target: 'node',
  externals: [
    nodeExternals(),
    meteorExternals(),
  ],
};

module.exports = [clientConfig, serverConfig];
promentol commented 5 years ago

@Shiadra have you found workrground on this?

alexmarczinek commented 5 years ago

No, not really. Right now I'm not using the dev-sever which is quite annoying as I cannot use hot reloading. Once i find some spare time I'll try to take a closer look. If someone has an idea why this does not work properly, please let me know. Any help would be appreciated.