javascript - 第 3 方 React 模块(效应器)的 Webpack 错误

Question

编辑:我放弃了自己的 Webpack 设置，只使用了 react-scripts，现在它编译得很好。所以一定是我的 Webpack/Babel 设置，尽管仍然找不到内容

我正在尝试使用模块 effector ，它有一个 React 绑定(bind) 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 上测试

试试这个，

您是否单独下载了 effector 作为 npm 依赖项。我相信您无法专门解决这个模块。

我尝试使用相同的模块。

npm install effector
npm install effector-react

添加上述两个依赖项。效果很好。

从 webpack 添加我的 module 属性示例

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

希望这有帮助。