Блог

Это приложение React, созданное с помощью create-react-app (CRA) с использованием antd (Ant Design). Существующий проект был изменен при попытке рендеринга на стороне сервера (SSR).

npm run build работает просто отлично.

После этого возникает ошибка. На npm start :

 /Users/user/dev/reactappname/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
 

Возможно, это проблема с веб-пакетом, но я не уверен.

webpack.config.server.js:

 const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './server.js',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'build')
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx', '.less']
  },
  target: 'node',
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
  module: {
    rules: [
{
    test: /.less$/,
    use: [
        {
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        },
        {
            loader: 'less-loader',
            options: {
                javascriptEnabled: true
            }
        }]
},
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        exclude: [/.js$/, /.html$/, /.json$/],
        loader: 'file-loader',
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
          publicPath: '/',
          emitFile: false,
        },
      },
    ],
  },
};
 

.babelrc:

 {
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
        [ "babel-plugin-transform-require-ignore",
          {
            "extensions": [".less", ".sass"]
          }],
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-root-import",
        ["import", { "libraryName": "antd", "style": true}]
  ]
}
 

Это конфигурация веб-пакета для сервера, поэтому вам нужно передать ваши файлы css / less / sass для сборки / css с помощью MiniCssExtractPlugin в вашем веб-пакете. Затем на стороне сервера введите скрипты, которые указывают на файлы css / less / sass в build / css.

Например, конфигурация webpack для простого css (в вашем случае вам потребуется добавить меньше поддержки)

 {
  test: /.(css|less)$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true
      }
    }
  ]
}
 

Давайте предположим, что этот веб-пакет будет выдавать этот файл . build/css/main.css Затем ваш server.js выглядит примерно так:

 app.use("*", (req, res) => {
  let htmlData = fs.readFileSync("build/index.html", "utf8");
  const cssData = fs.readFileSync("build/css/main.css", "utf8");
  htmlData = htmlData.replace("</head>", `<style>${cssData}</style></head>`);
});
 

Вам нужно будет настроить more для LESS, если этого недостаточно для его работы.