.../config is a JavaScript header file (.h.js), but JavaScript header files should only be used for +config.h.js

[UROjQ6r80p]

Description

Hello,

I'm experimenting with creating my own custom little framework for my own usage.
I have pnpm monorepo with package react-meta-framework exporting +config.h.js
Then in renderer/+config.h.js I import it like this:

import reactMetaFramework from 'react-meta-framework/config';

export default {
    extends: reactMetaFramework
}

However it shows warning:

Should I be worried about it?
I don't have this warning when importing e.g. vike-react config.

Here is minimal repo for reproduction: https://github.com/UROjQ6r80p/vike-custom-framework-test/tree/main

[brillout]

See how vike-react is implemented.

[brillout]

Curious: what is it you're building?

[UROjQ6r80p]

Curious: what is it you're building?

I was looking for something working nicely with classic express app where I can e.g. fetch the data in the route and pass it into "page".
Next.js got rid of getServerSideProps in Nextjs > 13 and is not willing to add it in favor of creating Backend for Frontend and getting data via fetch, Astro.js is also problematic in that regard.
I was able to achieve what I want with Marko but ecosystem is way too small and it is used mainly by eBay, and well... it's not React.

I'm fairly sure I will use Vike in my future projects and I'm trying to build mini framework (only for my own usage) to minimize boilerplate aka "Zero config".

That's the experience I want to get in the end in my case:

1. pnpm add react-meta-framework react react-dom
2. Add middleware:

import createMiddleware from 'react-meta-framework/middleware';

app.use(await createMiddleware({ dev: true }))

app.get('/', async (req, res, next) => {
	try {
        // I know I can fetch data with `onBeforeRender` but for my own flow I prefer this
		res.renderPage('index', { someRandomData: 'anything' });
	} catch(err) {
		next(err);
	}
})

That's all.

I want to achieve it without need to explicitly create vite.config.js which I'm able to do with inline config.

Not sure how can I get rid of need to manually create +config.h.js in either renderer or pages folder extending my custom config.
It's great that we can have onRenderHtml, onRenderClient in node_modules but as far as I understand we need then to create +config.h.js manually and extend it with vike packs. It's not a big deal but I would like it to be there invisible somehow in the same way onRenderHTML is stored in node_modules etc. without it being in the actual project folder if I don't want to override it.

I'm much, much more excited about Vike than Astro and Next.
For example here was my proposal to Next.js: vercel/next.js#45174
Which is possible in Vike, the fact that I can use React in HTML-only mode and have +custom.js is amazing to me.

[UROjQ6r80p]

See how vike-react is implemented.

I thought I can combine vike-react with my own framework in this way, kind of treating vike-react as a base.

// react-meta-framework/renderer/+config.js
import vikeReact from 'vike-react'

export default {
    onRenderHtml: 'import:react-meta-framework/renderer/onRenderHtml:onRenderHtml',
    onRenderClient: 'import:react-meta-framework/renderer/onRenderClient:onRenderClient',
    extends: vikeReact
}

When I removed import vikeReact from 'vike-react' then the warning dissapears.

Looking at vite-react-query I now see I can extend it like this:

import reactMetaFramework from 'react-meta-framework';
import vikeReact from 'vike-react';

export default {
    extends: [vikeReact, reactMetaFramework]
}

[brillout]

AFAICT you should be able to achieve everything you mentioned.

Also note that there'll soon be a vike.config.js so won't need to create a +config.h.js file.

[lourot]

@UROjQ6r80p let us know how things go :) Also, contributions and sponsoring welcome 🙏