Webpack of Angular CLI build failing - Unexpected token

Question

I ejected an Angular Cli project, and tried to integrate Angular Universal into it. I've got the project bundling as it should. The problem is when I go to run "node dist/server.js", I get an Unexpected Token error.

Full error:

/Users/brandon.baker/Documents/Sites/brand-angular-seed/dist/server.js:405665
module.exports = ./../node_modules/webpack/buildin/module.js;
                 ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Webpack config:

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
    prerender: './prerender.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [
      /(node_modules|main\..*\.js)/,
      {
        'sqlite3': 'sqlite3',
        'mariasql': 'mariasql',
        'mssql': 'mssql',
        'mysql': 'mysql',
        'oracle': 'oracle',
        'strong-oracle': 'strong-oracle',
        'oracledb': 'oracledb',
        'pg': 'pg',
        'pg-query-stream': 'pg-query-stream',
        'hiredis': 'hiredis',
        'redis-parser': 'redis-parser',
        'fsevents': 'fsevents',
        'node-gyp': 'node-gyp'
      }
  ],
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

Maybe the solution is clear and I just don't know why this can't be resolved. It shouldn't be looking for a node_modules folder, right?

Answer 1

I had the same problem. In my case, the cause of the problem was yarn workspace.

Including webpack related packages into nohoist resolved the issue.

"workspaces": {
  // ...
  "nohoist": [
    // ...
    "**/*webpack*" // <-
  ]
}