I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.
Related
Situation:
I am trying to use bootstrap 4 stylesheet with NextJS. The bootstrap 4 stylesheet (which is complied from SASS) has many codes like:
.checkbox.checkbox-accent > span {
border-width: !important;
}
which breaks the production build of NextJS, i.e. when issue yarn build I get the following error:
yarn run v1.22.4
$ next build
info - Creating an optimized production build
Failed to compile.
TypeError: Cannot read property 'toLowerCase' of undefined
> Build error occurred
Error: > Build failed because of webpack errors
at /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/index.js:441:19
at async /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.
However when I add a value before the !important in CSS the build problem is gone, e.g:
.checkbox.checkbox-accent > span {
border-width: unset !important;
}
Question:
What does !important without a value mean and is it a valid CSS piece of code? Or is it a problem with SASS compilation? Or it is something with webpack compiler used by NextJS?
Notes:
yarn dev works fine
"dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
NodeJS version: v12.18.2
Platform: WSL2 on Windows 10
I tested !important in a sass file(in vs code) without any property value and it yelled at me:
property value expectedscss(css-propertyvalueexpected)
So, it hasn't any special meaning. I think there may be a problem in your code before compilation that generates this line of code.
I think you’re missing variables.
Check what the original SASS is. It’s probably something like:
border-width: $border-width !important;
But your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)
Calling tsickle with
tsickle --externs=target/externs.js -- -p target/src
I get this error:
Error No inputs were found in config file 'target/src/tsconfig.json'. Specified 'include' paths were '["./my/pathes/**/*.ts"]' and 'exclude' paths were '["some/other/thing"]'.
Why? Considering that tsickle is only a wrapper around tsc, if I do an equivalent tsc call, it happens without any problem. Something must go bad in the tsickle-tsc interaction, but what?
According to this Github issue, there is some incompatibility between tsickle and the typescript.
The probable reason can be that neither side want to admit that it is their mistake, thus none of them wants to fix it.
The solution is this: either the tsconfig.json given to the tsickle should have an absolute path, or the include: in this tsconfig.json should use an absolute path.
Considering that the .json format is not a very configurable thing (for example, you simply can't give an include: [ __dirname + '/my/lib/**.ts' ] setting in it), the probably better option is to simply give an absolute path to the tsickle.
In my case, I simply extended an arguments: ['-p', 'src/tsconfig.json'] in my Gruntfile to arguments: ['-p', __dirname + 'src/tsconfig.json']. If you use a different build tool, your actual solution my differ from it, but it is the important part.
I'm getting the following error when trying to use Sass Maps (which look like object variables):
Invalid CSS after " primary": expected ")", was ": #3097D1,"
(in /Users/.../app/assets/stylesheets/new_design.scss:19)
I reproduced the error by using the following minimal example:
$theme-colors: (
primary: #3097D1,
secondary: black
);
#each $key, $val in $theme-colors {
.foo.#{$key} {
color: $val;
}
}
Expected:
.foo.primary {
color: #3097D1;
}
.foo.secondary {
color: black;
}
But getting the error mentioned.
sass-rails, ~> 5.0.0 seems to be installed according to the Gemfile:
gem 'sass-rails', '~> 5.0.0'
I'd assume that loads one of the latest sass versions which should support object variables.
I have the feeling the current version I have is not recognizing this syntax.
How can I make sure I have the right sass version? Is there anything else I have to do to compile this syntax successfully?
bundle show sass-rails shows 5.0.6, which seems recent.
as discussed in the comments there is a stackoverflow discussion about a similar issue with the map sass syntax
The discussion refers to Github Issue 1088
I quote
There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.
I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:
indented_vs_bracketed
It's also much easier to do copy-pasting.
So Sass maintainers, PLEASE don't let the indented syntax fall behind!
Probably by digging down in the discussion we will be able to find the solution. Now I am quoting the solution from the owner of the post Ionică Bizău:
wrapping the values between quotes, saving, reloading in browser without any errors, and then removing the quotes back and reloading the page in browser solved the problem. Maybe it was something cached somewhere... but I can't understand where. I didn't restart rake or ran any bundle command... Thanks! :)
I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.
I have twitter bootstrap setup to build in a new project, but am getting the following error from VS2010.
Fatal error, cannot continue: Octal escape sequences are only supported in ECMAScript 3 compatibility mode.
Which seems to be related to the following CSS/Less entry in bootstrap (type.less)...
blockquote small:before {
content: '\2014 \00A0';
}
Can anyone help?
Just wanted to say that I had this error too, and the problem for me ended up being with Chirpy. I tried to make a merged css file with it, but i was using .min files and i didn't use the chripy Minify="false" parameter in my File node. Added that parameter and that fixed it right up