Ошибка загрузчика SCSS при использовании промежуточного программного обеспечения Express и Dev с Webpack 4 - PullRequest
Новая
       40

Ошибка загрузчика SCSS при использовании промежуточного программного обеспечения Express и Dev с Webpack 4

0 голосов
/ 14 мая 2018

У меня есть проект на React, созданный с помощью веб-пакета 4. Для рендеринга на стороне сервера я создал экспресс-бэкэнд и использую webpack-dev-middleware, webpack-hot-middleware и webpack-hot-server-middleware. Также есть конфиги веб-пакетов для версий клиента и сборки узлов. Тем не менее, если запускать отдельно только с помощью команды webpack, все работает нормально, но если я хочу запустить сервер, он выдает следующий результат: 

<MY_SYSTEM_PATH>\node_modules\bootstrap\scss\bootstrap.scss:8
@import "functions";
^
SyntaxError: Invalid or unexpected token
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (module.js:613:28)
    at Module._extensions..js (module.js:660:10)
    at Object.require.extensions.(anonymous function) [as .js] (<MY_SYSTEM_PATH>\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)

bootstrap.scss импортируется в папку приложения в index.js со следующим кодом: 

import React from 'react';
import 'bootstrap/scss/bootstrap.scss';

const App = () => {
    return(
      <div>
          <h1>React App!</h1>
          <div>
              <p>Just start!</p>
          </div>
      </div>
    );
};

export default App;

Следующий код получен из конфигурации webpack для сервера: 

module.exports = merge({
    name: 'server',
    target: "node",
    mode: 'development',
    entry: [
        'babel-regenerator-runtime',
        path.resolve(__dirname, '../src/server')
    ],
    output:{
        path: path.resolve(__dirname, '../public'),
        filename: "bundle.server.js",
        publicPath: "/",
        libraryTarget: "commonjs2"
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                use: {
                    loader: 'babel-loader'
                },
                exclude:/node_modules/
            },
            {
                test:/\.scss/,
                use: [
                  {
                      loader: 'css-loader',
                      options: {
                          modules: true
                      }
                  },
                  {
                      loader: 'sass-loader'
                  }
                ]
            }
        ]
    }
}, commonConfig);

Это конфигурация разработки сервера: 

const configs = [require('../../webpack/webpack.config.client.dev'), require('../../webpack/webpack.config.node.dev')];
const compilers = webpack(configs);

const publicPath = configs[0].output.publicPath;

// webpack-dev-middleware
app.use(require('webpack-dev-middleware')(compilers, { publicPath }))
// webpack-hot-middleware
app.use(require('webpack-hot-middleware')(compilers.compilers.find(c => c.name === 'client')));

// webpack-hot-server-middleware
const outputPath = configs[0].output.path;

app.use(publicPath, express.static(outputPath));

app.use(require('webpack-hot-server-middleware')(compilers, {
    serverRendererOptions: { outputPath },
}));

Вопрос в том, что является причиной ошибки, представленной в первом блоке кода, и как ее устранить?

...