Unknown file extension ".jsx" #3923
Answered
by
stevenvachon
stevenvachon
asked this question in
Q&A
-
import { renderToStaticMarkup } from 'react-dom/server';
/**
* @param {import('@11ty/eleventy/UserConfig').default} config
*/
export default async (config) => {
config.addExtension('jsx', {
key: '11ty.js',
compile: function () {
return async function (data) {
return renderToStaticMarkup(await this.defaultRenderer(data));
};
},
});
return {
dir: { ... },
templateFormats: ['jsx', 'md'],
};
};yields: I copied the code from https://www.11ty.dev/docs/languages/jsx/ What's wrong? |
Beta Was this translation helpful? Give feedback.
Answered by
stevenvachon
Aug 14, 2025
Replies: 2 comments
-
|
And if I add the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
This works: (eleventy.config.ts) import { renderToStaticMarkup } from 'react-dom/server';
export default (config) => {
config.addExtension(['ts', 'tsx'], { key: '11ty.js' });
config.addTransform('compile tsx pages', function (content) {
if (
this.page.templateSyntax === 'tsx' &&
this.page.outputFileExtension === 'html'
) {
return `<!doctype html>${renderToStaticMarkup(content)}`;
} else {
return content;
}
});
return {
dir: { ... },
templateFormats: ['md', 'ts', 'tsx'],
};
};(package.json) {
"type": "module",
"devDependencies": {
"@11ty/eleventy": "^3.1.2",
"@types/react": "^19.1.10",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"tsx": "^4.20.4"
},
"scripts": {
"build": "tsx node_modules/.bin/eleventy --config=eleventy.config.ts"
}
}(tsconfig.json) {
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react",
"module": "nodenext"
},
"input": ["**/*.{ts,tsx}"]
} |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
stevenvachon
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This works:
(eleventy.config.ts)
(package.json)
{ "type": "module", "devDependencies": { "@11ty/eleventy": "^3.1.2", "@types/react": "^19.1.10", "react": "^19.1.1", "re…