Error postcss received undefined instead of css string

AngularFix contains a large number of fixes for Angular, AngularJS, Typescript, HTML, CSS and Javascript related issues. Daily Updated!

Issue

Trying to build an Angular project and I’m getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.

ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string

Solution

I had similar problem. I was trying to build an angular library and the message below appeared:

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
    at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
    at Object.onceWrapper (events.js:422:26)
    at ChildProcess.emit (events.js:315:20)
    at ChildProcess.EventEmitter.emit (domain.js:505:15)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s

I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.

The problem was in one component. The component had one styleURL (Angular component decorator), like this:

...component.css

but, the library uses scss. So, I changed the path to:

...component.scss

and I executed the command ‘ng build library-name —prod’. So, the error didn’t appear again.

I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.

Answered By — Willian Coelho da Cunha

Источник
Previous ID SR-15396
Radar None
Original Reporter @Kyle-Ye
Type Bug
Status Closed
Resolution Cannot Reproduce

Environment

Node version: v14.18.1
NPM version: 6.14.15
Xcode: Xcode 13.1 (Build version 13A1030d)
MacBook Pro (13-inch, M1, 2020)
macOS 12.0.1 (21A559)

Additional Detail from JIRA
Votes 0
Component/s Swift-DocC-Render
Labels Bug
Assignee @Kyle-Ye
Priority Medium

md5: 0e4bf46b3b7a6cfea4ad31387ae3b4d8

Issue Description:

Follow the readme.md, clone the repe, npm install and set VUE_APP_DEV_SERVER_PROXY.
But it gives an error about the «scss» tag in the styles. It seems to a issue about sass-loader.

error in ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=scss&Syntax Error: Error: PostCSS received undefined instead of CSS string
@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=scss& 4:14-440 15:3-20:5 16:22-448@ ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=scss&@ ./src/App.vue@ ./app/main.js@ multi (webpack)-dev-server/client?http://10.10.204.228:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./app/main.js

More specifically, if I run `npm run build` to build the target, it will give me a more clear error message

Syntax Error: ModuleError: Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 14.x
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v6.0.1

I also tried the node-17(Through the README.md suggest to use node-14), but still fails.

at FSReqCallback.oncomplete (node:fs:188:23) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Источник

I’m getting the following error when compiling sass with webpack.

Error: PostCSS received undefined instead of CSS string

This same error also occurs when compiling react.js and vue.js.

In this article, we will show you how to resolve this error and what causes it.

目次

How to fix the error: reinstall sass-loader

This error is being thrown up by sass-loader.

By reinstalling sass-loader, you can fix the sass compile error.

The steps to reinstall it are as follows

  • Uninstall sass-loader
  • Install sass-loader

To reinstall the above procedure, use the following command

# npm
$ npm uninstall sass-loader
$ npm install sass-loader --save-dev

# yarn
$ yarn remove sass-loader
$ yarn add sass-loader --dev

If you have node-sass installed, you will need to reinstall node-sass as well.

# npm
$ npm uninstall sass-loader node-sass
$ npm install sass-loader node-sass --save-dev

# yarn
$ yarn remove sass-loader node-sass
$ yarn add sass-loader node-sass --dev

The cause is that the version of node is not supported.

This error is caused by the fact that sass-loader does not support the node version.

You will get this error when you upgrade the global node version.
The latest version of node is compatible with sass-loader 11.1.1.

https://github.com/webpack-contrib/sass-loader/releases/tag/v11.1.1

Summary

The reason why you get the following error when compiling sass with webpack is because sass-loader does not support the node version.

Error: PostCSS received undefined instead of CSS string

To fix this error, you need to reinstall sass-loader with the following command.

# npm
$ npm uninstall sass-loader
$ npm install sass-loader --save-dev

# yarn
$ yarn remove sass-loader
$ yarn add sass-loader --dev

If you have node-sass installed, you will need to reinstall node-sass as well.

# npm
$ npm uninstall sass-loader node-sass
$ npm install sass-loader node-sass --save-dev

# yarn
$ yarn remove sass-loader node-sass
$ yarn add sass-loader node-sass --dev

コメント

Источник

Предисловие

Vue Project запускает ошибку:

Ошибка заключается в следующем

 ERROR  Failed to compile with 2 Ошибки дня5:11:51

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- D:codezcw-vue-shopzcw-vue-shopnode_modulessass-loaderdistutils.js
- D:codezcw-vue-shopzcw-vue-shopnode_modulessass-loaderdistindex.js
- D:codezcw-vue-shopzcw-vue-shopnode_modulessass-loaderdistcjs.js
- D:codezcw-vue-shopzcw-vue-shopnode_modulesloader-runnerlibloadLoader.js
- D:codezcw-vue-shopzcw-vue-shopnode_modulesloader-runnerlibLoaderRunner.js
- D:codezcw-vue-shopzcw-vue-shopnode_moduleswebpacklibNormalModule.js
- D:codezcw-vue-shopzcw-vue-shopnode_moduleswebpacklibNormalModuleFactory.js
- D:codezcw-vue-shopzcw-vue-shopnode_moduleswebpacklibCompiler.js
- D:codezcw-vue-shopzcw-vue-shopnode_moduleswebpacklibwebpack.js
- D:codezcw-vue-shopzcw-vue-shopnode_modules@vuecli-servicelibcommandsserve.js
- D:codezcw-vue-shopzcw-vue-shopnode_modules@vuecli-servicelibService.js
- D:codezcw-vue-shopzcw-vue-shopnode_modules@vuecli-servicebinvue-cli-service.js

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss
-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!.
/src/components/NavHeader.vue?vue&type=style&index=0&lang=scss& 4:14-440 14:3-18:5 15:22-448
 @ ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/NavHeader.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./
src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.50.181:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (D:codezcw-vue-shopzcw-vue-shopnode_modulespostcsslibinput.js:38:13)
    at parse (D:codezcw-vue-shopzcw-vue-shopnode_modulespostcsslibparse.js:13:15)
    at new LazyResult (D:codezcw-vue-shopzcw-vue-shopnode_modulespostcssliblazy-result.js:64:16)
    at Processor.<anonymous> (D:codezcw-vue-shopzcw-vue-shopnode_modulespostcsslibprocessor.js:142:12)
    at Processor.process (D:codezcw-vue-shopzcw-vue-shopnode_modulespostcsslibprocessor.js:121:23)
    at D:codezcw-vue-shopzcw-vue-shopnode_modulespostcss-loadersrcindex.js:141:8
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss
-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!.
/src/components/NavHeader.vue?vue&type=style&index=0&lang=scss& 4:14-440 14:3-18:5 15:22-448
 @ ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/NavHeader.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./
src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.50.181:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Решение

Причина была найдена. Оказалось, что атрибуты были добавлены к метке стиля, чтобы сообщить об ошибке:

<style lang="scss">



После запуска ошибки:

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

(Удалите текущую версию)

npm uninstall sass-loader
npm install sass-[email protected]8.0.0. --save-dev



Удалите эту версию

cnpm install node-sass --save-dev

Затем выполнить:

npm install

npm run serve

Сообщается о следующей информации:

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

// Удаление узла
npm uninstall node-sass
// затем установите последнюю версию (до 5.0)
npm install node-[email protected]4.14.1

npm install 

npm run serve

Успешно, o (∩_ ) o ха -ха ~

Источник

Понравилась статья? Поделить с друзьями:
  • Error postcss plugin tailwindcss requires postcss 8
  • Error post loading model hlmv
  • Error positive was not declared in this scope
  • Error pos vert variance
  • Error portal mod скачать