Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: [mobx] There are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details. #1681

Closed
baymears opened this issue Aug 13, 2018 · 8 comments
Closed

Error: [mobx] There are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details. #1681

baymears opened this issue Aug 13, 2018 · 8 comments

Comments

@baymears
Copy link

baymears commented Aug 13, 2018 •
edited
Loading

Hi, i've encountered a multiple mobx instances issue whilst packaging into an exe using 'pkg' (https://github.com/zeit/pkg) and i've been through issue #1082 with no luck. Here is my packages.json, any suggestions would be welcomed.

"peerDependencies": {
    "mobx": "5.0.3",
    "mobx-react": "5.2.3"
  },
  "dependencies": {
    "@material-ui/core": "^1.4.2",
    "@material-ui/icons": "latest",
    "axios": "^0.18.0",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-preset-stage-0": "^6.24.1",
    "chart.js": "^2.7.2",
    "cronstrue": "^1.40.0",
    "d3": "^5.5.0",
    "d3-queue": "^3.0.7",
    "d3-scale": "^2.1.0",
    "d3-timer": "^1.0.7",
    "date-fns": "^2.0.0-alpha.16",
    "downshift": "^1.31.16",
    "duration-js": "^4.0.0",
    "echarts": "^4.1.0",
    "echarts-for-react": "^2.0.13",
    "final-form": "^4.9.1",
    "final-form-arrays": "^1.0.4",
    "gsap": "^1.20.6",
    "highcharts": "^6.1.1",
    "immutable": "^3.8.2",
    "jss": "latest",
    "konva": "^2.1.8",
    "lodash": "^4.17.10",
    "material-ui-pickers": "^1.0.0-rc.12",
    "moment": "^2.22.2",
    "next": "^6.1.1",
    "prop-types": "latest",
    "react": "^16.4.2",
    "react-ace": "^6.1.4",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.4.2",
    "react-final-form": "^3.6.5",
    "react-final-form-arrays": "^1.0.6",
    "react-grid-layout": "latest",
    "react-height": "^3.0.0",
    "react-highcharts": "^16.0.2",
    "react-jss": "latest",
    "react-konva": "^1.7.12",
    "react-number-format": "^3.5.0",
    "react-select": "^1.3.0",
    "react-sizeme": "2.4.1",
    "react-split-pane": "^0.1.82",
    "react-styled-box": "^1.2.2",
    "react-swipeable-views": "^0.12.15",
    "react-transition-group": "^2.4.0",
    "rx-dom": "^7.0.3",
    "rxjs": "^6.2.2",
    "styled-components": "^3.3.3"
  },
  "devDependencies": {
    "mobx": "5.0.3",
    "mobx-react": "5.2.3",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-env": "^1.7.0"
  },
  "pkg": {
    "scripts": [
      "node_modules/webpack-hot-middleware/client.js",
      "node_modules/babel-runtime/helpers/slicedToArray.js"
    ]
  }
}

Here is a copy of server.js which is being packaged.

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const mobxreact = require('mobx-react')
const app = next({ dev })
const handle = app.getRequestHandler()

mobxreact.useStaticRendering(true)

console.log("process.cwd() = " + process.cwd());

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const { pathname, query = {} } = parsedUrl;
    if(pathname.includes("/static/") || pathname.includes("/_next/")){
      handle(req, res, parsedUrl)
    }else{
      query.path=pathname
      app.render(req, res, '/', query)
    }

  }).listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})
@mweststrate
Copy link
Member

mweststrate commented Aug 13, 2018 via email

@baymears
Copy link
Author

baymears commented Aug 13, 2018 •
edited
Loading

Commenting out require('mobx-react') and mobxreact.useStaticRendering(true) from server.js seems to have fixed the problem. (they were not in both to begin with, I was just trying different things).

index.js:

process.env.NODE_ENV = 'production'

require('./server.js')

server.js:

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
//const mobxreact = require('mobx-react')
const app = next({ dev })
const handle = app.getRequestHandler()

//mobxreact.useStaticRendering(true)

console.log("process.cwd() = " + process.cwd());

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const { pathname, query = {} } = parsedUrl;
    if(pathname.includes("/static/") || pathname.includes("/_next/")){
      handle(req, res, parsedUrl)
    }else{
      query.path=pathname
      app.render(req, res, '/', query)
    }

  }).listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

@mweststrate
Copy link
Member

Are you requiring the server code from the client?

@baymears
Copy link
Author

baymears commented Aug 14, 2018 •
edited
Loading

no I don't require server code from the client. I should clarify I commented out require('mobx-react') and mobxreact.useStaticRendering(true) from server.js. They were only moved to index.js momentarily to see if it changed anything. Also, i'm using next.js.

@mweststrate
Copy link
Member

mweststrate commented Aug 15, 2018 via email

@baymears
Copy link
Author

baymears commented Aug 15, 2018 •
edited
Loading

i'm following-ish https://github.com/zeit/next.js/tree/canary/examples/with-pkg which includes from .next in package.json.

@mweststrate
Copy link
Member

Please provide a reproduction with as few bells and whistles as possible

@mweststrate
Copy link
Member

Upgrading to 5.1.0 / 4.4.0 should avoid this issue (the module will still be loaded multiple times, but MobX now tries to share the state by default)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mweststrate @baymears