Question

我知道标题的描述性不是很好，但是找不到更好的词。我正在使用“ xstate”库，生成结果导致“意外令牌”错误。

这是我的webpack.config.js：

var WebpackBuildNotifierPlugin = require('webpack-build-notifier');

var webpackConfig = { 
    entry: "./src/App.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new WebpackBuildNotifierPlugin({
          title: "Build",
          suppressSuccess: false
        })
    ],
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    mode:'development',
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            { test: /\.css$/,  loader: 'style-loader!css-loader' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
            { test: /\.(jpg|png|svg|gif|css)$/, exclude: /fabric\.css$/, loader: 'file-loader' }
        ]
    }
};


module.exports = [
    webpackConfig
];

构建代码后，bundle.js的一部分如下所示，这会导致“意外令牌”错误：

u
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))ndefined

以这种方式导入Xstate：

import * as React from 'react';
import { Machine, interpret } from 'xstate';

interface AppRootState{
    currentState:any
}

export class AppRoot extends React.Component<{}, AppRootState>{

    service = interpret(appRootMachine).onTransition((current)=>{
        this.setState({current});
    });

    constructor(){
        super({});
        this.state = {
            currentState:this.service.initialState
        };
    }

    componentDidMount() {
        this.service.start();
    }

    componentWillUnmount() {
       this.service.stop();
    }
    ///Rest of the code
}

Answer 1

很难消除您可能拥有的所有设置变量，但这是我尝试过的内容，并且在尝试复制问题时对我有用：

我按照React和Webpack设置here中的打字稿指南进行操作。

一旦达到一切正常工作的地步，便用您在问题中提供的内容替换了“ Hello”组件的内容，然后一个“正常运行”的组件最终如下所示：

import * as React from 'react';
import { Machine, interpret } from 'xstate';

export interface AppRootProps {}
export interface AppRootState {
  currentState: any;
  current: any;
}

const appRootMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
});

export class AppRoot extends React.Component<AppRootProps, AppRootState> {
  service = interpret(appRootMachine).onTransition((current) => {
    this.setState({ current });
  });

  constructor() {
    super({});
    this.state = {
      currentState: this.service.initialState,
      current: {}
    };
  }

  componentDidMount() {
    this.service.start();
  }

  componentWillUnmount() {
    this.service.stop();
  }
  render() {
    return (
      <h1>
        Current state:
        {this.state.currentState && this.state.currentState.value}
      </h1>
    );
  }
}

我从xstate存储库中添加了“基本”机器示例作为您的appRootMachine和一个基本的render方法，目的是使所有代码尽可能地贴近您的实现。

然后我用您提供的配置替换了webpack.config.js

安装了它所需的依赖项awesome-typescript-loader和webpack-build-notifier
将条目更新为entry: "./src/index.tsx",的{{1}}
将index.html第15行更新为webpackConfig，以使用您的webpack配置创建的包

此后一切都对我有用，我希望您能在上面提到的步骤中找到答案，这可以帮助您修复项目设置。

我还将建议您考虑使用@xstate/react package，以便将来将xstate与react一起使用，并在其中注明用法示例，因为它们显示出比此处显示的解决问题更好的用法。

Webpack弄乱了字符顺序，导致意外的令牌错误

1 个答案: