Hello, there will be an error after loading the plug-in

[9527xsg]

[samirelanduk]

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?

[9527xsg]

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>```

[samirelanduk]

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?

[9527xsg]

0: {pdb: '2PNC', type: 'not GPCR'}
1: {pdb: '7AWW', type: 'not GPCR'}

[samirelanduk]

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.

[9527xsg]

{
"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": [
"/config/polyfills.js"
],
"testMatch": [
"/src//tests//*.{js,jsx,mjs}",
"/src//?(.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\.(js|jsx|mjs)$": "/node_modules/babel-jest",
"^.+\.css$": "/config/jest/cssTransform.js",
"^(?!.\.(js|jsx|mjs|css|json)$)": "/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": "."
}

[samirelanduk]

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.

[Viswa4599]

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

[samirelanduk]

Could you show me the output of npm ls react and npm ls molstar?

[9527xsg]

xingguang@loaclhost elegantDeep % npm ls molstar
syzh@0.1.0 /Users/xingguang/Desktop/yszh/ys/elegantDeep
└─┬ UNMET DEPENDENCY molstar-react@0.5.1
└── UNMET DEPENDENCY molstar@2.4.1

npm ERR! missing: molstar-react@0.5.1, required by syzh@0.1.0
npm ERR! missing: molstar@2.4.1, required by molstar-react@0.5.1
xingguang@loaclhost elegantDeep % npm ls react
syzh@0.1.0 /Users/xingguang/Desktop/yszh/ys/elegantDeep
├─┬ UNMET DEPENDENCY molstar-react@0.5.1
│ └─┬ UNMET DEPENDENCY molstar@2.4.1
│ └── UNMET DEPENDENCY react@17.0.2
└── UNMET DEPENDENCY react@16.4.1

npm ERR! missing: react@16.4.1, required by syzh@0.1.0
npm ERR! missing: molstar-react@0.5.1, required by syzh@0.1.0
npm ERR! extraneous: react@16.4.1 /Users/xingguang/Desktop/yszh/ys/elegantDeep/node_modules/react
npm ERR! missing: molstar@2.4.1, required by molstar-react@0.5.1
npm ERR! missing: react@17.0.2, required by molstar@2.4.1
xingguang@loaclhost elegantDeep %

[Viswa4599]

Hi, seemed to a browser issue. Managed to fix it after clearing cache