Error with npx rsbuild dev and npx rsbuild build when using CSR

[bah99]

Hello,

I'm encountering an error when running the commands npx rsbuild dev and npx rsbuild build. I'm trying to use this setup with Client-Side Rendering (CSR), but it doesn't seem to work.

Here is the error message:

Could you please help me troubleshoot and resolve this issue?

Thank you in advance!

[swalker326]

Do you have a reproduction repo?

Have you tried installing the missing package? @swc/core
is the package already installed?

[bah99]

Sorry I can't provide a reproduction repo.

But after installing @swc/core it's seems working but I still have some sass @import.

[faileon]

I have the same sass import issues trying CSR builds with scss like @bah99

[faileon]

@bah99 try adding pluginSass to plugins array in rsbuild.config.ts:

import { createConfig } from '@ng-rsbuild/plugin-angular';
import { pluginSass } from '@rsbuild/plugin-sass';

export default createConfig(
    {
        browser: './src/main.ts',
        inlineStylesExtension: 'scss',
        styles: ['./src/styles.scss', './src/vendors.scss'],
        assets: ['./src/favicon.ico', './src/assets' ],
    },
    {
        plugins: [pluginSass()],
    }
);

[bah99]

I'll try thank you @faileon

[bah99]

@faileon Thanks for your solution, but I'm still facing the same issue. Here’s my configuration for reference:

import { createConfig } from '@ng-rsbuild/plugin-angular';
import { pluginSass } from '@rsbuild/plugin-sass';

export default createConfig(
  {
    browser: './src/main.ts',
    inlineStylesExtension: 'scss',
    styles: [
      './src/styles.scss',
      './src/assets/sass/theme.scss',
      './src/assets/sass/style.scss',
      './node_modules/handsontable/dist/handsontable.full.min.css',
    ],
    assets: ['./src/assets'],
  },
  {
    plugins: [pluginSass()],
  }
);

Let me know if you notice anything off or if additional details would help diagnose the issue. Thank you!

[faileon]

@faileon Thanks for your solution, but I'm still facing the same issue. Here’s my configuration for reference:

import { createConfig } from '@ng-rsbuild/plugin-angular';
import { pluginSass } from '@rsbuild/plugin-sass';

export default createConfig(
  {
    browser: './src/main.ts',
    inlineStylesExtension: 'scss',
    styles: [
      './src/styles.scss',
      './src/assets/sass/theme.scss',
      './src/assets/sass/style.scss',
      './node_modules/handsontable/dist/handsontable.full.min.css',
    ],
    assets: ['./src/assets'],
  },
  {
    plugins: [pluginSass()],
  }
);

Let me know if you notice anything off or if additional details would help diagnose the issue. Thank you!

Are you using tailwind? If so, try to create postcss.config.cjs file with:

module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

[Coly010]

@bah99

Is your path here correct: './node_modules/handsontable/dist/handsontable.full.min.css'

import { createConfig } from '@ng-rsbuild/plugin-angular';
import { pluginSass } from '@rsbuild/plugin-sass';

export default createConfig(
  {
    browser: './src/main.ts',
    inlineStylesExtension: 'scss',
    styles: [
      './src/styles.scss',
      './src/assets/sass/theme.scss',
      './src/assets/sass/style.scss',
      './node_modules/handsontable/dist/handsontable.full.min.css',  // THIS ONE
    ],
    assets: ['./src/assets'],
  },
  {
    plugins: [pluginSass()],
  }
);

The path should be from project root. Do you have a node_modules folder at your project root? Or is it up a level or few levels? i.e. should it be '../node_modules/handsontable/dist/handsontable.full.min.css'

[bah99]

@faileon No, I’m not using TailwindCSS.

@Coly010 Yes, the path is correct; it matches what I have in the angular.json file:

"styles": [
  "node_modules/handsontable/dist/handsontable.full.min.css",
  "src/assets/sass/theme.scss",
  "src/styles.scss"
]

Here are the compilation errors I’m encountering:

Regarding the SASS @import warning, in version 19, we had to include the silenceDeprecations property in the angular.json file like this:

"stylePreprocessorOptions": {
  "includePaths": ["src/"],
  "sass": {
    "silenceDeprecations": [
      "mixed-decls",
      "color-functions",
      "global-builtin",
      "import"
    ]
  }
}

Let me know if there’s anything else I should double-check. Thanks

[Coly010]

@bah99 The Angular Builder in angular.json is massaging the value for node_modules differently than the createConfig is. The createConfig.styles expects a relative path from the project root. Try updating your path.

pluginSass exposes options that you can use to replicate the preprocessor options you passed in:
https://rsbuild.dev/plugins/list/plugin-sass#sassloaderoptions

[bah99]

Sorry, it's still not working, even after commenting out the Handsontable style. The paths look correct to me, and I’ve tried multiple configurations. Here’s the latest one:

import { createConfig } from '@ng-rsbuild/plugin-angular';
import { pluginSass } from '@rsbuild/plugin-sass';
import path from 'path';

const handsontableCssPath = path.resolve(
  __dirname,
  'node_modules/handsontable/dist/handsontable.full.min.css',
);
const stylesPath = path.resolve(__dirname, 'src/styles.scss');
const stylePath = path.resolve(__dirname, 'src/assets/sass/style.scss');
const themePath = path.resolve(__dirname, 'src/assets/sass/theme.scss');

console.log('handsontableCssPath:', handsontableCssPath);
console.log('stylesPath:', stylesPath);
console.log('stylePath:', stylePath);
console.log('themePath:', themePath);

export default createConfig(
  {
    root: __dirname,
    browser: './src/main.ts',
    inlineStylesExtension: 'scss',
    styles: [
      stylesPath,
      stylePath,
      themePath,
      handsontableCssPath,
    ],
    assets: ['./src/assets'],
    tsconfigPath: './tsconfig.json',
  },
  {
    output: {
      cleanDistPath: true,
    },
    plugins: [
      pluginSass({
        sassLoaderOptions: {
          sassOptions: {
            silenceDeprecations: ['import'],
            includePaths: ['./src/assets/sass'],
          },
        },
      }),
    ],
  },
);

Despite this configuration, I’m still encountering the same issue.

PS: It’s worth mentioning that this is a very large project, which might contribute to the challenges in debugging. Let me know if there’s anything else I can provide to help troubleshoot this further.

[Coly010]

@bah99 if you could provide any form of reproduction, it would certainly be helpful for me to reproduce and debug.

Otherwise, it may be a short while before I can investigate this further.

[faileon]

@bah99 if you could provide any form of reproduction, it would certainly be helpful for me to reproduce and debug.

Otherwise, it may be a short while before I can investigate this further.

reproduction:
https://github.com/faileon/ng-rspack-nx-playground

run:

pnpm nx build shell

will yield:

Failed to initialize Angular Compilation Error: Error: Can't find stylesheet to import.
  ╷
1 │ @import 'mymixins';
  │         ^^^^^^^^^^
  ╵
  - 1:9  root stylesheet