preact.config.js does not update babel config

[TbirdDuncan]

Same as title, a .babelrc.json does however work.

[rschristian]

How are you attempting to alter the config? We need a lot more information to help you. Vague titles are not problem descriptions.

You can alter the Babel config with the following:

preact.config.js

export default (config, env, helpers) => {
    const { rule } = helpers.getLoadersByName(config, 'babel')[0];
    const babelConfig = rule.options;

    babelConfig.plugins.push(
        'my-babel-plugin'
    );
}

[TbirdDuncan]

Attempting to change the config to be conducive to jest testing as jest errors out when rendering due to jsx, @babel/preset-react is needed...

export default (config, env, helpers, options) => {
  /** you can change the config here **/
  let { rule } = helpers.getLoadersByName(config, "babel-loader")[0];
  let babelConfig = rule.options;

  babelConfig.presets.push("@babel/preset-react");
};

[TbirdDuncan]

hmm, but there was no jest script, I'm sorry this is not making much sense. I went and installed jest seperately, and it can run simple tests successfully but rendering components is no bueno currently. Should I just remove all associations with jest entirely and then... 🤔

[TbirdDuncan]

https://github.com/preactjs-templates/simple/blob/master/template/package.json

Here's the scripts from the simple template:

  "scripts": {
    "build": "preact build",
    "serve": "sirv build --port 8080 --cors --single",
    "dev": "preact watch",
    "lint": "eslint src"
  },

[TbirdDuncan]

I figured jest had to be in there

[rschristian]

Simple has no testing setup. Part of the simplicity is that unnecessary items, like testing, have been cut out.

You can look at the default template for a testing setup.

[TbirdDuncan]

Okay! I got her up and running thank you!
Solution:

Deleted preact.config.js from root
Deleted .babelrc.json from root
updated package.json to:

{
"private": true,
"name": "todo3",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"build": "preact build",
"serve": "sirv build --port 8080 --cors --single",
"dev": "preact watch",
"lint": "eslint src",
"test": "jest"
},
"eslintConfig": {
"extends": "preact",
"ignorePatterns": [
"build/"
]
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@testing-library/preact": "^2.0.1",
"babel-jest": "^27.4.6",
"eslint": "^7.17.0",
"eslint-config-preact": "^1.3.0",
"jest": "^27.4.7",
"jest-preset-preact": "^4.0.5",
"sirv-cli": "^1.0.3"
},
"dependencies": {
"@reduxjs/toolkit": "^1.6.2",
"axios": "^0.25.0",
"core-js": "^3.21.0",
"preact": "^10.1.0",
"preact-cli": "^3.3.3",
"preact-render-to-string": "^5.1.2",
"react-redux": "^7.2.6",
"redux-saga": "^1.1.3",
"regenerator-runtime": "^0.13.9",
"web-vitals": "^1.0.1"
},
"jest": {
"preset": "jest-preset-preact"
}
}

and finally in my tests I imported :

import "core-js/stable";
import "regenerator-runtime/runtime";