Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG]Next with SCSS and customServerPath option are failing to serve on production mode.

See original GitHub issue
  • I am running the latest version
  • I checked the documentation (nx.dev) and found no answer
  • I checked to make sure that this issue has not already been filed
  • I’m reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

Next + Scss project should successfully serve production build when customServerPath is used.

On: nx serve {next project name} --configuration=production Nx should build and serve production build of that project.

Current Behavior

After a successful build, any next page visited that imports .scss file throws an error!

Failure Information (for bugs)

[ error ] ./pages/index.scss
TypeError: this[MODULE_TYPE] is not a function
Could not find files for /index in .next/build-manifest.json
ModuleBuildError: Module build failed (from /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function
    at /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:141:24
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:143:14
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1414:32
ModuleBuildError: Module build failed (from /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function
    at /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:141:24
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/Users/vkrizic/tmp/happynrwl/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/vkrizic/tmp/happynrwl/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:143:14
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/vkrizic/tmp/happynrwl/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/vkrizic/tmp/happynrwl/node_modules/webpack/lib/Compilation.js:1414:32

Steps to Reproduce

  1. pull my repository which sets up basic scenario to reproduce this issue. https://github.com/krizic/nx-next-scss-prod-error
  2. run npm install
  3. run nx serve app-next --configuration=production

Context

  @nrwl/angular : Not Found
  @nrwl/cli : 9.0.0
  @nrwl/cypress : 9.0.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 9.0.0
  @nrwl/linter : 9.0.0
  @nrwl/nest : Not Found
  @nrwl/next : 9.0.0
  @nrwl/node : Not Found
  @nrwl/react : 9.0.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.0.0
  @nrwl/web : 9.0.0
  @nrwl/workspace : 9.0.0
  typescript : 3.7.5

Observe that server.js is wired up as customServerPath project build property as described in the documentation

Although included in the repository I will share here also the content of my (basic) server.js file

const http = require('http');

const startServer = async (nextApp, options) => {
  const handle = nextApp.getRequestHandler();
  await nextApp.prepare();
  const server = http.createServer((req, res) => {
    handle(req, res);
  });
  return new Promise((resolve, reject) => {
    server.listen(options.port, error => {
      if (error) {
        reject(error);
        return; 
      }
      resolve();
    });
  });
};

module.exports = startServer;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
elliottsjcommented, Feb 24, 2020

@krizic I cloned your repo and I’m able to run the example without error.

I ran:

git clone https://github.com/krizic/nx-next-scss-prod-error.git
cd nx-next-scss-prod-error/
npm install
npm run nx serve app-next --configuration=production

Open http://localhost:4200/

Screen Shot 2020-02-23 at 9 43 54 PM
0reactions
elliottsjcommented, May 2, 2020

@krizic Got it, I can repro the same issue now.

Looks like it’s a known issue with @zeit/next-css.

I’d recommend upgrading to Next.js 9.3; .scss support is built-in now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Css not loading in production mode when using nextjs
When building and starting a production build of our application, no css is loaded. CHecking the devtools, I can see a myriad of...
Read more >
Going to Production - Next.js
Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
Read more >
Production | webpack
In this guide, we'll dive into some of the best practices and utilities for building a production site or application.
Read more >
Production - Parcel
Parcel's production mode automatically bundles and optimizes your application for production. It can be run using the parcel build command:
Read more >
How to tell ReactJS to build project in Production mode
This will create a build directory with production build of the app. Your JavaScript and CSS files will be inside the build/static directory....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Bug] Angular builder cannot find built dependent libs

Next page

create-nx-plugin causes error Cannot find project 'plugin-name-e2e' in 'apps/plugin-name-e2e'