React + Typescript + Theme-ui Production build not working

[lzoia-bc]

🐛 bug report

I have a project with React, Typescrit and Theme-ui for component styling. Following the documentation of the style library the style should work thanks to the New JSX Trasnformation introduced by React v17 which is also supported directly, as the docs say, by parcel. So following the guide i just addes those lines to the tsconfig

...
  "jsx": "react-jsx",
  "jsxImportSource": "theme-ui",
...

If I run parcel in dev mode with the command parcel src/index.html the application works fine and all the style is loaded correctly. When I use the build command, instead, the code is generated without cli errors, but the style is not translated correctly. Seems like the JSX transformation is ignored for some reason. So as workaround for the moment I have to add --no-scope-hoist --no-optimize, that basically doesn't perform any optimization at all to my output code.

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "version": "0.0.1",
  "description": "",
  "targets": {
    "default": {
      "distDir": "./build/dist"
    }
  },
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@theme-ui/presets": "^0.12.0",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.7",
    "@types/rebass": "^4.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "styled-components": "^5.3.0",
    "theme-ui": "^0.12.0",
    "typescript": "^4.3.2",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.8",
    "@types/uuid": "^8.3.1",
    "parcel": "^2.0.1"
  }
}

tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "module": "esnext",
      "lib": ["ESNext", "DOM"],
      "experimentalDecorators": true,
      "jsx": "react-jsx",
      "jsxImportSource": "theme-ui",
      "sourceMap": true,
      "strict": true,
      "moduleResolution": "node",
      "baseUrl": "./src",
      "paths": {
        "~/*": [ "./*" ]
      },
      "typeRoots": [
        "node_modules/@types"
      ],
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "resolveJsonModule": true,
      "forceConsistentCasingInFileNames": true,
      "noUnusedLocals": false,
      "noImplicitThis": true,
      "noImplicitAny": true
    },
    "exclude": ["node_modules", "build"],
    "include": ["src/**/*"]
  }

🤔 Expected Behavior

The output code generate by build command should have the same behavior as the development code

🔦 Context

I tried also to use the babel plugins/preset listed the style documentation without any effects

🌍 Your Environment

Software	Version(s)
Parcel	2.0.1
Node	16.13.0
npm	8.1.0
Operating System	Windows

[lzoia-bc]

Any news on this topic ?

[timo-klarshift]

I have the same issue. I am using react and css imports from ts files. only with no-scope-hoist it works correctly. otherwise its missing "some" of the CSS.

[lasharela]

same here. in local everything is working. TypeScript based NextJS. on production looks like theme provider is not working.

[lzoia-bc]

Any updates on this topic ? Since this issue happened to other users, maybe it could be worth give us at least a workaround