Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AppTrailblazer opened this issue Aug 24, 2022 · 0 comments
Open

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

AppTrailblazer opened this issue Aug 24, 2022 · 0 comments

Comments

@AppTrailblazer
Copy link

AppTrailblazer commented Aug 24, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant