Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build fails when using CSS grid-column shorthand syntax #15026

Closed
vukers opened this issue Jul 9, 2020 · 8 comments · Fixed by #15848
Closed

Build fails when using CSS grid-column shorthand syntax #15026

vukers opened this issue Jul 9, 2020 · 8 comments · Fixed by #15848
Assignees
@Timer
Milestone
iteration 6

Comments

@vukers
Copy link

vukers commented Jul 9, 2020

Bug report

Describe the bug

next build fails with error:

f.charCodeAt is not a function

if any of the CSS contains the following valid rule:

grid-column: span 2;

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Add offending style to any css file (global or module).
  2. Run next build
  3. See error

Expected behavior

Builds successfully.

System information

  • OS: macOS Catalina 10.15.5
  • Version of Next.js: 9.4.5-canary.30
  • Version of Node.js: 12.16.1

Additional context

This was working up to [email protected]. The version after replaced an import of cssnano-simple from a local version to a npm published version. I have added additional details as an issue on that repository: Timer/cssnano-preset-simple#6
@Timer Timer self-assigned this Jul 9, 2020
@Timer Timer added the kind: bug label Jul 9, 2020
@Timer Timer modified the milestones: iteration 4, iteration 5 Jul 9, 2020
@4cm4k1
Copy link
Contributor

4cm4k1 commented Jul 22, 2020 •
edited
Loading

Hey there, just adding a note here that I commented on @vukers' issue on the other repo, and I have an additional repro here. Thanks!

@Timer Timer modified the milestones: iteration 5, 9.x.x Jul 24, 2020
@kush-agra
Copy link

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it

I had columns: 2 auto; in my css removing which fixed it

@Timer Timer modified the milestones: 9.x.x, iteration 6 Jul 28, 2020
@4cm4k1 4cm4k1 mentioned this issue Jul 29, 2020
Closed
@barinali
Copy link

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it

I had columns: 2 auto; in my css removing which fixed it

I think you can refactor columns: 2 auto; with the following;

column-count: 2;
column-width: auto;

This is at least how I have resolved the same problem on my side.

@kush-agra
Copy link

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it
I had columns: 2 auto; in my css removing which fixed it

I think you can refactor columns: 2 auto; with the following;

column-count: 2;
column-width: auto;

This is at least how I have resolved the same problem on my side.

Welp that does indeed fix it, weird
Thanks

nicholaschiang added a commit to tutorbookapp/tutorbook that referenced this issue Jul 31, 2020
@nicholaschiang
fix: migrate to Yarn v2 and fix build errors
77151a5 
Uses the temporary fix proposed by @4cm4k1 in vercel/next.js#15026,
Timer/cssnano-preset-simple#6, and cssnano/cssnano#927.

Also temporarily fixes Sass module resolution by using the Yarn v2
nodeLinker option (until it's fixed upstream; see vercel/next.js#15753).
@nicholaschiang

This comment has been minimized.

Sign in to view
@justincy

This comment has been minimized.

Sign in to view
@Timer Timer added the point: 2 label Aug 4, 2020
@Timer Timer mentioned this issue Aug 4, 2020
Merged
@Timer
Copy link
Member

Timer commented Aug 4, 2020

This is fixed in next@^9.5.2-canary.3 or newer!

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Timer Timer

Labels
None yet
Projects
None yet
Milestone
iteration 6
Development

Successfully merging a pull request may close this issue.

Fix CSS grid-column shorthand syntax Timer/next.js
8 participants
@Timer @vukers @justincy @barinali @kush-agra @4cm4k1 @balazsorban44 @nicholaschiang