microsoft / microsoft/reflect-metadata

TypeError: Cannot read property 'Reflect' of undefined

Open
#125 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs More Info Revisit
Dominant language
TypeScript
Stars
3.4k
Forks
190
Avg merge
13h 52m
Merged PRs (30d)
1

Description

TypeError: Cannot read property 'Reflect' of undefined
    at eval (/file/4hqwYFw6FKw1njvzEl3VUh/PLUGIN_62_SOURCE:47142)
    at eval (/file/4hqwYFw6FKw1njvzEl3VUh/PLUGIN_62_SOURCE:47158)
    at Object../node_modules/reflect-metadata/Reflect.js (/file/4hqwYFw6FKw1njvzEl3VUh/PLUGIN_62_SOURCE:48248)
    at __webpack_require__ (/file/4hqwYFw6FKw1njvzEl3VUh/PLUGIN_62_SOURCE:20)

tsconfig

{
  "compilerOptions": {
    "target": "es2017",
    "outDir": "dist",
    "jsx": "react",
    "lib": [
      "DOM",
      "ES2015.Reflect"
    ],
    "experimentalDecorators": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ]
  }
}

weback

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = (env, argv) => ({
    mode: argv.mode === 'production' ? 'production' : 'development',

    // This is necessary because Figma's 'eval' works differently than normal eval
    devtool: argv.mode === 'production' ? false : 'inline-source-map',

    entry: {
        ui: './src/ui.tsx', // The entry point for your UI code
        code: './src/code.ts', // The entry point for your plugin code
    },

    target: 'node',

    module: {
        rules: [
            // Converts TypeScript code to JavaScript
            { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },

            // Enables including CSS by doing "import './file.css'" in your TypeScript code
            { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },

            // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
            { test: /\.(png|jpg|gif|webp|svg|zip)$/, loader: [{ loader: 'url-loader' }] },
        ],
    },

    // Webpack tries these extensions for you if you omit the extension like "import './file'"
    resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
    },

    // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/ui.html',
            filename: 'ui.html',
            inlineSource: '.(js)$',
            chunks: ['ui'],
        }),
        new HtmlWebpackInlineSourcePlugin(),
    ],
})

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reported stack trace in node_modules/reflect-metadata/Reflect.js and compare it with tsconfig and the webpack configuration. Reproduce the failure using the ui.tsx and code.ts entry points, then verify that the generated plugin output no longer throws this TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.