EDGE/IE error SCRIPT1028: Expected identifier, string or number

[imtase]

error SCRIPT1028: Expected identifier, string or number

idb package: "^5.0.1"

Angular CLI: 9.0.6
Node: 12.16.1
OS: linux x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cdk                      9.1.2
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.1.2
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Error only with EDGE/IE (included latest version). It is necessary to deactivate the code below to avoid the error.

 this.iDB = await openDB(environment.idb, 1, {
   upgrade(db) {
      db.createObjectStore('piece');
      db.createObjectStore('lines');
    }
 });

[jakearchibald]

Can you create a minimal reproduction of the issue?

[imtase]

easy:

Make new angular project

ng new idbTEST

ng serve and test with EDGE & IE => Working

Add idb package

npm install --save idb

app.component.ts

import { Component } from '@angular/core';

/* IndexedDB */
import { openDB } from 'idb';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'idbTEST';

  public iDB;

    /**************************
   *      IndexedDB         *
   **************************/

  private async connectIDB() {
    if (window.indexedDB) {
      this.iDB = await openDB('idbTest', 1, {
        upgrade(db) {
           db.createObjectStore('piece');
           db.createObjectStore('lines');
         }
      });
      console.log(`%c Core indexedDB => Connected `, 'background: green; color: white; display: block;');
    }
  }

  constructor(
  ) {
   this.connectIDB();
  }
}

ng serve and test with EDGE & IE => Error

[kraxner]

I have the same problem in a VueJS project, transpilation via Babel was missing. to activate it for idb I have added in vue.config.js:

module.exports = {
  ..
  ,transpileDependencies: ['idb']

after this I get with IE11 error SCRIPT5009: 'Proxy' is undefined in wrap-idb-value.js:160

    if (instanceOfAny(value, getIdbProxyableTypes()))
        return new Proxy(value, idbProxyTraps);

There is a proxy polyfill, proxy-polyfill , but it "only covers a limited number of proxy 'traps' " - simply adding it does not solve the problem, probably adjustments in idb would be necessary.

(The javascript engine of Edge supports Proxy. MDN: Proxy )

Probably there are more problems ahead.

[jakearchibald]

IE11 is not supported. If you need IE11 support, see v3.x https://github.com/jakearchibald/idb/tree/v3.0.2 (note that the API is pretty different.

[kraxner]

thanks @jakearchibald, and sorry, it is even mentioned in the change-notes for version 4. @imtase, so for Edge you could activate transpilation of idb, #152 could be of interest as well

[jakearchibald]

and sorry, it is even mentioned in the change-notes for version 4.

Yeah, but that's not a great place for that information. I should have some sort of statement around browser support in the main readme, along with the expectation that folks transpile for their target browsers.

[Schuer84]

I'm having the same issue in edge. Even with babel transpile on (as mentioned above)

  `  rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules\/(?![idb])/,
    loaders: [ {
      loader: "babel-loader",

    }]
  },
  {
    test: /(expose\.js)$/,
    exclude: /node_modules\/(?![idb])/,
    loaders: ["expose-loader?Components", {
      loader: "babel-loader"
    }]
  },
  `

Any other workarounds for this?

[jcgiuffrida]

@Schuer84 Your solution worked for me, except you need to take the idb out of the brackets:

{
        test: /\.js$/,
        exclude: /node_modules\/(?!idb)/,
        use: {
          loader: 'babel-loader',
        },
      },

Within the brackets it excludes any module with any of those characters, which includes idb itself.

[Schuer84]

@lucaluca I'm still getting the error even without the brackets. Looks like i'm missing some transpilers. { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", "@babel/plugin-transform-spread"] } can you share your .babelrc for a sec?

[jcgiuffrida]

I'm only using @babel/preset-env. My module.rules:

      {
        test: /\.js$/,
        exclude: /node_modules\/(?!idb)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env']],
          },
        },
      },

In regex putting characters inside square brackets lets you match any of those characters, whereas you want to match the full string "idb". So you'll need to remove the brackets anyway.

[sameerinfodb]

@imtase @jakearchibald do we have any solution for this problem, even im facing same issue. I don't use babel transpiler therefore, looking for the solutions without babel transpiler.

[jakearchibald]

https://github.com/jakearchibald/idb/issues/162#issuecomment-604321563 is the solution.

[sameerinfodb]

@jakearchibald I'm looking for MS Edge related solution not the IE11 browser related issue.

I have created a stackblitz project as experimental project to resolve this issue. Here is is the link https://stackblitz.com/edit/angular-with-idb

Can you please suggest the issue , this works fine in the chrome . Only in MS Edge i have this issue.

[jakearchibald]

You will need to use a transpiler if you want it to work in old Edge. It should work in modern Edge just fine.

[sameerinfodb]

@jakearchibald How do i add the transpiler only for idb package in the angular project built with Angular cli. Any reference or fix in stackblitz project mention above will be great help. Thank you.

[jakearchibald]

Unfortunately I'm deep in deadlines right now, so I don't have time to look at this right now. However, you'll probably have more luck asking someone familiar with Angular & it's build system.

[sameerinfodb]

no problem @jakearchibald carry on with your work. I will try to figure out the solution. if you manage to get some time later , you can do the needful. if i get the solution, i will posted it here. So that someone who is facing same issue, can get help.

[sameerinfodb]

@lucaluca can you post the solution that you mentioned above over stackblitz.com. it will be good reference.

[jcgiuffrida]

@sameerinfodb Sorry, I can't debug your build stack. My solution is only to transpile the dependency in webpack and has nothing to do with this library itself. The author has been very clear that IE11 and Edge are not supported without transpiling, which would be specific to your build stack.

[jakearchibald]

I've added a statement of browser support https://github.com/jakearchibald/idb#browser-support