1

I have a project on React built with webpack 4. For server side rendering I constructed express backend and use webpack-dev-middleware, webpack-hot-middleware and webpack-hot-server-middleware. Also, there are webpack configs for client and node builds versions. However, if started separately just with webpack command everything works OK, but if I want to start server it throws the following result:

<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 is imported in app folder in index.js, that has the following code:

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;

The following code is got from webpack config for server:

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);

This is server development configuration:

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 },
}));

The question is: what is the reason for the error presented in first code block and how to go through with it?

ShiiRochi
  • 39
  • 10

0 Answers0