search

artalar / reatom

Reatom - the ultimate state manager
https://reatom.dev
MIT License
989 stars 104 forks source link

Property 'observable' does not exist on type 'SymbolConstructor' #270

Closed bvn13 closed 4 years ago

bvn13 commented 4 years ago

Hi! I'm new to Reatom, so this is my first try. What is wrong?

Here is my compillation error:

Webpack: Finished after 16.388 seconds.

 ERROR  Failed to compile with 1 errors11:16:19 PM

 error  in /home/bvn13/develop/mila-clinic/mc-admin-front/node_modules/@reatom/observable/build/index.d.ts

ERROR in /home/bvn13/develop/mila-clinic/mc-admin-front/node_modules/@reatom/observable/build/index.d.ts(19,13):
TS2339: Property 'observable' does not exist on type 'SymbolConstructor'.

   386 modules

ERROR in /home/bvn13/develop/mila-clinic/mc-admin-front/node_modules/@reatom/observable/build/index.d.ts
ERROR in /home/bvn13/develop/mila-clinic/mc-admin-front/node_modules/@reatom/observable/build/index.d.ts(19,13):
TS2339: Property 'observable' does not exist on type 'SymbolConstructor'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mc-admin-front@0.0.1-SNAPSHOT webpack: `node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js "--config" "webpack/webpack.dev.js" "--env.stats=minimal"`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the mc-admin-front@0.0.1-SNAPSHOT webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bvn13/.npm/_logs/2020-01-02T20_16_19_804Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mc-admin-front@0.0.1-SNAPSHOT webpack:build:main: `npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the mc-admin-front@0.0.1-SNAPSHOT webpack:build:main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bvn13/.npm/_logs/2020-01-02T20_16_19_826Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mc-admin-front@0.0.1-SNAPSHOT build: `npm run cleanup && npm run webpack:build:main`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the mc-admin-front@0.0.1-SNAPSHOT build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bvn13/.npm/_logs/2020-01-02T20_16_19_835Z-debug.log

FAILURE: Build failed with an exception.

My settings are:

package.json

{
  "name": "mc-admin-front",
  "version": "0.0.1-SNAPSHOT",
  "description": "mc-admin-front",
  "private": true,
  "license": "Private",
  "cacheDirectories": [
    "node_modules"
  ],
  "dependencies": {
    "@blueprintjs/core": "^3.22.3",
    "@blueprintjs/datetime": "^3.15.1",
    "@fortawesome/fontawesome-svg-core": "1.2.26",
    "@fortawesome/free-solid-svg-icons": "5.12.0",
    "@fortawesome/react-fontawesome": "0.1.8",
    "@reatom/core": "^1.0.0",
    "@reatom/observable": "^1.0.0",
    "availity-reactstrap-validation": "2.5.1",
    "axios": "0.19.0",
    "bootstrap": "4.4.1",
    "loaders.css": "0.1.2",
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "react": "16.12.0",
    "react-day-picker": "7.3.2",
    "react-dom": "16.12.0",
    "react-hot-loader": "4.12.18",
    "react-jhipster": "0.9.1",
    "react-loadable": "5.5.0",
    "react-redux": "7.1.3",
    "react-redux-loading-bar": "4.5.0",
    "react-router-dom": "5.1.2",
    "react-toastify": "4.5.2",
    "react-transition-group": "2.7.0",
    "reactstrap": "7.1.0",
    "redux": "4.0.4",
    "redux-devtools": "3.5.0",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-promise-middleware": "6.1.2",
    "redux-thunk": "2.3.0",
    "tslib": "1.10.0",
    "uuid": "3.3.3"
  },
  "devDependencies": {
    "@blueprintjs/webpack-build-scripts": "^0.9.0",
    "@types/enzyme": "3.9.1",
    "@types/jest": "24.0.23",
    "@types/lodash": "4.14.149",
    "@types/node": "12.12.17",
    "@types/react": "16.9.16",
    "@types/react-dom": "16.9.4",
    "@types/react-redux": "6.0.6",
    "@types/react-router-dom": "5.1.3",
    "@types/redux": "3.6.31",
    "@types/webpack-env": "1.14.1",
    "@typescript-eslint/eslint-plugin": "2.11.0",
    "@typescript-eslint/parser": "2.11.0",
    "autoprefixer": "9.7.3",
    "base-href-webpack-plugin": "2.0.0",
    "browser-sync": "2.26.7",
    "browser-sync-webpack-plugin": "2.2.2",
    "cache-loader": "4.1.0",
    "copy-webpack-plugin": "5.1.0",
    "core-js": "3.4.8",
    "cross-env": "6.0.3",
    "css-loader": "3.3.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "enzyme-to-json": "3.4.3",
    "eslint": "6.7.2",
    "eslint-config-jhipster": "0.0.1",
    "eslint-config-jhipster-react": "0.0.1",
    "eslint-config-prettier": "6.7.0",
    "eslint-loader": "3.0.3",
    "eslint-plugin-react": "7.17.0",
    "file-loader": "5.0.2",
    "fork-ts-checker-webpack-plugin": "3.1.1",
    "friendly-errors-webpack-plugin": "1.7.0",
    "generator-jhipster": "6.6.0",
    "html-webpack-plugin": "3.2.0",
    "husky": "3.1.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-junit": "10.0.0",
    "jest-sonar-reporter": "2.0.0",
    "json-loader": "0.5.7",
    "lint-staged": "9.5.0",
    "mini-css-extract-plugin": "0.8.0",
    "moment-locales-webpack-plugin": "1.1.2",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "postcss-loader": "3.0.0",
    "prettier": "1.19.1",
    "react-infinite-scroller": "1.2.4",
    "redux-mock-store": "1.5.4",
    "rimraf": "3.0.0",
    "sass": "1.23.7",
    "sass-loader": "8.0.0",
    "simple-progress-webpack-plugin": "1.1.2",
    "sinon": "7.5.0",
    "source-map-loader": "0.2.4",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "stripcomment-loader": "0.1.0",
    "style-loader": "1.0.1",
    "swagger-ui-dist": "3.24.3",
    "terser-webpack-plugin": "2.2.3",
    "thread-loader": "2.1.3",
    "to-string-loader": "1.1.6",
    "ts-jest": "24.2.0",
    "ts-loader": "6.2.1",
    "typescript": "3.7.3",
    "@openapitools/openapi-generator-cli": "0.0.14-4.0.2",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.9.0",
    "webpack-merge": "4.2.2",
    "webpack-notifier": "1.8.0",
    "workbox-webpack-plugin": "4.3.1",
    "write-file-webpack-plugin": "4.5.1"
  },
  "engines": {
    "node": ">=8.9.0"
  },
  "scripts": {
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,tsx,css,scss,yml}\"",
    "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
    "lint:fix": "npm run lint -- --fix",
    "cleanup": "rimraf build/resources/main/static/",
    "start": "npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "jest": "jest --coverage --logHeapUsage --maxWorkers=2 --config src/test/javascript/jest.conf.js",
    "jest:update": "npm run jest -- --updateSnapshot",
    "test": "npm run lint && npm run jest",
    "test-ci": "npm run lint && npm run jest:update",
    "test:watch": "npm test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --env.stats=minimal",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "build": "npm run cleanup && npm run webpack:build:main",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  },
  "jestSonar": {
    "reportPath": "build/test-results/jest",
    "reportFile": "TESTS-results-sonar.xml"
  }
}

package-lock.json package-lock.json

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "build/resources/main/static/app",
    "lib": ["es2015", "es2017", "dom"],
    "types": ["webpack-env", "jest"],
    "allowJs": true,
    "checkJs": false,
    "baseUrl": "./",
    "paths": {
      "app/*": ["src/*"]
    },
    "importHelpers": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const utils = require('./utils.js');

const getTsLoaderRule = env => {
  const rules = [
    {
      loader: 'cache-loader',
      options: {
        cacheDirectory: path.resolve('build/cache-loader')
      }
    },
    {
      loader: 'thread-loader',
      options: {
        // There should be 1 cpu for the fork-ts-checker-webpack-plugin.
        // The value may need to be adjusted (e.g. to 1) in some CI environments,
        // as cpus() may report more cores than what are available to the build.
        workers: require('os').cpus().length - 1
      }
    },
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
        happyPackMode: true
      }
    }
  ];
  if (env === 'development') {
    rules.unshift({
      loader: 'react-hot-loader/webpack'
    });
  }
  return rules;
};

module.exports = options => ({
  cache: options.env !== 'production',
  resolve: {
    extensions: [
      '.js', '.jsx', '.ts', '.tsx', '.json'
    ],
    modules: ['node_modules'],
    alias: utils.mapTypescriptAliasToWebpackAlias()
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: getTsLoaderRule(options.env),
        include: [utils.root('./src')],
        exclude: [utils.root('node_modules')]
      },
      {
        test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
        loader: 'file-loader',
        options: {
          digest: 'hex',
          hash: 'sha512',
          name: 'content/[hash].[ext]'
        }
      },
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.tsx?$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        exclude: [utils.root('node_modules')]
      },
      // {
      //   test: '/\.jsx?$/',
      //   loader: 'babel-loader',
      //   exclude: '/node_modules/'
      // }
    ]
  },
  stats: {
    children: false
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: `'${options.env}'`,
        // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
        VERSION: `'${process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV'}'`,
        DEBUG_INFO_ENABLED: options.env === 'development',
        // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
        // If this URL is left empty (""), then it will be relative to the current context.
        // If you use an API server, in `prod` mode, you will need to enable CORS
        // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
        SERVER_API_URL: options.env !== 'production'
          ? "'//'+window.location.host+':8080'"
          : "'//'+window.location.host+':80'",
        SERVER_API_PORT: options.env !== 'production' ? "8080" : "80"
      }
    }),
    new ForkTsCheckerWebpackPlugin({ eslint: true }),
    // new CopyWebpackPlugin([
    //   { from: './node_modules/swagger-ui-dist/*.{js,css,html,png}', to: 'swagger-ui', flatten: true, ignore: ['index.html']},
    //   { from: './node_modules/axios/dist/axios.min.js', to: 'swagger-ui'},
    //   // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
    // ]),
    new HtmlWebpackPlugin({
      template: './index.html',
      chunksSortMode: 'dependency',
      inject: 'body'
    }),
    new BaseHrefWebpackPlugin({ baseHref: '/' }),
  ]
});
belozer commented 4 years ago

@bvn13 hi! Thanks for the report.

We are already looking at where the problem occurred

belozer commented 4 years ago

@bvn13 please edit your tsconfig.

Solution 1. Add node to your types section "types": ["webpack-env", "jest", "node"],

OR Solution 2. Remove types section (for include all @types/*)

See more info

belozer commented 4 years ago

I close issue because there is no activity. Please re-open if the solution doesn't help.