govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
alphagov
GDS Tabs couldn't be compiled by the browser
What
I try to use gds tabs Gds TabUrl
I added many components of GDS to my react project. It works. But the tabs couldn't be compiled by the browser.
How can I handle this problem? My package JSON version is to the below
{ "name": "SampleProject", "version": "0.1.0", "private": true, "dependencies": { "17": "0.0.0", "@azure/msal-browser": "^2.18.0", "@azure/msal-react": "^1.1.0", "@reduxjs/toolkit": "^1.6.2", "@types/styled-components": "^5.1.15", "bootstrap": "^4.1.3", "govuk-react": "^0.10.0", "jquery": "^3.4.1", "l7": "0.0.0", "merge": "^1.2.1", "oidc-client": "^1.9.0", "react": "^17.0.2", "react-bootstrap": "^2.0.0", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router": "^5.2.1", "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.3.0", "react-scripts": "^3.4.1", "reactstrap": "^9.0.0", "redux-observable": "^2.0.0", "reselect": "^4.1.5", "rimraf": "^2.6.2", "rxjs": "^7.4.0", "sass": "^1.44.0", "styled-components": "^5.3.3", "typesafe-actions": "^5.1.0" }, "devDependencies": { "ajv": "^6.9.1", "cross-env": "^5.2.0", "eslint": "^6.8.0", "eslint-config-react-app": "^5.2.0", "eslint-plugin-flowtype": "^4.6.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.18.3", "govuk-frontend": "^3.14.0", "nan": "^2.14.1", "redux-immutable-state-invariant": "^2.1.0", "typescript": "^3.7.5" }, "eslintConfig": { "extends": "react-app", "overrides": [ { "files": [ ], "rules": { "import/no-anonymous-default-export": "off" } } ] }, "scripts": { "start": "rimraf ./build && react-scripts start", "build": "react-scripts build", "test": "cross-env CI=true react-scripts test --env=jsdom", "eject": "react-scripts eject", "lint": "eslint ./src/" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
Do you have any console errors? If so, please share them in a comment.
Right, gotcha.
Do you have JavaScript enabled in your browser? (I'm presuming so, given that you're using React!)
Hi @rduman 👋 Sorry you're experiencing problems getting the tabs component to work. Can you check you are importing the tabs component JavaScript somewhere in your project (either importing tabs.js or all.js). If your project is publicly available, it would be good to see your tabs code too so we can check you're pulling in the component correctly.
If you prefer you can also email our support email address, if you don't want to share links or code in this public repo. Our email address is [email protected]
I imported all scss file and js file.
@import "node_modules/govuk-frontend/govuk/all";
Also, I attached importing of initAll();
Thanks @rduman. We've noticed you're importing both govuk-frontend and govuk-react - I think you should only need one and I'm not sure how the two would interact together when installed in the same project. Can you let me know if you're trying to use the tabs component from govuk-react or govuk-frontend?
@vanitabarrett, thanks for your advice. I tried it. I have removed govuk-react library. But It couldn't find gds tabs of the child component. I copied all.js file from the govuk-frontend package to my root project. When I called initAll() in the index.html, it couldn't find the tabs that's belong to the child component.
I added all.js to index.html as to the below.
The $tabs returns 0
Then I installed webpack npm package to create a bundle.js But nothing has changed
Well, this issue got lost down the back of the sofa. Sorry! I'm gonna close this off on the assumption that a solution to this issue was found in the last 16 months.
For any future folks finding this, this repo is for sharing research and discussions about components and patterns in the GOV.UK Design System. Please raise technical support requests like this in the GOV.UK Frontend repo: https://github.com/alphagov/govuk-frontend
