Ошибка Webpack для стороннего реактивного модуля (эффектора) - PullRequest
Новая
       13

Ошибка Webpack для стороннего реактивного модуля (эффектора)

0 голосов
/ 06 мая 2019

РЕДАКТИРОВАТЬ: Я сдался с моей собственной настройкой Webpack и просто использовал react-scripts, и теперь он прекрасно компилируется. Должно быть, это была моя установка Webpack / Babel, хотя я до сих пор не могу узнать, что

Я пытаюсь поиграться с модулем effector , который имеет привязку React effector-реаги * . Я скопировал и вставил базовый (рабочий) пример песочницы кода, но получаю сообщение об ошибке веб-пакета, из-за которого я думаю, что моя конфигурация сборки неверна.

Мой простой компонент выглядит следующим образом: 

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 тоже

1 Ответ

1 голос
/ 06 мая 2019

Протестировано на npm@6.4.1, webpack4.30.0 & node@10.13.0

Попробуйте это,

Вы загрузили effector отдельно как зависимость npm.Я считаю, что вы не можете разрешить этот модуль специально.

Я пытался использовать те же модули, используя. 

npm install effector
npm install effector-react

Добавление двух вышеупомянутых зависимостей.Это работает нормально.

Добавление примера моего свойства module из веб-пакета 

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

Надеюсь, это поможет.

...