Question

我是新来的人，我已经完成了我的项目，所以现在当我使用yarn build命令构建应用程序时，在使用serve.js Web服务器时遇到此错误。我删除了node_modules并安装了它们，但未获得结果

未捕获的ReferenceError：未定义ReactDOM 在对象。（bundle.js：1）

这是package.json文件的内容

{
"name": "behtabweb",
"version": "1.0.2",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"stop": "pkill --signal SIGINT myApp",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"author": "alireza",
"license": "MIT",
"dependencies": {
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"@react-pdf/renderer": "^1.6.0",
"bootstrap": "^4.3.1",
"brfs": "^2.0.2",
"chart.js": "^2.8.0",
"cross-spawn": "^6.0.5",
"downloadjs": "^1.4.7",
"jspanel4": "^4.6.0",
"material-table": "^1.32.0",
"material-ui-image": "^3.2.0",
"notistack": "^0.6.1",
"ol": "^5.3.1",
"pdfkit": "^0.9.1",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.5",
"react-chartjs-2": "^2.7.6",
"react-dom": "^16.7.0",
"react-jss": "^8.6.1",
"react-localize-redux": "^3.5.2",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.0",
"react-swipeable-bottom-sheet": "^1.1.1",
"save-dev": "^2.0.0",
"unicode-properties": "^1.1.0",
"universal-cookie": "^3.0.7",
"vazir-font": "^19.2.0"
 },
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"less-loader": "^4.1.0",
"react-to-print": "^2.1.2",
"style-loader": "^0.23.1",
"transform-loader": "^0.2.4",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.2.1"
 },
 "browserslist": [
 ">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
 ]
}

这是webpack配置文件的内容

var webpaqck = require("webpack"); 

module.exports = {
resolve: {
    alias: {
        fs: 'pdfkit/js/virtual-fs.js'
    }
},
entry: "./src/index.js",
output: {
    path: __dirname + "/public/assets",
    filename: "bundle.js",
    publicPath: "assets"
},
devServer: {
    inline: true,
    contentBase: "./public",
    port: 3003
},
// mode: 'development',
mode: 'production',
module: {
    rules: [ 
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['@babel/preset-env', {
                        "targets": {
                            "node": "current"
                        }
                    }],
                    presets: ["@babel/preset-env", "@babel/preset-react"]
                }
            }
        },
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }, {
            test: /\.less$/,
            use: ['style-loader',
                'css-loader',
                'less-loader']
        },
        {
            test: /\.(png|jp(e*)g|svg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8000, // Convert images < 8kb to base64                   strings
                    name: 'images/[hash]-[name].[ext]'
                }
            }]
        }
        // ,
        // {
        //     test:/\.json$/,
        //     exclude:/(node-modules)/,
        //     use:{
        //         loader:"json-loader" 
        //     }
        // }
    ]
} 
}

这是index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { LocalizeProvider, Translate, withLocalize } from "react-    localize-redux";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SignIn from './pages/SignIn'
import { SnackbarProvider } from 'notistack';
import Button from '@material-ui/core/Button';

import Login from './pages/login'
import whoops404 from './components/whoops404'
import dashboard from './pages/Dashboard'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import white from '@material-ui/core/colors/yellow'

window.React = React.def

const themeRtl = createMuiTheme({
direction: 'rtl',
typography: {
    fontFamily: 'Vazir, sans-serif',
    useNextVariants: true,
}
});

const App = props => (
<MuiThemeProvider theme={themeRtl}>
    <LocalizeProvider>
        <SnackbarProvider maxSnack={3}
            anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
            }}
            action={[
                <Button size="small">
                    <Translate id="dismiss" />
                </Button>
            ]}>
            <Router >
                <div>
                    <Route path="/login" component={SignIn}></Route>
                    <Route exact path="/" component={dashboard}></Route>
                </div>
            </Router>

        </SnackbarProvider>
    </LocalizeProvider>
   </MuiThemeProvider>

    );

   render(
  <App />,
   document.getElementById('react-continer')
   )

该应用程序可通过webpack-dev-server开发，但不能在部署中使用。

未捕获的ReferenceError：在交付reactjs应用程序时未定义ReactDOM

0 个答案: