illia
illia
PostsComments
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
tsc correctly bundles jsx and exports it through index.js file. It's the actual project build (in development) that assumes react (using vite)
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
@peerreynders but if that was the case, why does production build using the same library work fine?
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
I don't think it's a library issue. I'm guessing it's either vite or more likely vite solid plug-in bug. Because app production build works fine.
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
what do you mean? I'm not using vite for library build. I'm using tsc.
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
@bigmistqke I have figured it out. My "index.ts" file was exporting everything from "css-styled.tsx" file. On practice with internal files it works fine. Apparently, it doesn't work for libs and JSX defaults to React. I suspect it's some sort of a bug. After renaming "index.ts" to "index.tsx", it works fine 🔥 🙄
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
@bigmistqke thanks for looking into it. I saw other solidjs libraries that use tsc to compile code and i didn't find any major differences between configs, so yeah, it's kind of weird. I'll try your suggestion
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
here's the same code inside the ./dist folder. It seems that for some reason vite tries to use React to transform JSX from that specific part
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
when i inspect dev tools error i see this . I don't know why that specific JSX code is using React.createElement
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
interestingly enough, "pnpm build && pnpm serve" works and the project is served correctly, while only "pnpm dev" has the error i described
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
if i copy the code from npm package inside my project, it works. Also tests inside my npm package pass both imported from ./src and from the built version (imported from ./dist)
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
tsconfig inside my project 
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": [
      "vite/client"
    ],
    "noEmit": true,
    "isolatedModules": true,
    "baseUrl": "./",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
  },
}
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": [
      "vite/client"
    ],
    "noEmit": true,
    "isolatedModules": true,
    "baseUrl": "./",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
  },
}
and standard vite.config.js 
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
// import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [
    /* 
    Uncomment the following line to enable solid-devtools.
    For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
    */
    // devtools(),
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
// import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [
    /* 
    Uncomment the following line to enable solid-devtools.
    For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
    */
    // devtools(),
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});
20 replies
SSolidJS
Created by illia on 5/20/2024 in #support
Uncaught ReferenceError: React is not defined
Here's my tsconfig in npm package 
{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ESNext",
    "lib": [
      "es2019",
      "DOM"
    ],
    "jsx": "preserve",
    "declaration": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsxImportSource": "solid-js"
  },
  "include": [
    "src"
  ]
}
{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ESNext",
    "lib": [
      "es2019",
      "DOM"
    ],
    "jsx": "preserve",
    "declaration": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsxImportSource": "solid-js"
  },
  "include": [
    "src"
  ]
}
20 replies