Question

编辑：我放弃了自己的Webpack设置，只使用了react-scripts，现在可以正常编译了。所以必须是我的Webpack / Babel设置，尽管仍然无法找出什么

我正在尝试使用模块effector，该模块具有React绑定effector-react。我复制并粘贴了一个基本的（有效的）代码沙箱示例，但出现了webpack错误，这使我认为我的构建配置不正确。

我的简单组件如下：

import React from "react";
import { useStore } from "effector-react";

import { s_counter } from "stores/counter";

function Count () {
  const counter = useStore(s_counter);

  return ( <div>{counter}</div> );
};

export default Count;

我的效应器专卖店如下：

import { createStore, createEvent } from "effector";

// Store
const s_counter = createStore(0);

export { s_counter };

我认为问题出在我的Webpack / Babel配置中，如下所示：

webpack.config.js

const path = require("path");

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/src/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'src/components/'),
      stores: path.resolve(__dirname, 'src/stores/'),
    },
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

我正在使用webpack 4，并且仅通过运行webpack进行构建时，我的应用程序无法加载，并且出现控制台错误：

effector.es.js:35 Uncaught SyntaxError: Invalid or unexpected token
    at Object../node_modules/effector/effector.es.js (bundle.js:109)
    at __webpack_require__ (bundle.js:20)
    at eval (effector-react.es.js:13)
    at Module../node_modules/effector-react/effector-react.es.js (bundle.js:97)
    at __webpack_require__ (bundle.js:20)
    at eval (Count.jsx:4)
    at Module../src/components/Count.jsx (bundle.js:311)
    at __webpack_require__ (bundle.js:20)
    at eval (App.jsx:4)
    at Module../src/components/App.jsx (bundle.js:299)

实际错误是由于从effector-react（尤其是这一行）导入内容引起的：

import { useStore } from "effector-react";

从effector-react导入哪个模块都没有关系，但出现控制台错误。任何出现问题的想法都欢迎。

编辑：如果也从effector本身导入，则存在同样的问题

Answer 1

在npm @ 6.4.1，webpack4.30.0和node@10.13.0上进行了测试

尝试一下

您是否作为npm依赖项分别下载了effector。我相信您无法专门解决此模块。

我尝试使用相同的模块。

npm install effector
npm install effector-react

添加以上两个依赖项。很好。

从webpack添加我的 module 属性的示例

module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
        }]
    }

希望这会有所帮助。

第三方反应模块（执行器）的Webpack错误

1 个答案: