0

Context: I'm somewhat new to web development; I started about 2-3 weeks ago and jumped right into the MERN stack to understand the bigger picture of how everything works together. And as I encountered problems or questions, I gradually filled in knowledge gaps. After researching how to get started, I noticed that many tutorials used create-react-app, which I looked into and discovered that many discouraged its use. So I decided to use Webpack and Babel to set up React myself. I know it's recommended for beginners to use create-react-app, but I don't want to use it; I don't want to get into the habit of using create-react-app.

My first question is: how do Next.JS, Gatsby, and Vite set up a React project? The videos I came across recommended using one of those instead of create-react-app. I used Webpack and Babel instead because I had a resource available (Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node) that used these instead of Next.JS, Gatsby, and Vite. I didn't want to get into the details of how Next.JS, Gatsby, and Vite worked with the MERN stack because it would make me indecisive on which path to follow.

The second (and related) question is: what is the difference between a Webpack/Babel react project setup and a Next.JS, Gatsby, or Vite setup?

Third question related to Webpack and Babel setup,

import { join } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports = {

entry: './src/index.jsx',

output: {
    path: './dist',
    filename: 'app.bundle.js'
},

module: {
    rules: [
            {
            test:/\.js$/,
            use:'babel-loader',
            exclude:/node_modules/
            },
            {
                test:/\.jsx$/,
                use:'babel-loader',
                exclude:/node_modules/
            }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html'
    })
]

};

I want my entry point to be a .jsx file instead of a .js file, so I used a babel-loader, but the setup isn't working.

{
  "name": "reactsetup",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },

  "browserslist": [
    ">0.3%",
    "defaults", 
    "supports es6-module", 
    "maintained node versions"
  ]

}

My package.json file includes Babel-loader version 9.1.2.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

This is what my index.jsx file looks like for now. I'm not sure if this file must be a .jsx file, but I want to be able to set up the entry point as a .jsx file anyway since the book I'm using as a reference uses a .jsx file as its entry point. This is the webpack.config.js file of the book tutorial, (https://github.com/vasansr/pro-mern-stack/blob/master/webpack.config.js). I'm not 100% following the book; I'm just following sections as I need to learn them. Maybe my inconsistency in following the tutorial is why I'm struggling here.

This is what my .bablerc file looks like. { "presets": ["@babel/preset-env", "@babel/preset-react"] }

My error: **Compiled with problems:

ERROR

Module not found: Error: Can't resolve './src/index.js' in

I was expecting the Babel loader to allow Webpack to figure out how to load .jsx files, but that's not how it went.

EDIT: My problem is solved. I followed this article (https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-devserver-react-typescript-4b9b) which got rid of my original error. After which another error popped up:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

  • configuration.output.path: The provided value "./dist" is not an absolute path! -> The output directory as absolute path (required).

To solve this, I changed the output path to:

path: path.resolve(__dirname, 'dist'),

After this, I got another error

Error: For the selected environment is no default script chunk format available: JSONP Array push can be chosen when 'document' or 'importScripts' is available. CommonJs exports can be chosen when 'require' or node builtins are available. Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.

To solve this, I removed

 "maintained node versions"

from my package.json file in the "browserslist" folder.

I'm typing this in case anyone comes across any of these problems.

Please disregard my third question; I'd appreciate it if you could answer my first two. Thank you ahead of time.

randomuser0291
  • 21
  • 3

0 Answers0