TS 3.8 private fields breaks build -- update to Rollup v2.4.0+

[yangwao]

What happens and why it is wrong

When I've upgraded code to use private fields, at build I get
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)

Learn more here

• https://www.typescriptlang.org/docs/handbook/classes.html#ecmascript-private-fields
• https://github.com/tc39/proposal-class-fields/#private-fields

It just doesn't know '#', like there is no support for that?
I'm just curious, otherwise, I would receive some error.
Heads up and thanks for any hint or suggestion!

Environment

typescript 3.8.3,
tslint 5.20.1

Versions

• typescript: 3.8.3
• rollup: 2.1.0
• rollup-plugin-typescript2: 0.26.0

rollup.config.js

import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };
export default {


  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    typescript({
      tsconfigDefaults: defaults,
      tsconfig: "tsconfig.json",
      tsconfigOverride: override
    })
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "importHelpers": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "index.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],

}

package.json

{
  "name": "@vue-polkadot/vue-keyring",
  "version": "2.0.0",
  "author": "Matej Nemcek <ybdaba@gmail.com>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-bundle": "vue-cli-service build --target lib --name vue-keyring ./src/index.ts",
    "build:rollup": "rollup -c",
    "build:rollup:watch": "rollup -cw"
  },
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js",
    "*.ts"
  ],
  "repository": "https://github.com:vue-polkadot/vue-ui.git",
  "maintainers": [
    "Matej Nemcek <ybdaba@gmail.com>"
  ],
  "license": "MIT",
  "dependencies": {
    "@polkadot/keyring": "^2.6.2",
    "@polkadot/types": "^1.7.1",
    "@polkadot/util": "^2.6.2",
    "@polkadot/util-crypto": "^2.2.2",
    "@types/store": "^2.0.2",
    "@types/webpack-env": "^1.14.0",
    "@vue-polkadot/vue-settings": "0.0.11",
    "core-js": "^2.6.5",
    "mkdirp": "^1.0.3",
    "rxjs": "^6.5.2",
    "store": "^2.0.12",
    "tslib": "1.11.1",
    "tslint": "^6.1.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-styled-components": "^1.4.9"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-typescript": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "rollup": "^2.1.0",
    "rollup-plugin-typescript2": "^0.26.0",
    "typescript": "^3.8.3",
    "vue-template-compiler": "^2.6.10"
  }
}

plugin output with verbosity 3

log

❯ yarn build:rollup
yarn run v1.22.4
$ rollup -c

src/index.ts → dist/index.js, dist/index.es.js...
rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true
}
rpt2: parsed tsconfig: {
    "options": {
        "declaration": false,
        "target": 99,
        "module": 99,
        "strict": true,
        "jsx": 1,
        "outDir": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/placeholder",
        "importHelpers": true,
        "noImplicitAny": true,
        "moduleResolution": 2,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring",
        "skipLibCheck": true,
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "lib.esnext.d.ts",
            "lib.dom.d.ts",
            "lib.dom.iterable.d.ts",
            "lib.scripthost.d.ts"
        ],
        "configFilePath": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/tsconfig.json",
        "noEmitHelpers": false,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "allowNonTsExtensions": true
    },
    "fileNames": [
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/defaults.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/main.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-tsx.d.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-vue.d.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/accounts.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/addresses.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/contracts.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/development.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/genericSubject.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/observable/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/index.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/types.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/stores/Browser.ts",
        "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/options/item.tsx"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "declaration": false,
            "target": "esnext",
            "module": "esnext",
            "strict": true,
            "jsx": "preserve",
            "declarationDir": "./dist",
            "outDir": "./dist",
            "importHelpers": true,
            "noImplicitAny": true,
            "moduleResolution": "node",
            "experimentalDecorators": true,
            "esModuleInterop": true,
            "allowSyntheticDefaultImports": true,
            "sourceMap": true,
            "baseUrl": ".",
            "skipLibCheck": true,
            "paths": {
                "@/*": [
                    "src/*"
                ]
            },
            "lib": [
                "esnext",
                "dom",
                "dom.iterable",
                "scripthost"
            ]
        },
        "include": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "exclude": [
            "node_modules"
        ],
        "compileOnSave": false
    },
    "errors": [],
    "wildcardDirectories": {
        "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/src": 1,
        "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/tests": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "excludeSpecs": [
            "node_modules"
        ],
        "validatedIncludeSpecs": [
            "index.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "tests/**/*.ts",
            "tests/**/*.tsx"
        ],
        "validatedExcludeSpecs": [
            "node_modules"
        ],
        "wildcardDirectories": {
            "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/src": 1,
            "/users/wao/projects/vuepolkadot/vue-ui/packages/vue-keyring/tests": 1
        }
    }
}
rpt2: typescript version: 3.8.3
rpt2: tslib version: 1.10.0
rpt2: rollup version: 2.1.0
rpt2: rollup-plugin-typescript2 version: 0.26.0
rpt2: plugin options:
{
    "tsconfigDefaults": {
        "compilerOptions": {
            "declaration": true
        }
    },
    "tsconfig": "tsconfig.json",
    "tsconfigOverride": {
        "compilerOptions": {
            "declaration": false
        }
    },
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "transformers": [],
    "objectHashIgnoreUnknownHack": false,
    "cwd": "/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring",
    "typescript": "version 3.8.3"
}
rpt2: rollup config:
{
    "experimentalCacheExpiry": 10,
    "external": [
        "@polkadot/keyring",
        "@polkadot/types",
        "@polkadot/util",
        "@polkadot/util-crypto",
        "@types/store",
        "@types/webpack-env",
        "@vue-polkadot/vue-settings",
        "core-js",
        "mkdirp",
        "rxjs",
        "store",
        "tslib",
        "tslint",
        "vue",
        "vue-class-component",
        "vue-property-decorator",
        "vue-styled-components"
    ],
    "inlineDynamicImports": false,
    "input": "src/index.ts",
    "perf": false,
    "plugins": [
        {
            "name": "rpt2"
        },
        {
            "name": "stdin"
        }
    ],
    "strictDeprecations": false
}
rpt2: tsconfig path: /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
rpt2: Ambient types:
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-tsx.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/shims-vue.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/bn.js/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/color-name/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/events/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/glob/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/minimatch/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/node/ts3.2/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/normalize-package-data/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/q/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/store/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/webpack-env/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/events/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/glob/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/minimatch/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/node/ts3.2/index.d.ts
rpt2:     /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/@types/q/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/code/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/syntacticDiagnostics/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/semanticDiagnostics/cache/2e74b8aa9cf50ce50dc9c899dfd096c9e3ddef66'
rpt2:     cache miss
rpt2: dependency '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2:     imported by '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2: resolving './Keyring' imported by '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/index.ts'
rpt2:     to '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2: transpiling '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/src/Keyring.ts'
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/code/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/syntacticDiagnostics/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
rpt2:     cache: '/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/.cache/rollup-plugin-typescript2/rpt2_1526ef49297d2998997b39723d787862a1856de8/semanticDiagnostics/cache/21a1adfe02fac21a10118d177bfd0b084dd0c7b6'
rpt2:     cache miss
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
src/Keyring.ts (40:11)
38:
39:   #keyring?: KeyringInstance;
40:   #accounts: AddressSubject = accounts;
               ^
41:
42:   #addresses: AddressSubject = addresses;
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:10120:30)
    at Module.error (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14557:16)
    at tryParse (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14450:23)
    at Module.setSource (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:14839:33)
    at /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:16717:20
    at async Promise.all (index 1)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at rollupInternal (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/shared/rollup.js:18126:18)

error Command failed with exit code 1.

[ezolenko]

This is rollup complaining that it can't parse JS the plugin produces, here is a workaround I think: rollup/rollup#3128

[yangwao]

I've tried rollup/rollup#3128 (comment)

Rollup.config.js

import acornPrivateFields from 'acorn-private-class-elements'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  acornInjectPlugins: [
    acornPrivateFields()
  ],
  plugins: [
    typescript({
      tsconfigDefaults: defaults,
      tsconfig: "tsconfig.json",
      tsconfigOverride: override,
      // verbosity: 3,
    })
  ],
}

output

❯ yarn build:rollup
yarn run v1.22.4
$ rollup -c
[!] TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at module.exports (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/acorn-private-class-elements/index.js:12:14)
    at Object.<anonymous> (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/rollup.config.js:30:5)
    at Module._compile (internal/modules/cjs/loader.js:1157:30)
    at Object.require.extensions.<computed> [as .js] (/Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/bin/rollup:824:24)
    at Module.load (internal/modules/cjs/loader.js:1001:32)
    at Function.Module._load (internal/modules/cjs/loader.js:900:14)
    at Module.require (internal/modules/cjs/loader.js:1043:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at /Users/wao/Projects/vuepolkadot/vue-ui/packages/vue-keyring/node_modules/rollup/dist/bin/rollup:831:32

error Command failed with exit code 1.

[ezolenko]

Did you import acornPrivateFields from somewhere?

[0biWanKenobi]

Tried the same, same error. Here's my config:

import acornClassFields         from "acorn-class-fields"
import acornClassElements       from "acorn-private-class-elements"
import acornStaticClassFeatures from "acorn-static-class-features"
import acornPrivateMethods      from "acorn-private-methods"


export default {
  input: ['src/ext/src/bg/background.js'],//, 'src/ext/src/browser_action/main.js'],
  output: {
    dir: 'dist/ext/src/bg',
    //file: 'ext/src/bg/background-dist.js',
    format: 'es',
    plugins: []
  },
  acornInjectPlugins: [
    acornClassFields(),

I get

[!] TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at module.exports (C:\Users\thear\Documents\Programming\AutoStamperThetis\node_modules\acorn-class-fields\node_modules\acorn-private-class-elements\index.js:12:14)

[yangwao]

@ezolenko yes, it's in rollup.config.js, just forgot to add one more new line in formatting 💇‍♂

I've also tried yesterday https://www.npmjs.com/package/@rollup/plugin-typescript

Had a different error, but at least it knows it's private

but when I moved target from es5 anything higher, it's # is again unknown.

To me, it looks like missing parser or some helper?
I'm really new with private fields and we are just merging things from upstream 😅

[yangwao]

@ezolenko @0biWanKenobi may this could be issue? acornjs/acorn-private-class-elements#10

[0biWanKenobi]

@yangwao that is another issue I'm having and I commented there too. In this case the error is that we don't need parenthesis when configuring rollup, so:

acornInjectPlugins: [
  acornClassFields
]

is the way to go. Still getting # marked as an error, tho.. but that's another story