Uncaught TypeError: can't access property "__k", t2 is null

[aspizu]

Uncaught TypeError: can't access property "__k", t2 is null

import civet from "@danielx/civet/dist/vite.mjs";
import preact from "@preact/preset-vite";
import { stylexPlugin } from "vite-plugin-stylex-dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [preact(), civet({ implicitExtension: false }), stylexPlugin()],
});

[nonzzz]

minimum recurrence?

[aspizu]

this is all i have

import * as stylex from @stylexjs/stylex


styles := stylex.create
  base:
    margin: 0
    padding: 0


export default function App()
  <div>
    <p>
      Hello, World!
    </p>
  </div>

[nonzzz]

It's JavaScript or JavaScript like language? AFAK JavaScript don't have variable := expr

[aspizu]

civet

should compile into:

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    margin: 0,
    padding: 0
  }
});

export default function App() {
  return (
    <div>
      <p>Hello, World!</p>
    </div>
  );
}

[nonzzz]

Oh i know why your local file ext is .civet so you should pass include option for this plugin. Using the follow reg exp can be work

include:  /\.(mjs|js|ts|civet|jsx|tsx)(\?.*|)$/,

[aspizu]

didn't work :(

[aspizu]

i do get stylex errors such as use of arrow function with return statement. but i still get the unhandled exception.

[nonzzz]

I'll take some time to look at the conversion process in between

[nonzzz]

@aspizu Sry for wait. I create a simple example in the project. the quick fix

import civetPlugin from '@danielx/civet/vite'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { stylexPlugin } from 'vite-plugin-stylex-dev'

export default defineConfig({
  // Fixme @stylexjs/stylex don't respect `runtimeInjection` so we should set `dev` as false
  plugins: [civetPlugin({}), react(), stylexPlugin({ include: /\.(mjs|js|ts|civet|jsx|tsx)(\?.*|)$/, dev: false })]
})

[nonzzz]

But i find civet's vite plugin is not a rigorous implementation,In rollup or vite we should translate us code in transform hook but it do the task at load hook so that it breaks the vite's interal pre build logic(because stylex at now don't have full esm exports) So the pre build logic can covert all commonjs pkg to esm chunk. It's funny.

[aspizu]

Does this mean that stylex compilation will be disabled?

[aspizu]

Doesn't seem to work with preact. Same error.

import civetPlugin from "@danielx/civet/vite";
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import { stylexPlugin } from "vite-plugin-stylex-dev";

export default defineConfig({
  // Fixme @stylexjs/stylex don't respect `runtimeInjection` so we should set `dev` as false
  plugins: [
    civetPlugin({ implicitExtension: false }),
    preact(),
    stylexPlugin({
      include: /\.(mjs|js|ts|civet|jsx|tsx)(\?.*|)$/,
      dev: false,
    }),
  ],
});

[edemaine]

@nonzzz Have you ever tried transforming non-JavaScript code in a transform hook? I've never gotten it to work, which isbwhy the Civet plugin is the way it is. Too much of Vite/Rollup assumes that it's working with JavaScript at every stage, or not JavaScript at all, so this was the best we could find. If you have more specific suggestions, though, we'd be happy to try them. Sadly the prebuild logic isn't overridable, so far as I know.

[nonzzz]

@edemaine Unfortunately my installation of the `@preact/preset-vite' failed. I had to use alias configuration to use preact and it worked fine

[aspizu]

The issue here is caused by civet, preact does work fine with stylex.

[nonzzz]

@nonzzz Have you ever tried transforming non-JavaScript code in a transform hook? I've never gotten it to work, which isbwhy the Civet plugin is the way it is. Too much of Vite/Rollup assumes that it's working with JavaScript at every stage, or not JavaScript at all, so this was the best we could find. If you have more specific suggestions, though, we'd be happy to try them. Sadly the prebuild logic isn't overridable, so far as I know.

As far as i can know transform hook can translate anything. The input code should be your original code, and it is assumed that the output code will be in JavaScript. Please ensure that the output adheres to the JavaScript syntax and requirements

[nonzzz]

@edemaine Have you tried examples/civet-demo ? It's work fine at my local :)

[nonzzz]

If civet can ensure the return result is javaScript syntax at load, I think the transform also be work fine no matter what plugin it is. But the problem is that we cannot ensure the order of the plugins so some bugs was happened.

[edemaine]

Oh, thanks for adding an example! I'll give it a try myself, and maybe link to it from the Civet website. Note that I'm not the person who raised the issue, just a Civet developer.

I agree that that's how transform is supposed to work according to docs, but it's not been our experience. If you know of any transpile-to-JS language that achieves this in a Vite plugin, I'd love to see and study it.

As you say, though, load is earlier than transform -- so presumably it should only help with the ordering? (Civet needs to run before stylex.)

[nonzzz]

@edemaine Unlike rollup,vite has it own internal plugins, vite have a pre build logic for development mode it convert all depend which from node_modules and rewrite original code like the fllow code

// from
//This module is a cjs pkg vite can't process them  in developement mode.it should be rewrite as
import _inject from '@stylexjs/inject' 
// to
// xxhash means pre build chunks who live at `node_modules/.vite` directory. This rewrite logic happens on `transform`hook. So civet vite plugin break it.
import _inject from 'xxhash'

According rollup plugin lifecycle But i'm not sure who cause the above error code. If i disable the implicitExtensionoption the vite:import-analysis can work fine otherwise something will go wrong unless i set dev:false for stylex plugin. This interesting thing seems to come from civet and vite's own plugins causing confusion in the parsing. I looked at civet's plugin code and i'm don't know why civet can't put complie logic in transform, As far as i can know if the complie logic put into transform hook, resolveId also can work fine( However unplugin is an universal plugin container for bundle tools and i'm a unplugin noob so i can't ensure what will happen if we change the logic.) But the demo work well in my local.