Styled-jsx: "Syntax Error: Bad character escape sequence" on windows while `npm run dev` for `/u` path pages

[amio]

How to reproduce:

• On Windows 10
• Clone this repo: styled-jsx-u-debug
• npm run dev

if change this line:

color: ${FONT_COLOR};

to

color: blue;

the error is gone.

GUESS:

It looks like a problem with the babel plugin, which get paths on windows like C:\project\pages\user.js, and the \u in the path cause character escaping.

[smiled0g]

I'd like to confirm this problem. It looks like your hypothesis is correct @amio I never encountered any problem until I introduced a file with \u in the path

[giuseppeg]

I don't have a Windows machine, do you guys want to help out / try to fix this ?

[smeijer]

Any workaround other than renaming my /ui dir?

[smeijer]

Looks like angular-meteor had the same issue a while ago. They seem to have it fixed though.

https://github.com/Urigo/angular-meteor/issues/1770

[smeijer]

I've noticed it only impacts files with interpolated dynamic props. Files without dynamic props can still be imported.

[giuseppeg]

@amio can you try without styled-jsx? Maybe it is an issue with Next.js

[smeijer]

@giuseppeg, I'm experiencing the same bug in a Meteor project, and also in the Storybook stories. I'm not using Next.js at all.

[amio]

@giuseppeg I found this from my client's environment, but for now I don't have a windows machine neither 😟

[giuseppeg]

can you upgrade to styled-jsx v3.1.0 and let me know if this is still an issue?

[connorads]

I tried to reproduce the issue on my Windows 10 machine but it worked fine.

• Could be my Windows 10 version is different? Some other difference in environment.
• Could it be that an issue in the dependency tree has been fixed? There's no package-lock.json in repo styled-jsx-u-debug for reproducing the issue. I'm not an expert in npm but feel like this could be why.

Another project fixed this issue by upgrading package with an unknown specific culprit.

• Maybe this issue is fixed already?
• Maybe it would be fixed if the packages were upgraded as per @giuseppeg

[connorads]

Update:
I think we can close this issue.

I found a commit with package-lock.json in there and reproduced the issue.

When running npm install without a package-lock.json a new package-lock.json is created and the issue is no longer there.
So I think it is an issue in the npm dependency tree that has since been fixed.

[giuseppeg]

Thank you a lot for taking a look at this @connorads!!

[aorsten]

Any idea which npm dependency might have caused this, @connorads ?
I'm experiencing the same issue in my NextJS project on Windows 10.

In my case as well, the file is placed in ".../utils/MyFile.js". Changing to ".../test_utils/MyFile.js" fixed it.

[connorads]

Nope sorry @aorsten
I'm guessing you've tried deleting 'package-lock.json' and/or updating your npm packages?

[aorsten]

Yeah, I tried that - but it didn't resolve the issue.

I ended up renaming "/utils" to "/shared_components", and voila. Doesn't really feel satisfying, but at least I could continue.