Webpack 未捕获错误：模块解析失败：意外令牌

Question

This is a first I see this with Webpack, I'm trying out LitElement and trying to query my shadowRoot with getElementByID but this completly kills webpack for some reason like it needs a loader to parse the value of this basic javascript functionality.

It should be said I use typescript, I have a small test case here:

App.ts

import { customElement, html, LitElement } from "lit-element";

@customElement("open-studio")
export class OpenStudio extends LitElement {
    
    async onClick() {
        const textarea = this.shadowRoot?.getElementById("file-content")
    }

    render() {
        return html`
            <div>Open Studio</div>
            <button @click=${this.onClick}>Button</button>
            <textarea id="file-content"></textarea>
        `
    }
}

Webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|ttf|woff|woff2|eot)$/i,
        use: [
          { loader: 'file-loader' },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 3000,
    hot: true,
    contentBase: path.resolve(__dirname,
      "public"),
    disableHostCheck: true,
    historyApiFallback: true
  },
};

Error thrown

app.ts:1 Uncaught Error: Module parse failed: Unexpected token (13:41)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| let OpenStudio = class OpenStudio extends lit_element_1.LitElement {
|     async onClick() {
>         const textarea = this.shadowRoot?.getElementById("file-content");
|     }

I've been looking up and down for the last few hours, but I can't find a solution to this, and I've never faced this before (In React), I doubt its a TypeScript or LitElements vs React issue, its more like a configuration of webpack I just don't know of or do not understand yet, does any one here have a solution for this.

Answer 1

You are using typescript, but putting it in a file called.js therefore the ts-loader is not transpiling it, and the first time it hits something non-javascripty it dies.