I'm using Vite as the build tool for a project and added the plugin "vite-plugin--html-purgecss" to use PurgeCSS. However on build I get the following error:
failed to load config from C:\Users\User Name\Documents\GitHub\project-template\vite.config.js
error during build:
TypeError: htmlPurge is not a function
at file:///C:/Users/User%20Name/Documents/GitHub/project-template/vite.config.js.timestamp-1663917972492.mjs:6:5
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
at async loadConfigFromBundledFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63470:21)
at async loadConfigFromFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63356:28)
at async resolveConfig (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:62973:28)
at async doBuild (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45640:20)
at async build (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45629:16)
at async CAC.<anonymous> (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/cli.js:748:9)
Vite.config.js is defined at the root of the project, and am running node 16.17.0. The template project isn't running any frameworks.
I've tried two config files:
import { defineConfig } from 'vite'
import htmlPurge from 'vite-plugin-html-purgecss'
export default defineConfig({
plugins: [
htmlPurge()
]
})
and
import htmlPurge from 'vite-plugin-html-purgecss'
export default {
plugins: [
htmlPurge()
]
}
I had the same issue. I think it's a compatibility issue or an update that no longer supports that plugin. Try running the following:
npm install vite-plugin-purgecss -D
vite.config.js file:
import { defineConfig } from "vite";
import htmlPurge from 'vite-plugin-purgecss';
export default defineConfig({
plugins: [
htmlPurge([htmlPurge()]),
],
});
Let me know if that works for you.
Related
I want to change the relative url imports for react-typescript project. Basically from this crap ../../../contexts/AuthContext to just clean #contexts/AuthContexts.
I have tried the following with tsconfig.json :
"compilerOptions": {
"paths": {
"#components/*": ["src/components/*"],
"#contexts/*": ["src/contexts/*"]
}
}
But I am still getting error like #contexts/AuthContexts not found. And yes I can confirm that there is a file called AuthContext in that location with exports as AuthProvider.
I have created this app with npm create vite#latest using typescript as a template.
Any help will be highly appreciated.
You need to set resolve.alias in vite.config.ts file
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import path from "path";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"#components": path.resolve(__dirname, "src/components"),
},
},
});
I am migrating some jest tests over to vitest and some of my tests are failing due to an import issue of an external package dependency in node_modules. Specifically: #package/dependency seems to be an ES Module but shipped in a CommonJS package.
vitest suggests this change to my config:
export default {
test: {
deps: {
inline: [
"#package"
]
}
}
}
Unfortunately, this fix does not work. Previously I resolved this issue with moduleNameMapper in jest where "#package/dependency": "#package/dependency/js" mapped to a valid import. I tried setting alias in both test.alias and resolve.alias, but neither works.
I am using Typescript in this project, and the rest of my test config looks like this:
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/setupTests.js",
}
// setupTests.js
import {configure} from 'enzyme/build';
import Adapter from 'enzyme-adapter-react-16/build';
configure({ adapter: new Adapter() });
What can I do to get around this? Thanks.
When running jest locally, it instantiates my app and runs tests without any issues.
When running jest inside github actions, I'm getting this error:
Error: Jest: Failed to parse the TypeScript config file /home/runner/work/myproject/myproject/jest.config.ts
TypeError: registerer.enabled is not a function
at readConfigFileAndSetRootDir (/home/runner/work/myproject/myproject/node_modules/#jest/core/node_modules/jest-config/build/readConfigFileAndSetRootDir.js:118:13)
the package.json script entry is just:"test": "jest"
and the jest.config.ts file is:
import tsJestUtils from 'ts-jest/utils'
import tsConf from './tsconfig.json'
const rootDir = __dirname
const { pathsToModuleNameMapper } = tsJestUtils
const {
compilerOptions: { paths },
} = tsConf
const config = {
preset: 'ts-jest',
testEnvironment: 'node',
roots: [`${rootDir}/src`],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
moduleNameMapper: pathsToModuleNameMapper(paths, {
prefix: `${rootDir}/src`,
}),
}
export default config
So I just bypassed use of typescript for my jest config entirely, and went with an equivalent jest.config.js file based on the docs. Works in Github Actions now, runner does not fail! \o/
I am still not sure what the issue was, but I think ts-node just wasn't processing the config file properly. I feel like the actual failure was with the attempt to load a .ts config file, specifically at this point in the source code when it tries to call registerer.enabled().
It can be fixed by upgrading to "ts-node": "^8.5.0"
I need to use vuetify in my nuxt js project as plugin. I've tried package #nuxtjs/vuetify but get error
Cannot assign to read only property 'base' of object '#'
I've install my nuxt project from official codesandbox online playground in local server and on shared hosting. All the time I got the same error. I tried install node modules using npm and yarn. How I can add fresh vuetify version to last version of nuxt js as plugin with npm package vuetify?
Install vuetify and #mdi/font
Create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from './../config/colors'
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
export default ctx => {
const vuetify = new Vuetify({
theme: {
themes: {
light: {
...colors
},
dark: {
// colors
}
}
}
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
Edit nuxt.config.js file by adding vuetify to plugins like this
{
...
plugins: ['~plugins/vuetify.js'],
...
}
I achieved this with the following:
npm install --save vuetify
create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Amend your nuxt.config.js:
plugins: ['~plugins/vuetify.js'],
build: {
vendor: ['vuetify']
}
There is a discussion of this issue here: https://github.com/nuxt-community/vuetify-module/issues/268
Fixing custom colours and specifying options in external files seem to affect this.
If you have colours specified in the options, replace primary: colors.blue with primary: colors.blue.base.
I have / had same issue. I simply made sure to use version 1.10.3 or below defined explicitly in package.json
"#nuxtjs/vuetify": "1.10.3", (not with the ^1.10.3)
I also noticed any version over this also adds an "undefined" 404 to the end of every url request. I posted on Nuxt / CMTY but they have a user base of zero people who answer any questions.
Choose Vuetify as ur UI Framework when initial a Nuxt project
Create a new file in plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
theme: {
light: true,
themes: {
light: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
})
Add the plugin config inside nuxt.config.js
export default {
plugins: ['~/plugins/vuetify.js'],
}
Restart server, npm run dev
An image example:
vuetify.js
Done!
you can do the following steps in order and finally use Vuetify components:
1- Setup vuetify
yarn add vuetify#next sass
2- Your package.json should now look similar to the following:
// package.json
"devDependencies": {
"nuxt": "3.0.0-rc.1"
},
"dependencies": {
"sass": "^1.51.0",
"vuetify": "^3.0.0-beta.1"
}
3- Creating your Vuetify plugin
You must create this file in the plugin folder and put these codes inside it.
// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
4- Configure Nuxt 2 or 3 to use our new plugin
In this section, you should put these codes in the nuxt.config.ts file like this
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})
5- Finally, in order to test that you have done the steps correctly, you can use this component in your code to see if Vuetify is installed correctly or not.
<v-btn>Button</v-btn>
Tip: If you have done these steps or you want to use a new component, in many cases it is better to stop and restart your project once.
I try to build Angular 4 app with server rendering side and language route path. All this base on Angular CLI in 1.5.0-rc1 version.
Everything work OK but I can't solve a problem with language in route.
I have two idea - one to make it like a parameter :lang in URL, but everywhere people advice me to use localize-router plugin. It look very good, but my npm run server can't start properly. In console I get an error:
/home/xxx/Projects/private/angular4-cli-seed/node_modules/localize-router/src/localize-router.config.js:1
(function (exports, require, module, __filename, __dirname) { import { Inject, OpaqueToken } from '#angular/core';
Here is my app-routing.module.ts:
import {NgModule, PLATFORM_ID, Inject, OpaqueToken} from '#angular/core';
import 'zone.js';
import 'reflect-metadata';
import { Routes, RouterModule } from '#angular/router';
import {AboutComponent} from './about/about.component';
import {HomeComponent} from './home/home.component';
import {LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader} from 'localize-router';
import {HttpClientModule, HttpClient} from '#angular/common/http';
import {TranslateService} from '#ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import { Location } from '#angular/common';
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
}
];
export function localizeFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings): LocalizeParser {
const browserLocalizeLoader = new ManualParserLoader(translate, location, settings, ['en', 'pl'], 'pl');
return browserLocalizeLoader;
}
#NgModule({
imports: [
RouterModule.forRoot(routes),
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: (localizeFactory),
deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
}
}),
],
exports: [RouterModule]
})
export class AppRoutingModule {
private static TranslateService: any;
}
Do you have any tips how can I solve it? I found some tips for Webpack (to use exclude list), but I want to use CLI because I don't know Webpack too well.
This problem is connected with library type - it's not a commonjs type, but ES6. More about this problem you can read here on GitHub.
To solve it you can contact the author of library what you want to use in Angular 4 Universal (with Angular CLI). They should recompile it in a proper way.
Another solution (more quick to realize) give me a #sjogren on GitHub. You can use babel.js to recompile library during a building process. To do this you should run:
npm install babel-cli --save
npm install babel-preset-env --save
npm install babel-preset-es2015 --save
and add this code in package.json:
"babel": {
"presets": [
"es2015"
]
},
Finally in package.json you should add to your scripts prestart script with code to recompile the library. In my example:
"scripts": {
"prestart": "node node_modules/babel-cli/bin/babel.js node_modules/localize-router --out-dir node_modules/localize-router --presets es2015"
"start": "......"
}
This worked fine for me, and I don't have an Unexpected Token Import error.