Develop Reference

How do I remove vue spec files from vite config

I've succesfully added vite to my project. It builds fine for prodiction. However in Production I have an error
Uncaught ReferenceError: describe is not defined
at index.ba9d79ff.js:1119:1426
I then saw the my .spec files where being added. I thought vite would of handled the removal of the test files. I want to remove my .spec files from production.
but not having such luck. I'm using Vue 2 with vite. I added
production: {
exclude: ['src/components/**/*.{spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
},
but the files are still being added. Is there something more I need to do?
My config
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
// https://vitejs.dev/config/const
const path = require("path");
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
// Vuetify
VuetifyResolver(),
],
}),
],
resolve: {
extensions: [
".mjs",
".js",
".ts",
".jsx",
".tsx",
".json",
".vue",
".scss",
],
alias: {
"#": path.resolve(__dirname, "./src"),
json2csv: "json2csv/dist/json2csv.umd.js",
"~bootstrap": "bootstrap",
},
},
production: {
exclude: ['src/components/**/*.{spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
},
extensions: etc,
css: {
preprocessorOptions: {
scss: {
// additionalData: `#import "src/scss/app.scss";`,
// additionalData: `#import "src/scss/_variables.scss";`,
sourceMap: false,
additionalData(source, fp) {
// All scss files ending with imports.scss
// will not re-import additionalData
if (fp.endsWith("_variables.scss")) return source;
// Use additionalData from legacy nuxt scss options
// return `#import "#/assets/mixin.scss"; ${source}`;
return `#import "src/scss/_variables.scss"; ${source}`;
},
},
},
},
server: {
port: 8090,
},
});

How to autofix serverMiddleware files using eslint in NuxtJS?

i'am using #nuxtjs/eslint-module in NuxtJS. And i have no idea how to autoformat (on server side, not editor) serverMiddleware files using eslint and prettier. I have installed Nuxt by create-nuxt-app and added ExpressJS into ~/api folder (index.js and routes/test.js).
added to nuxt.config.js:
...
buildModules: [
'#nuxtjs/eslint-module',
],
...
...
eslint: {
fix: true
},
...
eslintrc.js contents:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '#babel/eslint-parser',
requireConfigFile: false
},
extends: [
'#nuxtjs',
'eslint:recommended',
// 'plugin:node/recommended',
'plugin:nuxt/recommended',
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
rules: {
semi: [2, 'never'],
'no-console': 'off',
'vue/max-attributes-per-line': 'off',
'prettier/prettier': ['error', {
htmlWhitespaceSensitivity: 'ignore',
semi: false,
singleQuote: true
}]
}
}
It works well and my nuxt files autofixed on save correctly, such as in ./layouts, /pages etc.
But after adding middleware (Express):
...
serverMiddleware: {
'/api': '~/api'
},
...
ESLint and its plugins not watch ~/api files for errors and dont autofixig them.
I tryed to add ~/api folder to watch property under build options, but this do not have effect.
...
build: {
watch: ['api'],
},
...
How to properly lint and autofix serverMiddleware files on server side not by IDE?

How to configure craco to use jsx?

I am using craco and trying to figure out how to configure jsx. I keep getting the following error
Support for the experimental syntax 'jsx' isn't currently enabled (4:17):
They suggest that I add `babel/preset-react or use #babel/plugin-syntax-jsx to the plugin section to enable parsing but I'm unsure how to do that.
To clarify, I am trying to use a src folder outside the root of my react-app
craco.config.js
module.exports = {
webpack: {
alias: {},
plugins: {
add: [] /* An array of plugins */,
remove:
[] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
},
configure: {
/* Any webpack configuration options: https://webpack.js.org/configuration */
},
configure: (webpackConfig, { env, paths }) => {
console.log("WEBPACK");
console.log(webpackConfig);
webpackConfig.entry =
"C:\\Users\\danie\\Desktop\\Code\\JS\\npm_packages\\source\\src\\index.js";
return webpackConfig;
},
},
babel: {
presets: [],
plugins: [],
loaderOptions: (babelLoaderOptions, { env, paths }) => {
console.log("BABEL");
console.log(babelLoaderOptions);
return babelLoaderOptions;
},
},
};

Figured out my issue by adding the preset to my config file
craco.config.js
babel: {
presets: ['#babel/preset-react'],
// plugins: [],
loaderOptions: (babelLoaderOptions, { env, paths }) => {
console.log("BABEL");
console.log(babelLoaderOptions);
return babelLoaderOptions;
},
},

rollup not detecting #import syntax for scss files

i need rollup to bundle my sass files, like variables, mixins etc.
index.scss contains
#import "./scss/variables.scss";
and index.ts contains
import "./index.scss";
export { Button } from "./components/Button";
however the bundle does NOT have any code from variables.scss, and if i use a variable inside of say Button.scss i get this error
[!] (plugin postcss) Error: Undefined variable: "$shady-lady".
my rollup config
export default {
input: "./src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
cleaner({
targets: ["./lib"],
}),
postcss({
extract: true,
modules: true,
minimize: true,
plugins: [postcssImport(), autoprefixer()],
extensions: [".scss"],
}),
peerDepsExternal(),
commonjs(),
typescript({
exclude: ["**/*.stories.tsx", "**/*.test.tsx"],
}),
],
};

so the problem wasn't with the #import syntax. it was rollup not handling global resources files.
the solution was to remove the import './index.scss' from index.ts and just use this package
https://github.com/hytromo/rollup-plugin-postcss-retain-sass-data#readme

after phoenix 1.3 upgrade app.js are not loaded

I updated my phoenix 1.2 to 1.3 follwing the phoenix upgrade description.
Now assets/js/app.js can't be loaded:
Uncaught Error: Cannot find module 'js/app' from '/'
After debugging the problem, I found that the expected module is app not js/app.
When I change the module name in the brunch-config.js autoRequire modules to ["app"] instead of ["js/app"] it works. I don't understand what is the problem or what I did in my app, that the default settings don't work.
Here my assets/brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["../priv/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
},
sass: {
options: {
includePaths: [
"node_modules/bootstrap-sass/assets/stylesheets",
"node_modules/font-awesome/scss"
], // tell sass-brunch where to look for files to #import
precision: 8 // minimum precision required by bootstrap-sass
}
}
//sass: {
// mode: "native" // This is the important part!
// },
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
};
And my assets/js/app.js is here:
import "phoenix_html"
import "./datetimepicker"
thanks for any help, tipps or ideas to understand/solve the problem.

The problem is related to the brunch version.
updating brunch to:
brunch#2.10.10
solved the problem.