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.
- ./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;
| }
- ./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;
- ./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))
| */
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:
css-loader
andstyle-loader
to process CSS files. Run the following commands:npm install css-loader style-loader --save-dev
Open your
angular.json
file and locate thestyles
section under thearchitect.build.options
section. List SurveyJS CSS styles there."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" ]
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.
Please let me know if this information and example help.
I look forward to your reply.