Css does not load in React widget built with parcel

Question

I built a react widget with parcel bundler. The sites and it's JavaScript functionality works, but the CSS doesn't load with it, so it looks disfigured. I've tried several methods, but the CSS won't work.

*Here is my package Json

{
  "name": "9jakids-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "node-sass": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-modal": "^3.14.3",
    "react-redux": "^7.2.5",
    "react-responsive-modal": "^6.1.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "eject": "react-scripts eject",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "build:widget": "parcel build src/index.js --no-source-maps -d widget"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

I also have a craco.config.js file but it's empty.

This is the site where it's imbedded.

This is the embeddable link.

     <div id="lukman-test"></div>

    <link href="https://test-royal.000webhostapp.com/widget/index.css" rel="stylesheet" />
    <script src="https://test-royal.000webhostapp.com/widget/index.js"></script>

The first problem is that you're using the old (deprecated) version of parcel - replace "parcel-bundler": "^1.12.5" in your package.json with "parcel": "^2.0.1". Beyond that, it's hard to tell exactly what is going on without seeing the source code. Here's [an example repo where I have a similar project setup working](https://github.com/astegmaier/stackoverflow-parcel-widget). If you still have trouble, could you share a simplified version of your source code? — Andrew Stegmaier, Nov 09 '21 at 16:17
Thank you so much @AndrewStegmaier, after I updated my parcel bundler my jsx react app was built successfully and the styles and functionality works as a widget. Thanks to your example repo. So I have another issue, I tried replicating this for a react typescript project, but it keeps building multiple chunk files instead of a single .js and .css file .. So I'm not able to embed it as a widget because of this, when I tried it breaks with errors. I don't know if this also counts but I don't import react in this project, since it's not necessary anymore — Genral-walker, Nov 11 '21 at 21:58
To reduce code splitting (where parcel splits large javascript files into separate ones for performance), you could try setting `minBundleSize` to a very high number - see here: https://parceljs.org/features/code-splitting/#configuration. If that doesn't help, maybe try posting a new question with a detailed repro steps, and I'll take a look. — Andrew Stegmaier, Nov 12 '21 at 15:34

Css does not load in React widget built with parcel

0 Answers0