Question

要首先获取错误消息，我遇到此错误：

   if($user_role == 'administrator')
    {
    $table = "[wpdatatable id=5 table_view=regular]";
    }
    elseif($user_role == 'member1')
    { ```

Picture showing unexpected token '<' when loading encountering React component 。

发生这种情况的原因是，由于要启动服务器端渲染而不是客户端，因此我已将我的React App导入server.js文件。我似乎无法解决这个问题。这是我的server.js文件：

ReactDOM.hydrate(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
                 ^
SyntaxError: Unexpected token '<'

当我节点server.js或babel-node server.js时发生错误。这是我的.babelrc.json：

const express = require('express');
const passport = require('passport');
const session = require('express-session');
const {v4: uuidv4} = require('uuid');
const path = require('path');
const log = require('./logger')
const compression = require('compression');
const {Helmet} = require('react-helmet')
import App from './client/src/index.js'


//React
const React = require('react');
const ReactDOMServer = require('react-dom/server');

//Behøver ikke variable her. Gøres så vores database bruger og kode ikke bliver offentligt gjorde. (se .env)
require('dotenv/config');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));


//Json parsing
app.use(express.json());
app.use(express.urlencoded({extended: true}));

//Compression
app.use(compression());

//Express session
app.use(session({
    secret: uuidv4(),
    resave: true,
    saveUninitialized: true
}))

//Passport auth
app.use(passport.initialize());
app.use(passport.session());



//Import of the passport config 
const initializePassport = require('./passport-config');
initializePassport(passport);

//Login route
app.post('/login', passport.authenticate('login'), (req, res) => {
    res.send({message: 'Oh hello there'});
});

//Logout route
app.get('/logout', (req, res) => {
    req.logout();
    res.redirect('/login');
});

//Import registrerings route. Pga. brugen af route i stedet for app kan vi bruge denne middleware med en anden underside, hvis vi f.eks. ville gøre så admins også kunne lave brugere.
const registerRoute = require('./routes/register-user');
app.use('/register', registerRoute);

//User routes hvor login er required. Rendering. Skal stå under called til initializepassport, ellers kan den ikke finde ud af at den er authenticated via passport, og auth.js returnerer dig derfor til login
const usersRoutes = require('./routes/user/user-routes');
app.use(usersRoutes);

//Admin routes til rendering
const adminRoutes = require('./routes/admin/admin-routes');
app.use(adminRoutes);

//Index routes to render
const indexRoutes = require('./routes/index-routes')
app.use(indexRoutes)

//Cron jobs
const cron = require('./Cron');


app.get('/*', (req, res) => {
    const app = renderToString(React.createElement(App));
    const helmet = Helmet.renderStatic();
  
  const html = `
      <!doctype html>
      <html ${helmet.htmlAttributes.toString()}>
          <head>
              ${helmet.title.toString()}
              ${helmet.meta.toString()}
              ${helmet.link.toString()}
          </head>
          <body ${helmet.bodyAttributes.toString()}>
              <div id="app">
                  ${app}
              </div>
          </body>
      </html>
  `;
  
    res.send(html);
  }); 
  

app.use('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html')) 
})

const PORT = process.env.PORT || 80

app.listen(PORT, () => console.log(`Initialising server on port: ${PORT}`));

我尝试了什么？我试图使用超文本h（App），我试图在index.js和App.js的导入之间切换，并且错误发生在它遇到的第一个React组件上。就是说，如果我切换到所有路由都位于的App.js，它将在其中的第一个组件处产生错误。我尝试使用当前和LTS版本的节点。我尝试使使用App的地方看起来像这样：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    ["@babel/preset-react"]
  ],
  "plugins": [
    ["@babel/transform-runtime"],
    ["transform-react-jsx", { "pragma": "h" }],
    ["@babel/plugin-proposal-class-properties"],
    ["import"]
  ]
}

当我提到它时，它在这里而不是在导入文件中最近的组件中中断。然后出现错误，如下所示：

app.get('/*', (req, res) => {
    const app = renderToString(<App/>);
    const helmet = Helmet.renderStatic();
  
  const html = `
      <!doctype html>
      <html ${helmet.htmlAttributes.toString()}>
          <head>
              ${helmet.title.toString()}
              ${helmet.meta.toString()}
              ${helmet.link.toString()}
          </head>
          <body ${helmet.bodyAttributes.toString()}>
              <div id="app">
                  ${app}
              </div>
          </body>
      </html>
  `;
  
    res.send(html);
  });

目前我不确定该怎么办。是babel在运行时无法正确转换React组件还是完全不同？

尝试与Babel进行SSR React时出现意外令牌

0 个答案: