samirelanduk
Hello, there will be an error after loading the plug-in
It looks like there is an issue in parsing the file it has been provided with. Could you show me your code where the component is used?
This problem occurs the first time you load or refresh the page.
<Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}>
{
targetsDetail.Structure.map((item,index)=>{
return(
<TabPane tab={(item.pdb)} key={item.pdb}>
<div className='Molstar-div2'>
<Molstar pdbId={item.pdb} />
</div>
</TabPane>
)
})
}
</Tabs>```
Hmm - I just tested the library on both molstar v2.2 and molstar v3.9, and using pdbId it works fine. Could you console.log the item.pdb and confirm that they are valid PDB IDs? What PDB IDs are they?
That's odd - both of those IDs work fine for me. What version of molstar and molstar-react are you using? You can see these with npm list.
{ "name": "syzh", "version": "0.1.0", "private": true, "dependencies": { "@antv/data-set": "^0.8.9", "@babel/polyfill": "^7.2.5", "animate.css": "^3.6.1", "antd": "^3.6.2", "autoprefixer": "7.1.6", "axios": "^0.18.0", "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", "babel-preset-react-app": "^3.1.1", "babel-runtime": "6.26.0", "bizcharts": "^3.1.10", "bodymovin": "^4.13.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", "draft-js": "^0.10.5", "draftjs-to-html": "^0.8.4", "draftjs-to-markdown": "^0.5.1", "eslint": "4.10.0", "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", "eslint-plugin-flowtype": "2.39.1", "eslint-plugin-import": "2.8.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.4.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "fs-extra": "3.0.1", "gsap": "^2.0.1", "html-to-draftjs": "^1.4.0", "html-webpack-plugin": "2.29.0", "jsme-react": "^0.0.9", "mobx": "^5.0.3", "mobx-react": "^5.2.3", "molstar-react": "^0.5.0", "nprogress": "^0.2.0", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", "react": "^18.1.0", "react-dev-utils": "^5.0.1", "react-dom": "^16.4.1", "react-draft-wysiwyg": "^1.12.13", "react-loadable": "^5.4.0", "react-router-dom": "^4.3.1", "react-scripts": "^3.4.4", "resolve": "1.6.0", "screenfull": "^3.3.2", "shufflejs": "^5.1.2", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom" }, "jest": { "collectCoverageFrom": [ "src//*.{js,jsx,mjs}" ], "setupFiles": [ "<rootDir>/config/polyfills.js" ], "testMatch": [ "<rootDir>/src//tests//*.{js,jsx,mjs}", "<rootDir>/src//?(.)(spec|test).{js,jsx,mjs}" ], "testEnvironment": "node", "testURL": "http://localhost", "transform": { "^.+\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest", "^.+\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\]node_modules[/\\].+\.(js|jsx|mjs)$" ], "moduleNameMapper": { "^react-native$": "react-native-web" }, "moduleFileExtensions": [ "web.js", "js", "json", "web.jsx", "jsx", "node", "mjs" ] }, "babel": { "presets": [ "react-app" ] }, "eslintConfig": { "extends": "react-app" }, "devDependencies": { "babel-plugin-import": "^1.8.0", "babel-plugin-transform-decorators-legacy": "^1.3.5", "qs": "^6.10.3" }, "homepage": "." }
That's a JSON object - could I see the packages that are installed with npm list as this doesn't show the molstar version - I think seeing what version of molstar you have installed will be key.
I have the same issue. Even while using default PDB IDs given in the readme. I'm using React 18. Here is my Molstar and Molstar-react version
xingguang@loaclhost elegantDeep % npm ls molstar [email protected] /Users/xingguang/Desktop/yszh/ys/elegantDeep └─┬ UNMET DEPENDENCY [email protected] └── UNMET DEPENDENCY [email protected]
npm ERR! missing: [email protected], required by [email protected] npm ERR! missing: [email protected], required by [email protected] xingguang@loaclhost elegantDeep % npm ls react [email protected] /Users/xingguang/Desktop/yszh/ys/elegantDeep ├─┬ UNMET DEPENDENCY [email protected] │ └─┬ UNMET DEPENDENCY [email protected] │ └── UNMET DEPENDENCY [email protected] └── UNMET DEPENDENCY [email protected]
npm ERR! missing: [email protected], required by [email protected] npm ERR! missing: [email protected], required by [email protected] npm ERR! extraneous: [email protected] /Users/xingguang/Desktop/yszh/ys/elegantDeep/node_modules/react npm ERR! missing: [email protected], required by [email protected] npm ERR! missing: [email protected], required by [email protected] xingguang@loaclhost elegantDeep %