Object spread operator in package code throws "Unexpected token" error when run in apps built with create-react-app

[DaemonAlchemist]

Impacted package

• solid-client-authn-browser
• solid-client-authn-core
• oidc-client-ext
• jose-legacy-modules

Bug description

When imported into an application created via the standard create-react-app workflow, "Unexpected token" errors are thrown due to the presence of object spread operators in the compiled modules' code.

To Reproduce

1. Clone the repo: https://github.com/daemonalchemist/react-starter-app
2. Checkout the solid-authn-object-spread-bug branch
3. npm install
4. npm start

Expected result

The app should start with no errors

Actual result

A compile error is thrown about an "Unexpected token" in the solid-client-authn-core package.

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
    Memory: 15.57 GB / 31.96 GB
  Binaries:
    Node: 15.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.7.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1023.0), Chromium (96.0.1054.29)    
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @inrupt/solid-client-authn-browser: ^1.11.2 => 1.11.2
    @types/jest: ^23.3.10 => 23.3.10
    @types/node: ^16.11.9 => 16.11.9
    @types/react: ^17.0.36 => 17.0.36
    @types/react-dom: ^17.0.11 => 17.0.11
    autoprefixer: 7.1.6 => 7.1.6
    babel-jest: 20.0.3 => 20.0.3
    babel-loader: 7.1.2 => 7.1.2
    babel-preset-react-app: ^3.1.2 => 3.1.2
    case-sensitive-paths-webpack-plugin: 2.1.1 => 2.1.1
    chalk: 1.1.3 => 1.1.3
    css-loader: 0.28.7 => 0.28.7
    dotenv: 4.0.0 => 4.0.0
    dotenv-expand: 4.2.0 => 4.2.0
    extract-text-webpack-plugin: 3.0.2 => 3.0.2
    file-loader: 1.1.5 => 1.1.5
    fork-ts-checker-webpack-plugin: ^0.2.8 => 0.2.10
    fs-extra: 3.0.1 => 3.0.1
    html-webpack-plugin: 2.29.0 => 2.29.0
    hygen: ^5.0.3 => 5.0.3
    jest: 20.0.4 => 20.0.4
    less: ^3.9.0 => 3.9.0
    less-loader: ^4.1.0 => 4.1.0
    object-assign: 4.1.1 => 4.1.1
    postcss-flexbugs-fixes: 3.2.0 => 3.2.0
    postcss-loader: 2.0.8 => 2.0.8
    promise: 8.0.1 => 8.0.1
    raf: 3.4.0 => 3.4.0
    react: ^17.0.2 => 17.0.2
    react-dev-utils: ^5.0.2 => 5.0.3
    react-dom: ^17.0.2 => 17.0.2
    react-router: ^6.0.2 => 6.0.2
    react-router-dom: ^6.0.2 => 6.0.2
    resolve: 1.6.0 => 1.6.0
    source-map-loader: ^0.2.1 => 0.2.4
    style-loader: 0.19.0 => 0.19.0
    sw-precache-webpack-plugin: 0.11.4 => 0.11.4
    ts-jest: 22.0.1 => 22.0.1
    ts-loader: ^2.3.7 => 2.3.7
    tsconfig-paths-webpack-plugin: ^2.0.0 => 2.0.0
    tslint: ^5.7.0 => 5.12.0
    tslint-config-prettier: ^1.10.0 => 1.17.0
    tslint-react: ^3.2.0 => 3.6.0
    typescript: ^4.5.2 => 4.5.2
    uglifyjs-webpack-plugin: 1.2.5 => 1.2.5
    unstateless: ^0.14.1 => 0.14.1
    url-loader: 0.6.2 => 0.6.2
    webpack: 3.8.1 => 3.8.1
    webpack-dev-server: 2.11.3 => 2.11.3
    webpack-manifest-plugin: 1.3.2 => 1.3.2
    whatwg-fetch: 2.0.3 => 2.0.3
  npmGlobalPackages:
    aws-cli: 0.0.2
    aws: 0.0.3-2
    create-react-app: 4.0.3
    eslint: 8.2.0
    hygen: 6.0.4
    knex: 0.95.10
    serverless: 2.52.1
    yarn: 1.22.11

[nicolasmondada]

Hi @DaemonAlchemist ,

Thanks for reporting this! We'll have a look and will keep you posted.

Cheers, Nicolas.-

[ThisIsMissEm]

Hi @DaemonAlchemist,

I've looked into this with a create-react-app using typescript template, and also at your configuration, and it looks like you're currently expecting the source code of your application to be ES7 / ES2016, but rest/spread was added in ES2018.

It's worth noting that create-react-app with typescript now uses esnext as the source code environment, below you can find the tsconfig.json from a freshly created application with create-react-app. Try updating your tsconfig.json to be similar/match (you also shouldn't need a tsconfig.prod.json either)

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[DaemonAlchemist]

Hi @ThisIsMissEm

Thanks for looking into this. I've already tried various tweaks to the tsconfig.json file. I just tried your suggested config, and received the same error.

[ThisIsMissEm]

@DaemonAlchemist I'm afraid your application is severely outdated with its dependencies and webpack configuration; I would suggest upgrading that.

$ npm outdated
Package                              Current   Wanted  Latest  Location                                          Depended by
@types/jest                           27.0.3  23.3.14  27.0.3  node_modules/@types/jest                          react-starter-app
autoprefixer                           7.1.6    7.1.6  10.4.0  node_modules/autoprefixer                         react-starter-app
babel-jest                            27.3.1   20.0.3  27.3.1  node_modules/babel-jest                           react-starter-app
babel-loader                           7.1.2    7.1.2   8.2.3  node_modules/babel-loader                         react-starter-app
babel-preset-react-app                 3.1.2    3.1.2  10.0.0  node_modules/babel-preset-react-app               react-starter-app
case-sensitive-paths-webpack-plugin    2.1.1    2.1.1   2.4.0  node_modules/case-sensitive-paths-webpack-plugin  react-starter-app
chalk                                  1.1.3    1.1.3   4.1.2  node_modules/chalk                                react-starter-app
css-loader                            0.28.7   0.28.7   6.5.1  node_modules/css-loader                           react-starter-app
dotenv                                 4.0.0    4.0.0  10.0.0  node_modules/dotenv                               react-starter-app
dotenv-expand                          4.2.0    4.2.0   5.1.0  node_modules/dotenv-expand                        react-starter-app
file-loader                            1.1.5    1.1.5   6.2.0  node_modules/file-loader                          react-starter-app
fork-ts-checker-webpack-plugin         6.4.2   0.2.10   6.4.2  node_modules/fork-ts-checker-webpack-plugin       react-starter-app
fs-extra                               3.0.1    3.0.1  10.0.0  node_modules/fs-extra                             react-starter-app
html-webpack-plugin                    5.5.0   2.29.0   5.5.0  node_modules/html-webpack-plugin                  react-starter-app
hygen                                  5.0.3    5.0.3   6.1.0  node_modules/hygen                                react-starter-app
jest                                  27.3.1   20.0.4  27.3.1  node_modules/jest                                 react-starter-app
less                                   3.9.0   3.13.1   4.1.2  node_modules/less                                 react-starter-app
less-loader                            4.1.0    4.1.0  10.2.0  node_modules/less-loader                          react-starter-app
postcss-flexbugs-fixes                 3.2.0    3.2.0   5.0.2  node_modules/postcss-flexbugs-fixes               react-starter-app
postcss-loader                         2.0.8    2.0.8   6.2.0  node_modules/postcss-loader                       react-starter-app
promise                                8.0.1    8.0.1   8.1.0  node_modules/promise                              react-starter-app
raf                                    3.4.0    3.4.0   3.4.1  node_modules/raf                                  react-starter-app
react-dev-utils                       11.0.4    5.0.3  11.0.4  node_modules/react-dev-utils                      react-starter-app
resolve                               1.20.0    1.6.0  1.20.0  node_modules/resolve                              react-starter-app
source-map-loader                      0.2.4    0.2.4   3.0.0  node_modules/source-map-loader                    react-starter-app
style-loader                          0.19.0   0.19.0   3.3.1  node_modules/style-loader                         react-starter-app
sw-precache-webpack-plugin            0.11.4   0.11.4   1.0.0  node_modules/sw-precache-webpack-plugin           react-starter-app
ts-jest                               27.0.7   22.0.1  27.0.7  node_modules/ts-jest                              react-starter-app
ts-loader                              9.2.6    2.3.7   9.2.6  node_modules/ts-loader                            react-starter-app
tsconfig-paths-webpack-plugin          3.5.2    2.0.0   3.5.2  node_modules/tsconfig-paths-webpack-plugin        react-starter-app
tslint                                 6.1.3   5.20.1   6.1.3  node_modules/tslint                               react-starter-app
tslint-react                           5.0.0    3.6.0   5.0.0  node_modules/tslint-react                         react-starter-app
uglifyjs-webpack-plugin                1.2.5    1.2.5   2.2.0  node_modules/uglifyjs-webpack-plugin              react-starter-app
url-loader                             0.6.2    0.6.2   4.1.1  node_modules/url-loader                           react-starter-app
webpack                               5.64.2    3.8.1  5.64.2  node_modules/webpack                              react-starter-app
webpack-dev-server                     4.5.0   2.11.3   4.5.0  node_modules/webpack-dev-server                   react-starter-app
webpack-manifest-plugin                4.0.2    1.3.2   4.0.2  node_modules/webpack-manifest-plugin              react-starter-app
whatwg-fetch                           2.0.3    2.0.3   3.6.2  node_modules/whatwg-fetch                         react-starter-app

I would guess that something is causing your tsconfig to not be applied correctly. You may even want to recreate on top of create-react-app again, as it looks like you're using some sort of ejected configuration.

I've tested importing the libraries in a freshly created create-react-app with typescript project, and everything works as expected.

[DaemonAlchemist]

@ThisIsMissEm Thank you for the help! Rebuilding my starter app from scratch does appear to solve the issue. Now I just need to port my old Solid app into the new framework. :)

However, I would still recommend updating the Solid libraries to emit more compatible code when building. Other app developers may not have the ability to easily update their app's dependencies.

[ThisIsMissEm]

@DaemonAlchemist I'm going to close this as your issue has been resolved, however, as a note, we're beginning to move towards only emitting more modern JS (we're in the process of switching targets to ES2018, which has better async/await support and dramatically decreases our build sizes).

We understand that this can cause build issues that are frustrating, I'll see if we can get some documentation written to at least inform developers that the SDKs are built with a given ECMAScript version (ES2018), in general, webpack and related tools should just handle this fine, as long as you indicate that your source code is ES2018, and not ES2017 or below, like ES5 or ES6.

Keep in mind that the latest ECMAScript is now at like ES2022, and constantly progressing with more and more language features that are quickly and widely supported by the latest 2 versions of major web browsers. Using ES2018 is in line with what other major projects in the javascript ecosystem are doing, and as SDK developers, it's not nice to penalise modern javascript users with code cross-compiled to a much older target (ES2015 is, well, seven years old now, almost eight, javascript has changed a lot in that time).