Webpack error for 3rd party react module (effector)

Question

EDIT: I gave up with my own Webpack setup and just used react-scripts and now it compiles just fine. So must have been my Webpack/Babel setup, though still can't find out what

I'm trying to play around with the module effector, which has a React binding effector-react. I copy pasted a basic (working) code sandbox example, but I'm getting a webpack error which makes me think my build configuration isn't right.

My simple component is as follows:

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;

and my effector counter store is as follows:

import { createStore, createEvent } from "effector";

// Store
const s_counter = createStore(0);

export { s_counter };

I think the issue is with my Webpack/Babel config, which are as follows:

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"]
}

I'm using webpack 4, and when I build by just running webpack my app doesn't load and I get the console error:

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)

The actual error is caused by importing things from effector-react, specifically this line:

import { useStore } from "effector-react";

doesn't matter what module I import from effector-react, I get that console error. Any ideas for what's going wrong are welcome.

EDIT: same kind of problem if importing from effector itself too

Answer 1

Tested on [email protected], webpack4.30.0 & [email protected]

Try this,

Did you download effector separately as a npm dependency. I believe you are not able to resolve this module specifically.

I tried using the same modules using.

npm install effector
npm install effector-react

Adding the above two dependencies. It works fine.

Adding a sample of my module property from webpack

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

Hope this helps.