Skip to content

Meteor.js(react) shows a blank page after adding webpack. #114

@VitaminC1211

Description

@VitaminC1211

I added webpack to my meteor.js project with a hard time. and successfully runing now. but I'm facing now another issue.

Here is my webpack.config.js file

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

const clientConfig = {
  entry: './startup/client/main.jsx',
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        },
        loader: 'babel-loader'
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './startup/client/main.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['*', '.mjs', '.js', '.jsx', '.json', '.gql', '.graphql']
  },
  externals: [meteorExternals()],
  devServer: {
    hot: 'only'
  }
};

const serverConfig = {
  entry: ['./startup/server/index.js'],
  target: 'node',
  devServer: {
    stats: {
      chunks: false
    },
    hot: 'only'
  },
  externals: [meteorExternals(), nodeExternals({ modulesDir: path.resolve(__dirname, 'node_modules') })]
};

module.exports = [clientConfig, serverConfig];

and .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["react-hot-loader/babel", "@babel/plugin-transform-react-jsx"]
}

image

Compiled successfully but I can't see anything on browser.

This is original my meteor project, and the issues can see branch "adding-webpack".
https://github.com/deliteser112/meteor-starter-kit

image

Hope to help me please

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions