I am trying to define a mixin in my "_mixins.css" file but my text editor has a red line under "define-mixin" and I am not sure why. These are my dependencies
"devDependencies": {
"autoprefixer": "^10.4.12",
"css-loader": "^6.7.1",
"postcss-import": "^15.0.0",
"postcss-mixins": "^9.0.4",
"postcss-nested": "^5.0.6",
"postcss-simple-vars": "^7.0.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
And this is my webpack.config.js
const postCSSPlugins = [
require("postcss-import"),
require("postcss-mixins"),
require("postcss-simple-vars"),
require("postcss-nested"),
require("autoprefixer")
];
And my styles.css file
#import'normalize.css';
#import'base/_global';
#import'base/_variables';
#import'base/_mixins';
#import'modules/_large-hero';
#import'modules/_btn';
Not sure what the problem is I have scoured the internet for hours it seems like no one else has this problem I am not sure what to do at this point.
Related
I'm working on Wdio-Chai-Cucumber based e2e-testsuite that ran fine untill I had to update the chromedriver.
This is my stack:
"devDependencies": {
"#types/chai": "^4.2.13",
"#types/cucumber": "^6.0.1",
"#types/node": "^14.11.8",
"#types/webdriverio": "^5.0.0",
"#wdio/cli": "6.6.2",
"#wdio/cucumber-framework": "^6.10.6",
"#wdio/local-runner": "6.6.2",
"#wdio/spec-reporter": "6.8.1",
"#wdio/sync": "6.10.4",
"chai": "^4.2.0",
"chromedriver": "90.0.1",
"cucumber": "^7.0.0-rc.0",
"cucumber-html-reporter": "5.2.0",
"del-cli": "^3.0.1",
"eslint": "^7.10.0",
"wdio-chromedriver-service": "^7.1.0",
"wdio-cucumber-parallel-execution": "^3.6.14",
"wdio-cucumberjs-json-reporter": "2.0.2",
"wdio-docker-service": "^3.1.2"
},
"dependencies": {
"ts-node": "^9.0.0",
"typescript": "^4.0.3"
},
After updating the projects chromedriver from v90 to v98 I get the following error when I run "yarn run test"
#wdio/runner: TypeError: hooks.map is not a function at Object.executeHooksWithArgs
There is a log-message indicating that both cucumber#6.0.5 and cucumber#7.0.0-rc.0 have moved to #cucumber/cucumber, so I tried
yarn remove cucumber
yarn remove #types/cucumber
yarn add -D #cucumber/cucumber
But I still get the same error message when trying to run the test, like nothing has changed. What am I doing wrong?
I am trying to add web3 functionality to my svelte app, but experience problems when importing the web3 module. Here is my package.json for reference:
{
"version": "0.0.1",
"type": "module",
"scripts": {
"test": "mocha",
"start": "PORT=3000 node build/",
"dev": "svelte-kit dev",
"dev-host": "svelte-kit dev --host",
"build": "svelte-kit build",
"preview": "svelte-kit preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"#sveltejs/adapter-node": "^1.0.0-next.55",
"#sveltejs/kit": "next",
"#types/cookie": "^0.4.1",
"#typescript-eslint/eslint-plugin": "^4.31.1",
"#typescript-eslint/parser": "^4.31.1",
"dayjs": "^1.10.4",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"js-yaml": "^3.14.1",
"jsonwebtoken": "^8.5.1",
"password-hash": "^1.2.2",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"rehype-highlight": "^4.1.0",
"rehype-stringify": "^8.0.0",
"remark-frontmatter": "^3.0.0",
"remark-gfm": "^1.0.0",
"remark-parse": "^9.0.0",
"remark-rehype": "^8.0.0",
"sass": "^1.0.0",
"svelte": "^3.34.0",
"svelte-check": "^2.2.6",
"svelte-preprocess": "^4.9.4",
"to-vfile": "^6.1.0",
"tslib": "^2.3.1",
"typescript": "^4.4.3",
"unified": "^9.2.1",
"vite": "^2.1.0",
"mocha": "^9.1.2"
},
"dependencies": {
"#fontsource/fira-mono": "^4.5.0",
"better-sqlite3": "^7.4.4",
"cookie": "^0.4.1",
"solc": "^0.4.17",
"web3": "^1.6.0",
"#truffle/hdwallet-provider": "^1.5.1",
"fs-extra": "^10.0.0",
"ganache-cli": "^6.12.2"
}
}
I am basically trying to fetch a contract based on a addres
import web from './web3';
import Contract from './build/Contract.json';
export default (address) => {
return new web.eth.Contract(
JSON.parse(Contract.interface),
address
);
};
In my component.svelte i do:
<script>
import Contract from "../../../etherum/contract.js";
</script>
Which gives me the following error:
util.js:109 Uncaught (in promise) ReferenceError: process is not defined
at node_modules/util/util.js (util.js:109)
at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
at node_modules/web3-core-requestmanager/lib/index.js (index.js:20)
at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
at node_modules/web3-core/lib/index.js (index.js:22)
at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
at node_modules/web3/lib/index.js (index.js:29)
at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
at dep:web3:1
node_modules/util/util.js # util.js:109
__require2 # chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3-core-requestmanager/lib/index.js # index.js:20
__require2 # chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3-core/lib/index.js # index.js:22
__require2 # chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3/lib/index.js # index.js:29
__require2 # chunk-VPFHXPC5.js?v=bd5ef6bd:36
(anonymous) # dep:web3:1
await in (anonymous) (async)
(anonymous) # (index):273
The following way of doing imports in an react component works with this code:
import Contract from "../../ethereum/contract";
static async getInitialProps(props) {
const campaign = Contract(props.query.address);
What's the difference between how React handles this vs sveltekit?
And how do I solve this?
I was trying to use a secret dotenv environment variable via process.env.MYVAR inside a (vite-powered) sveltekit app, and learned that the right way to do that now in sveltekit is to import { env } from '$env/dynamic/private'; and only access it within a +page.server.js file's PageServerLoad() function
I found the best solution.
The problem is because you lose window.process somewhere in the development environment, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app
window.process = {
...window.process,
};
I ended up with using svelte-web3 module instead.
I had the same problem and ran across this issue: https://github.com/vitejs/vite/issues/3817
In contradiction to this proposed solution, I found out that adding the following code in +layout.svelte instead of app.html is a working solution:
import process from "process";
import { Buffer } from "buffer";
import EventEmitter from "events";
import { browser } from "$app/environment";
if(browser) {
window.Buffer = Buffer;
window.process = process;
(window as any).EventEmitter = EventEmitter;
window.global = window
}
I am compiling with Babel for the development of Google App Script.
Because Google App Script does not correspond ES6 grammar.
I like the ES6 set type, so I tried using ES6's new Set () , but it does not transpile and it is left as it is.
How can I transfer to ES5?
The package.json is as follows.
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-es5-property-mutators": "^6.24.1",
"babel-preset-env": "^1.7.0",
"child_process": "^1.0.2",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-googleappsscript": "^1.0.1",
"eslint-plugin-import": "^2.12.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
}
Set is polyfillable. Features that can be polyfilled aren't transpiled.
core-js, babel-polyfill (it uses core-js internally) or any other ES6 polyfill can be used for this purpose.
I have updated code that worked fine with Angular 5.5/rxJS5.5 using the new pipe method to Angular 6/rxJS6 using the rxjs-lint package and the following commands
npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p tsconfig.json
Imports etc have been amended as expected but now the code that worked fine with v5 of Angular/5.5 of RxJS is erroring with the error:
error TS2339: Property 'pipe' does not exist on type 'OperatorFunction<{}, {} | RouterEvent | RouteConfigLoadStart | RouteConfigLoadEnd | ChildActivati...'.
I have removed the rxjs6-compat package but it makes no difference. It's almost as if the build thinks it's got an earlier version of rxJS than v5.5. package.json used with npm install looks like this...
"dependencies": {
"#angular/animations": "^6.0.2",
"#angular/cdk": "^6.0.2",
"#angular/common": "^6.0.2",
"#angular/compiler": "^6.0.2",
"#angular/core": "^6.0.2",
"#angular/flex-layout": "^6.0.0-beta.15",
"#angular/forms": "^6.0.2",
"#angular/http": "^6.0.2",
"#angular/material": "^6.0.2",
"#angular/platform-browser": "^6.0.2",
"#angular/platform-browser-dynamic": "^6.0.2",
"#angular/router": "^6.0.2",
"#ngrx/effects": "^6.0.0-beta.3",
"#ngrx/entity": "^6.0.0-beta.3",
"#ngrx/router-store": "^6.0.0-beta.3",
"#ngrx/store": "^6.0.0-beta.3",
"#ngrx/store-devtools": "^6.0.0-beta.3",
"#ngx-translate/core": "^9.0.1",
"core-js": "^2.5.2",
"hammerjs": "^2.0.8",
"lodash": "^4.17.4",
"material-design-icons-iconfont": "^3.0.3",
"nsp": "^3.2.1",
"passport": "^0.4.0",
"passport-azure-ad": "^3.0.12",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
The import for rxjs operators are in rxjs6 format:
import { filter, map, merge, mergeMap } from 'rxjs/operators';
The statement that worked but now gives this error is:
// Change page title on navigation or language change, based on route data
merge(this.translateService.onLangChange, onNavigationEnd)
.pipe(
map(() => {
let route = this.activatedRoute;
while (route.firstChild) {
route = route.firstChild;
}
return route;
}),
filter(route => route.outlet === 'primary'),
mergeMap(route => route.data)
)
.subscribe(event => {
const title = event['title'];
if (title) {
this.titleService.setTitle(this.translateService.instant(title));
}
});
What have I missed? Why is the pipe causing this error now where it was fine with rxJS 5.5?
You should import merge like this:
import { merge } from 'rxjs';
The merge operator should be imported from "rxjs/observable".
Like this
import { merge } from "rxjs/observable/merge";
Replace
merge(this.translateService.onLangChange, onNavigationEnd).pipe(
with this
this.router.events.pipe(filter(event => event instanceof NavigationEnd),
map(() => {
let route = this.activatedRoute;
The error is coming from the postcss plugin, I think I may have written it incorrectly.
I'm trying to add cssnano and autoprefixer to the postcss plugin.
gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
throw new Error(i + ' is not a PostCSS plugin');
^
Error: [object Object] is not a PostCSS plugin
at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:300:12)
at writeOrBuffer (_stream_writable.js:286:5)
at Transform.Writable.write (_stream_writable.js:214:11)
at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$
My code:
// Dependancies
var gulp = require('gulp'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
nano = require('cssnano'),
del = require('del'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass');
// Styles
gulp.task('styles', function(){
gulp.src('sass/main.scss')
.pipe(sass())
.pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), nano()]))
.pipe(gulp.dest('css/'));
gulp.watch('sass/**/*.scss', ['styles']);
});
// Tasks
gulp.task('default', ['styles']);
#rizkit - I found the fix and it's simple. Just run npm i -d postcss and the problem is solved.
Basically, you need both gulp-postcss and postcss plugins in your dependencies for this to work correctly. I'm assuming the gulp-postcss plugin will need to update the postcss package reference in the project to fix it properly, so we only need to include gulp-postcss in the future.
You are using the gulp-autoprefixer package. That's simply a wrapper around the original autoprefixer package that turns it into a gulp plugin, so you can do .pipe(autoprefixer()).
However postcss expects the original package itself, not the gulp plugin.
So instead of this:
autoprefixer = require('gulp-autoprefixer'),
You need to install the autoprefixer package and do this:
autoprefixer = require('autoprefixer'),
Tailwindcss & React issue
For anyone facing the above issue while setting up a react project with tailwindcss, running npm i postcss -D worked for me.
If you use autoprefixer 10 you might stumble upon that problem again, there is a github issue related to that with some links and explanations: https://github.com/postcss/autoprefixer/issues/1358
tl;dr:
for postcss-cli and gulp-postcss you have to wait for an update, for PostStylus you might never get an update.
or add postcss as a devDependency
In my case I was still getting this error along with cannot find build-manifest.json
when I upgraded to Next js v 10 and upgraded tailwind, autoprefixer and postcss.
I had to upgrade yarn as well to finally get rid of the errors.
The updated dev dependencies in my package.json were as:
"devDependencies": {
"autoprefixer": "^10.2.6",
"babel-plugin-inline-react-svg": "^1.1.1",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
Add below minimum devDependencies in your package.json
"#babel/core": "^7.8.7",
"#babel/preset-env": "^7.8.7",
"babel-preset-env": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"gulp": "4",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-eslint": "^6.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-mode": "^1.0.2",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylelint": "^13.0.0",
"gulp-uglify": "^3.0.2",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.17.2"