Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Build fails when using CSS grid-column shorthand syntax

See original GitHub issue

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:

Add offending style to any css file (global or module).
Run next build
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 next@9.4.5-canary.23. 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: https://github.com/Timer/cssnano-preset-simple/issues/6

Issue Analytics

State:
Created 3 years ago
Reactions:9
Comments:8 (5 by maintainers)

Top GitHub Comments

5reactions

Timercommented, Aug 4, 2020

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

3reactions

kush-agracommented, Jul 28, 2020

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

Top Results From Across the Web

grid-column - CSS: Cascading Style Sheets - MDN Web Docs

The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, ...

Why does css grid-column property take multiple values with a ...

grid-columns is a shorthand property for grid-column-start and grid-column-end properties. And both these values can contain one or more ...

CSS grid-column property - W3Schools

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:....

CSS Grid Layout Module Level 1 - W3C

8.4 Placement Shorthands: the grid-column, grid-row, and grid-area ... from [CSS2] using the value definition syntax from [CSS-VALUES-3].

Grid Cheatsheet

Demos for W3C CSS Grid Specification https://www.w3.org/TR/css-grid-1. ... be referred to by their numerical index, named lines can make the grid-placement ...