импорт заметен или что-то из mobx не найдено

Question

Я создал проект React.js с нуля, со своей собственной конфигурацией веб-пакета и т. Д. ... Я пытаюсь поместить mobx в проект, но не могу, потому что импорт не работает.

как видите:

Я пробовал все как import mobx from 'mobx или import { observable } from 'mobx/lib/mobx' последнее решение работает, но это не очень хорошая практика, как говорится в официальном документе: https://mobx.js.org/best/pitfalls.html

Я делюсь конфигурацией веб-пакета, package.json, .babelrc

Конфигурация веб-пакета:

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports = {
    entry: path.join(__dirname,'src','index.js'),
    output: {
        path: path.join(__dirname,'build'),
        filename: 'index.bundle.js',
    },
    mode: process.env.NODE_ENV || 'development',
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    devServer: {
        contentBase: path.join(__dirname,'src'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                loaders: ['file-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'public','index.html'),
            filename: 'index.html',
            favicon: path.join(__dirname,'public','favicon.png'),
        }),
    ],
};

package.json:

{
  "name": "client",
  "version": "1.0.0",
  "description": "front-end built in reactjs for the js under pressure project",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "yarn lint && babel-node ./node_modules/webpack/bin/webpack --mode production",
    "start:dev": "yarn lint && babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --mode development --open",
    "lint": "babel-node ./node_modules/eslint/bin/eslint.js \"src/**/*.js\" \"src/**/*.jsx\" --fix"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-eslint-comments": "^3.1.1",
    "eslint-plugin-jest": "^22.6.4",
    "eslint-plugin-react": "^7.13.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx": "^5.10.0",
    "mobx-react": "^6.0.3",
    "mobx-react-devtools": "^6.1.1",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.6.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.0.2",
    "@material-ui/icons": "^4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-ace": "^7.0.2",
    "react-dom": "^16.8.6"
  }
}

babelrc:

{
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
}

и что я пытаюсь: mobx / index.js:

import { observable } from 'mobx';

class AppStore {
    @observable test = 'test';
    /*    @observable level = 0;
    @observable check = 0;
    @observable skiped = false;
    @observable state = 0;
    @observable count = 0;
    @observable levels= [];
    @observable test = [];
*/
    /*   @action.bound
    levelUp() {
        this.level += 1;
    }

    @action.bound
    startTimer() {
        setInterval(() => {
            this.count += 1;
        }, 1000);
    }

    @action.bound
    skiped() {
        this.skip = !this.skip;
    }

    @action.bound
    startTest() {
        this.state = 1;
    }

    @action.bound
    endTest() {
        this.state = 2;
        clearInterval(this.startTime());
    }*/
}

export default AppStore;

и src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'containers/app.jsx';
import AppStore from 'mobx/index.js';

const store = new AppStore();
/**
 * DOM component - setup main component into root div
 * @reactProps {none} none - none
 * @desc Entry point of the react app
 * @extends {ReactDOM}
 * @public
 * @version 1.0
 * @since 1.0
 */
/*eslint react/jsx-filename-extension: 0*/
ReactDOM.render((
    <App store={ store } />
),
document.getElementById('root'));

Любая помощь будет принята с благодарностью. Спасибо за ваше время и счастливое кодирование !!!

Answer 1

Вот ваша проблема:

        resolve: {
            modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        },

Это не будет проблемой, за исключением того, что вы должны быть осторожны, чтобы не называть ваши каталоги так же, как пакеты npm.Если вы измените каталог mobx, скажем, store, разрешение модуля снова будет работать правильно.