V3 with Gatsby failing

[SpicyPete]

💥 Regression Report

I have updated xStyled to V3 in one of my Gatsby projects, went through the migration guide, and Gatsby is no longer building.
Downgrading to xStyled V2.5 fixes the build.

Last working version

Worked up to version: 2.5 Stopped working in version: 3.0

To Reproduce

Create a Gatsby project with xStyled v3.
The project this is in is fairly complex, unsure if it fails in a minimal Gatsby setup, can add more details later.

Opening issue for visibility. Not sure if this is an issue with Gatsby or xStyled, but it occurs after upgrading this package so I'm opening it here.

Error in terminal, within /public/render-page.js.

112 |   var searchIndex = initialPath.indexOf("?");
113 |   var initialLocation = {
114 |     pathname: searchIndex > -1 ? initialPath.substr(0, searchIndex) :
initialPath,
      | ^
115 |     search: searchIndex > -1 ? initialPath.substr(searchIndex) : ""
116 |   };
117 |   var index = 0;

Expected behavior

gatsby develop and gatsby build complete without errors.

npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components,gatsby --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.2.3
 - CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
 - Memory: 276.07 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
 - Yarn: 1.22.5 - ~/.yarn/bin/yarn
 - npm: 6.14.6 - ~/.nvm/versions/node/v12.16.1/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^3.0.0 => 3.0.0 
 - gatsby: ^3.6.0 => 3.6.0 
 - styled-components: ^5.3.0 => 5.3.0 

Loving this library, currently my favorite css-in-js library.

[tthsympa]

Same problems here. I succeeded on launching xstyled V3 by playing with the packages on the node_modules. Changes I made are:

• In node_modules/@xstyled/system/dist/index.js, there is seems to be a problem with the optional chaining syntax ?.. To fix, replace line 336 and 1214 by

  const rootFontSize = props && props.theme && props.theme.settings && props.theme.settings.rootFontSize ? 
  props.theme.settings.rootFontSize : void 0;

• In node_modules/@xstyled/core/package.json, replace "module": "dist/index.mjs" by "module": "dist/index.js"

After those changes, gatsby develop|build seems ok and you can start to fix the BR changes

## System:
 - OS: macOS 10.15.7
 - CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
 - Memory: 4.28 GB / 16.00 GB
 - Shell: 5.7.1 - /bin/zsh
## Binaries:
 - Node: 15.5.0 - /usr/local/bin/node
 - Yarn: 1.22.10 - /usr/local/bin/yarn
 - npm: 7.3.0 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^3.0.0 => 3.0.0 
 - gatsby: ^2.32.13 => 2.32.13 
 - styled-components: ^5.3.0 => 5.3.0 

[agriffis]

@gregberge I know almost nothing about esbuild, so I might be completely on the wrong track, but I tried this change and it seemed to transform the optional chaining:

diff --git a/build/rollup.config.js b/build/rollup.config.js
index 895ce03..203d0e8 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -14,9 +14,13 @@ const bundle = (config) => ({
   external: (id) => !/^[./]/.test(id),
 })

+const esbuildConfig = {
+  target: 'es2015',
+}
+
 export default [
   bundle({
-    plugins: [esbuild()],
+    plugins: [esbuild(esbuildConfig)],
     output: [
       {
         file: `${name}.js`,
@@ -31,7 +35,10 @@ export default [
     ],
   }),
   bundle({
-    plugins: [esbuild({ minify: true })],
+    plugins: [esbuild({
+      ...esbuildConfig,
+      minify: true,
+    })],
     output: [
       {
         file: `${name}.min.mjs`,

Now the rootFontSize line is

    const rootFontSize = (_c = (_b = (_a = props == null ? void 0 : props.theme) == null ? void 0 : _a.settings) == null ? void 0 : _b.rootFontSize) != null ? _c : void 0;

References:

• JS targets at https://esbuild.github.io/content-types/#javascript
• configuration of rollup-plugin-esbuild at https://github.com/egoist/rollup-plugin-esbuild

[gregberge]

Should be fixed in v3.0.1.