Syntax Error: Invalid character escape sequence: \. graphql/template-strings

[kapral18]

Description

export const query = graphql`
	query {
		file(relativePath: { regex: "/whatever\\\.png/" }) {
			childImageSharp {
				fixed(width: 50) {
					...GatsbyImageSharpFixed
				}
			}
		}
	}
`;

after executing produces the error in title

Steps to reproduce

1. put the query in index.js
2. gatsby develop
3. get the error

Expected result

Should not error out and should find the image node

Actual result

errors out

Also tried \\\\ no success (since as far as I understand
new RegExp(\\\\.) will produce actual regexp literal like this /\\./
which is not what we need

Environment

System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Shell: 5.0.0 - /usr/local/bin/bash
Binaries:
Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - ~/.nvm/versions/node/v10.14.2/bin/npm
Languages:
Python: 2.7.15 - /usr/local/bin/python
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.76 => 2.0.83
gatsby-image: ^2.0.26 => 2.0.26
gatsby-plugin-emotion: ^4.0.1 => 4.0.1
gatsby-plugin-manifest: ^2.0.13 => 2.0.13
gatsby-plugin-offline: ^2.0.21 => 2.0.21
gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5
gatsby-plugin-sharp: ^2.0.17 => 2.0.17
gatsby-plugin-typography: ^2.2.4 => 2.2.4
gatsby-source-filesystem: ^2.0.12 => 2.0.12
gatsby-transformer-remark: ^2.1.19 => 2.1.19
gatsby-transformer-sharp: ^2.1.10 => 2.1.10
npmGlobalPackages:
gatsby-cli: 2.4.8

[stefanprobst]

See #9944 (comment)

[kapral18]

@stefanprobst Doesn't work. I pointed that out in the 'actual result' part.

[sidharthachatterjee]

Hey @kapral18

Try

query {
  file(relativePath: {
    regex: "gatsby\\.png/ig"
  }) {
    relativePath
  }
}

This works for me!

[kapral18]

@sidharthachatterjee nopes the same

[sidharthachatterjee]

@kapral18 Can you post a simplified reproduction please? Let's get to the bottom of this!

[kapral18]

@sidharthachatterjee https://github.com/kapral18/gatsby-test

[kapral18]

[stefanprobst]

@kapral18 Can you check if the above works for you?

[sidharthachatterjee]

@kapral18 Looks like regex: "/whatever.png/" works!

We use sift under the hood which implements
MongoDB style PCRE regular expressions

https://docs.mongodb.com/manual/reference/operator/query/regex/#op._S_regex

According to https://stackoverflow.com/a/400316

For PCRE, and most other so-called Perl-compatible flavors, escape these outside character classes:

.^$*+?()[{|
and these inside character classes:

^-]\

So it makes sense that . doesn't need to be escaped in this case

[kapral18]

@sidharthachatterjee well the . is in the quoted list of yours.

try regex: "/whateve..png/" will still find the whatever.png, I need the strict detection

[sidharthachatterjee]

well the . is in the quoted list of yours.

If I understand it correctly (please correct me if I am wrong!) the list mentions that . doesn't need to be escaped inside character classes

[kapral18]

@sidharthachatterjee I know that /whatever.png/ matches the dot and any other character, and I know that you shouldn't escape the dot character itself, if you intend to have any character, but I intended to match specifically the . not just any character.

The article you mentioned clearly states that if you want the symbol and not the character class, you SHOULD escape it, which was my initial intent with all these character escaping trials.

[sidharthachatterjee]

Ah, I understand now @kapral18

How about regex: "/whatever[.]png/"?

[kapral18]

@sidharthachatterjee ye that was the one I initially tried and it obviously works, but I doubt character set is good solution for this problem, since its purpose is different. So the problem is still open.

[kapral18]

@stefanprobst could you explain how can I test this patch? Unfortunately my build of gatsby is blowing up. I guess just changing the dist/utils/prepare-regex.js is not enough?