Question T14342
Visible to All Users

After upgrading the angular version from 14 to 15 and seeeing the build error with survey-creator-core, defaultV2.css, modern.min.css and survey.css

created a year ago

Hi Team,

I have upgraded the my angular Cli version from 14 to 15 and while building the application, seeing the errors with `survey-creator-core, defaultV2.css, modern.min.css and survey.css styles.

I have added these files in style section in angular.json file and still seeing this error.

Please find the below error message and please help us on this.

  1. ./node_modules/survey-core/survey.css?ngGlobalStyle:6:0 - Error: Module parse failed: Unexpected token (6:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | * License: MIT (http://www.opensource.org/licenses/mit-license.php))
    | */

.sv_progress-buttons__container-center {
| text-align: center;
| }

  1. ./node_modules/survey-creator-core/survey-creator-core.css?ngGlobalStyle:8:0 - Error: Module parse failed: Unexpected character '@' (8:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | /
    | /
    cyrillic-ext */

@font-face {
| font-family: "Open Sans";
| font-style: normal;

  1. ./node_modules/survey-core/defaultV2.css?ngGlobalStyle:6:0 - Error: Module parse failed: Unexpected character '@' (6:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | * License: MIT (http://www.opensource.org/licenses/mit-license.php))
    | */

@charset "UTF-8";
| /* cyrillic-ext */
| @font-face {

4…/node_modules/survey-core/modern.min.css?ngGlobalStyle:6:0 - Error: Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * License: MIT (http://www.opensource.org/licenses/mit-license.php))
| */

Comments (1)

    Hello,
    Thank you for reaching out to us.

    The errors you're encountering seem to be related to Webpack not being able to process certain CSS files from the node_modules directory. This usually happens when your project's webpack configuration is missing the necessary loaders to handle these CSS files properly.
    To resolve this issue, you need to configure Webpack to handle these CSS files with appropriate loaders. Here's how you can do it:

    • Install necessary packages: Make sure you have the required packages installed. You might need to install css-loader and style-loader to process CSS files. Run the following commands:
    Code
    npm install css-loader style-loader --save-dev
    • Configure styles
      Open your angular.json file and locate the styles section under the architect.build.options section. List SurveyJS CSS styles there.
    JSON
    "styles": [ "src/styles.css", "node_modules/survey-core/defaultV2.min.css", "node_modules/survey-core/modern.min.css", "node_modules/survey-creator-core/survey-creator-core.min.css" ]
    • Restart the development server: After making these changes, try restarting your development server to see if the errors are resolved.

    Additionally, I created an Angular 15 demo using a Survey Creator for your reference: survey-creator-demo.zip. The app is build successfully on my end and a survey creator appears as follows.
    Clipboard-File-2.png

    Please let me know if this information and example help.

    I look forward to your reply.