I'm developing WordPress theme using Roots.io document and I have problem for watching .
I installed #tailwindcss/jit package and used '#tailwindcss/jit': {} in postcss.config.js but when I run 'yarn dev' command in terminal its build and display multiline errors in my browser.
How can improve my issue
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "#tailwindcss/jit" plugin failed: Cannot find module 'tailwindcss/lib/plugins/preflight'
Require stack:
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/#tailwindcss/jit/src/corePlugins/preflight.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/#tailwindcss/jit/src/corePlugins/index.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/#tailwindcss/jit/src/lib/setupContext.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/#tailwindcss/jit/src/index.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/postcss-loader/dist/utils.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/postcss-loader/dist/index.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/postcss-loader/dist/cjs.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/webpack/lib/ProgressPlugin.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/webpack/lib/SourceMapDevToolPlugin.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/webpack/lib/WebpackOptionsApply.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/webpack/lib/webpack.js
/srv/www/example.test/current/web/app/themes/theme-new/node_modules/webpack/lib/index.js
(#/srv/www/example.test/current/web/app/themes/theme-new/node_modules/tailwindcss/utilities.css)
I build my Next.js app with Bazel.
It works fine, but there is one problem:
When I import styles/globals.css into pages/_app.tsx, Next.js throws this error:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx
Which obviously doesn't make sense.
Reproduction
yarn install
yarn start:bazel (http://localhost:3000, works just fine)
Now uncomment this line
yarn start:bazel (Error while buildling)
Edit 1
After a suggestion by Ulrich Thomas Gabor, it turns out that ctx.customAppFile is null, which might be the root of the problem.
Here is a log output of ctx when building with Bazel:
{
ctx: {
rootDirectory: '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/85/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin',
customAppFile: null,
// ...
}
}
Edit 2
After some more debugging, I found the problem:
This if statement fails because of this error
Error: EACCES: permission denied, access '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/186/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin/pages/_app.tsx'
If I patch Next.js to ignore this error, everything works fine!
But how to prevent the EACCES error?
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
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
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.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.
I have Laravel project and I want to generate css file from scss. My webpack.mix.js file looks like this:
mix.sass('resources/assets/sass/style.scss', 'public/css/style.css');
when I run command npm run dev I have error:
ERROR in ./resources/assets/sass/style.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:14663-14695
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-recommendations.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:17599-17642 7:22181-22224
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
How to add images folder to compilation?
The problem is that mix cannot find the image bg-main.png that you are referring to inside style.scss.
You can either add the mix option not to process css urls as shown here:
mix.options({
processCssUrls: false
});
That has some consequences:
mix will not check for the image's existence.
mix will not automatically copy the image to the public directory.
The better solution is to place the image where mix expects it: mix expects ../images/bg-main.png to be inside directory resources/images/
References:
https://laravel-mix.com/docs/6.0/url-rewriting
https://laravel-mix.com/docs/6.0/faq#why-is-it-saying-that-an-image-in-my-css-file-cant-be-found-in-node_modules
That image files maybe not exist.
It is an incorrect path error, you used ./images/bg-main.png somewhere in your CSS. So locate that instance and change the path thus background-image:url('~/images/bg-main.png');
I'm doing this tutorial, which combines the Ionic CLI with Meteor. Everything was fine until it asked me to install meteor-client-bundler. After adding this to package.json:
"meteor-client:bundle": "meteor-client bundle -s api"
And running the commands:
npm install --save-dev tmp
npm run meteor-client:bundle
A new file called meteor-client.js was added to my node_modules folder (as expected). However, when I try importing it via:
import 'meteor-client';
My app crashes and I get this error:
Uncaught TypeError: Cannot read property 'versions' of undefined
at autoupdate_client.js (meteor-client.js:40130)
at fileEvaluate (meteor-client.js:1535)
at Module.require (meteor-client.js:1438)
at _require (meteor-client.js:1457)
at meteor-client.js:40302
at Object.<anonymous> (meteor-client.js:40308)
at Object.module.exports (vendor.js:146981)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
at Object.478 (main.ts:1)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
The problem appears to be in this line of code:
const autoupdateVersions = __meteor_runtime_config__.autoupdate.versions[clientArch] || {
version: "unknown",
versionRefreshable: "unknown",
versionNonRefreshable: "unknown",
assets: []
};
Where apperently versions is undefined. But the code is extremely long and convoluted, I'm not entirely sure how to go about this.