Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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.

Issue Analytics

State:
Created 4 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

3reactions

0biWanKenobicommented, Apr 25, 2022

@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

1reaction

yangwaocommented, Mar 19, 2020

@ezolenko @0biWanKenobi may this could be issue? https://github.com/acornjs/acorn-private-class-elements/pull/10

Top Results From Across the Web

TypeScript 3.8 Finally Fixes Private Fields - Medium

The private keyword only works when your design tools enforce it. Once you compile your TypeScript to JavaScript, the access keywords and ...

Documentation - TypeScript 2.0

The compiler checks that variables are definitely assigned by performing control flow based type analysis. See later for further details on this topic....

@rollup/plugin-typescript - npm

A Rollup plugin for seamless integration between Rollup and Typescript. Requirements. This plugin requires an LTS Node version (v14.0.0+) and ...

Changelog — Airflow Documentation

Adds Pendulum 1.x -> 2.x upgrade documentation (#18955). Clean up dynamic start_date values ... Make AirflowDateTimePickerWidget a required field (#18602).

Relay

RelayThe GraphQL client that scales with you. · Built for scale · Keeps iteration quick · Automatic optimizations · Data consistency · Fetching...