Ошибки, связанные с webpack и babel-node с приложением response, express - PullRequest
Новая
       87

Ошибки, связанные с webpack и babel-node с приложением response, express

1 голос
/ 14 июля 2020

Я действительно борюсь с этим.

Я хотел бы реализовать SSR для улучшения SEO для своего приложения, но я застрял.

Я использовал CRA для клиентской стороны и express для сервера.

webpack успешно компилирует клиента, но когда я все запускаю, я получаю ошибки, связанные с моими файлами stati c, например less (я использую Ant Design, FWIW) и SVG .

Мне кажется, что я перепробовал практически все возможные перестановки, и, похоже, ничего не работает, поэтому я думаю, что мне не хватает чего-то фундаментального.

Мой файл webpack.config. js это: 

const path = require('path');

module.exports = {
  entry: ['babel-polyfill','./client/src/index.js'],
  output: {
    path: path.resolve('public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
          }
        },
      },
      {
        test: /\.less$/, // match any .less file, 
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          { loader: "less-loader",
            options: {
              lessOptions: {
                modifyVars: { 
                  '@primary-color': '#0a1f8f',
                  '@secondary-color': '#124734',
                  '@tertiary-color': '#e04403',
                  '@info-color': '@primary-color',
                  '@success-color': '#124734',
                  '@processing-color': '@primary-color',
                  '@error-color': 'rgba(224, 20, 7, 1.0)',
                  '@highlight-color': '#f6dfa4',
                  '@warning-color': 'rgba(224, 20, 7, 1.0)',
                  '@normal-color': '#231f20',
                  '@white': '#fff',
                  '@black': '#231f20',
                  '@layout-header-background': '#231f20',
                  '@layout-header-color': '#f6dfa4'
                  },
                  javascriptEnabled: true
              }
            }
          }
        ]
      },
      
      {
        test: /\.(s*)css$/, // match any .scss or .css file, 
        use: [
          { loader: "style-loader" }, 
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      }
    ]
  }
};

My babel.config. js is: 

module.exports = {
    "presets": ['@babel/preset-react', ['@babel/preset-env', {
        targets: {
          "browsers": ["last 2 versions"],
          node: "current"
        }
      }]],
    "plugins": [["@babel/plugin-proposal-class-properties"], ["@babel/plugin-transform-runtime", {
        "regenerator": true
      }]]
}

Моя файловая структура: / server / ... / client / ... и мой npm команды (я пробовал обе, и ни одна из них не работает):

"dev": "NODE_ENV = development webpack -wd & NODE_ENV = development nodemon --exe c babel-node ./server/ server. js --ignore publi c "," server ":" nodemon --exe c babel-node ./server/server.js NODE_ENV = development --igno re publi c "

Вот пример получаемой мной ошибки: 

@import '~antd/dist/antd.less';
^

SyntaxError: Invalid or unexpected token

Кроме того, если это помогает, когда я запускаю dev, я получаю сообщение об ошибке от babel-node ПЕРЕД webpack компилируется. Заранее спасибо!

Еще одно. Ошибка появляется, когда я импортирую свой файл App. js в свой файл serverRender, например: 

const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');

const App = require('../client/src/App'); // <!-- commenting out this line and the error is removed, but of course that doesn't solve anything

const ky = require('ky/umd');

const serverRender = (req, sport, year, season, gameWeek, query, page, url, id) => {
    console.log('req', req)
    return ReactDOMServer.renderToString(
        React.createElement(
            'div',
            null,
            `Rendered on the server at ${new Date()}`
        )
    )
}

module.exports = {serverRender};
...