javascript - Target container is not a DOM element using webpack 4 and React

I am using Webpack 4.29.0 and react 16.7.0 and I am trying to render a simple website message from the Udemy course Web Development in 2019 from Start to Finish, however I am getting the error: Uncaught Error: Target container is not a DOM element and I am not able to determine the problem and every change that I have made to the webpack.config.js does not seem to work.

My Understanding: In the src folder > I created the ponents folder > header.js > import react and export the header ponent that will be use by > index.js > Rending it using the ReactDom.render and then display using the index.html > #root. I am not understanding why my page info will not load.

Package.json info:

{
  "name": "ch-hawk-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "buildDev": "webpack-dev-server --mode development",
    "buildProd": "webpack-dev-server --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "terser-webpack-plugin": "^1.2.1"
  },

  "babel": {
    "presets": [

      "@babel/preset-env",
      "@babel/react"

    ]
  }
}

My file structure is

My File Structure

Inside my webpack.config.js I have the following configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCss = require("optimize-css-assets-webpack-plugin");

module.exports = {

  entry: {
    app: './src/index.js'
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }

    },

    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 6
        }
      }),

      new OptimizeCss({
        cssProcessorOptions: {
          discardComments: true
        }

      })
    ],

  },



  devServer: {
    hot: true,
    press: true,
    contentBase: path.join(__dirname, 'dist'),
    open: 'Chrome'
  },
  watch: true,
  devtool: 'source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "[name].css"

    }),

    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      templates: './src/index.html'
    })

  ],

  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"

          },
          "sass-loader"
        ]


      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }

    ]

  },

  resolve: {

    extensions: [
      '.js',
      '.scss'
    ]
  }


};

Inside the src folder I have the ponents folder that has the header.js

import React from 'react';


export default class Header extends React.Component {

  render() {

    return (
    <h1>{this.props.title}</h1>
    )
    }
  }

inside the src folder I also have the index.html

<html>
  <head>
    <title>
      Our APP
    </title>

  </head>
  <body>
    <div id="root">


    </div>


    <script src="/bundle.js"></script>
  </body>
</html>

Inside the src folder I also have the index.js

import './sass/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './ponents/header';


ReactDOM.render (
  <Header title= "Our custom message" />,

  document.getElementById('root')
)

Error in Google Chrome

Google Chrome Error React

No Errors in the Webpack

Webpack information

Package.json info:

{
  "name": "ch-hawk-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "buildDev": "webpack-dev-server --mode development",
    "buildProd": "webpack-dev-server --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github./konistleio/Ch-Hawk-project.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github./konistleio/Ch-Hawk-project/issues"
  },
  "homepage": "https://github./konistleio/Ch-Hawk-project#readme",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "terser-webpack-plugin": "^1.2.1"
  },

  "babel": {
    "presets": [

      "@babel/preset-env",
      "@babel/react"

    ]
  }
}

My file structure is

My File Structure

Inside my webpack.config.js I have the following configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCss = require("optimize-css-assets-webpack-plugin");

module.exports = {

  entry: {
    app: './src/index.js'
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }

    },

    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 6
        }
      }),

      new OptimizeCss({
        cssProcessorOptions: {
          discardComments: true
        }

      })
    ],

  },



  devServer: {
    hot: true,
    press: true,
    contentBase: path.join(__dirname, 'dist'),
    open: 'Chrome'
  },
  watch: true,
  devtool: 'source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "[name].css"

    }),

    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      templates: './src/index.html'
    })

  ],

  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"

          },
          "sass-loader"
        ]


      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }

    ]

  },

  resolve: {

    extensions: [
      '.js',
      '.scss'
    ]
  }


};

Inside the src folder I have the ponents folder that has the header.js

import React from 'react';


export default class Header extends React.Component {

  render() {

    return (
    <h1>{this.props.title}</h1>
    )
    }
  }

inside the src folder I also have the index.html

<html>
  <head>
    <title>
      Our APP
    </title>

  </head>
  <body>
    <div id="root">


    </div>


    <script src="/bundle.js"></script>
  </body>
</html>

Inside the src folder I also have the index.js

import './sass/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './ponents/header';


ReactDOM.render (
  <Header title= "Our custom message" />,

  document.getElementById('root')
)

Error in Google Chrome

Google Chrome Error React

No Errors in the Webpack

Webpack information

Share asked Jan 31, 2019 at 7:48 Piton 811 silver badge7 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

You have a typo in your webpack.config.js file. Change templates to template and you are good to go!

new HtmlWebpackPlugin({
  template: './src/index.html'
})

React cannot find the root element in your HTML document. That's why it raises such an error.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744932071a4601799.html

javascript - Target container is not a DOM element using webpack 4 and React - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Target container is not a DOM element using webpack 4 and React - Stack Overflow

1 Answer 1

相关推荐