I have tried the same configuration on different platforms and they all work, while in esbuild it leads to an error
esbuild:
esbuild.build({
entryPoints: ['node_modules/monaco-editor/esm/vs/editor/editor.worker.js'],
outfile: outfile,
bundle: true,
format: 'iife'
}).then(() => {
console.log('Build complete, save at ' + outfile)
})
I then referenced it in the project as follows
self.MonacoEnvironment = {
getWorker() {
return new Worker('/assets/editor.worker.js')
},
}
import(
'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
).then(() => {
import('monaco-editor').then(({ editor }) => {
editor.create(container.current, {
language: 'typescript',
})
})
})
Eventually the console reports a runtime error and I find that the worker file has been referenced correctly and the error seems to be due to walking this code
if (!initialized) {
initialize(null);
}
I just need to change the directory of the imported editors to api
import('monaco-editor/esm/vs/editor/editor.api').then(({ editor }) => {
editor.create(container.current, {
language: 'typescript',
})
})
Related
When exporting styles from the Swiper library ( import 'swiper/css'; ), I catch that error, no problem with swiper.js export. I've seen articles explaining how to solve this problem for webpack, where you need to add the following code to webpack.config.js:
{
test: /\.(sass|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader'],
}
But, the problem is that I use gulp build and don't know the analogue of this file for my build, where exactly to insert this code so as not to disrupt the work of the build itself? If it helps, I'm using the gulp build by Фрилансер по жизни.
Files where the code is supposed to be inserted:
SCSS.JS:
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';
import cleanCss from 'gulp-clean-css'; // Сжатие CSS файла
import webpcss from 'gulp-webpcss'; // Вывод WEBP изображений
import autoprefixer from 'gulp-autoprefixer'; // Добавление вендорных префиксов
import groupCssMediaQueries from 'gulp-group-css-media-queries'; // Групировка медиа запросов
const sass = gulpSass(dartSass);
export const scss = () => {
return app.gulp.src(app.path.src.scss, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "SCSS",
message: "Error: <%= error.message %>"
})))
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(app.plugins.replace(/#img\//g, '../img/'))
.pipe(
app.plugins.if(
app.isBuild,
groupCssMediaQueries()
)
)
.pipe(
app.plugins.if(
app.isBuild,
autoprefixer({
grid: true,
overrideBrowserslist: ["last 3 versions"],
cascade: true
})
)
)
.pipe(
app.plugins.if(
app.isBuild,
webpcss(
{
webpClass: ".webp",
noWebpClass: ".no-webp"
}
)
)
)
.pipe(app.gulp.dest(app.path.build.css))
.pipe(
app.plugins.if(
app.isBuild,
cleanCss()
)
)
.pipe(rename({
extname: ".min.css"
}))
.pipe(app.gulp.dest(app.path.build.css))
.pipe(app.plugins.browsersync.stream());
}
JS.JS:
import webpack from "webpack-stream";
export const js = () => {
return app.gulp.src(app.path.src.js, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "JS",
message: "Error: <%= error.message %>"
}))
)
.pipe(webpack({
mode: app.isBuild ? 'production' : 'development',
output: {
filename: 'app.min.js',
}
}))
.pipe(app.gulp.dest(app.path.build.js))
.pipe(app.plugins.browsersync.stream());
}
If you need more information, please let me know, thanks in advance!
I want to test my file uploading function using Cypress-file-upload but I hurt myself against .attachFile is not a function
I tried two solutions and I still can't make it works :
// 1st one, "find file input" works
it('find file input', () => {
cy.get('input[type="file"')
})
const fileName = 'french_tweets_split.csv';
it('Testing csv uploading', () => {
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get("input[type='file']").attachFile({ fileContent, fileName, mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', encoding:'utf8' })
})
})
// 2nd one, "find file input" works
it('find file input', () => {
cy.get('input[type="file"')
})
it('Testing csv uploading', () => {
cy.fixture('french_tweets_split.csv').then(fileContent => {
cy.get('input[type="file"]').attachFile({
fileContent: fileContent.toString(),
fileName: 'french_tweets_split.csv',
mimeType: 'text/csv'
})
})
})
What am I doing wrong ?
You have to import the package:
support/index.js
import 'cypress-file-upload';
You need to Install cypress-file-upload dev dependency first:
npm i cypress-file-upload --save-dev
Then import it in cypress/support/index.js
import 'cypress-file-upload'
I am working with TypeScript. I had to import it in support/index.ts.
Follow below steps-
Install "npm i cypress-file-upload --save-dev"
In support/index.js and support/commands.js add > import 'cypress-file-upload';
Use the below code snippet
cy.fixture('video.mp4')
.then(fileContent => {
cy.get('.qq-uploader-selector > input').attachFile({
fileContent,
fileName: 'video.mp4',
mimeType: 'video/mp4',
encoding: 'utf8'
})
})
NOTE: Use ".attachFile" along with get method instead of ".upload" to avoid "cy.get(...).upload is not a function"
I have a working website on my machine. Next can run it in the development mode and also build in the production one. But the problem is that on the server's machine it raises an error:
> Build error occurred
TypeError: Cannot destructure property 'serverRuntimeConfig' of 'next_config__WEBPACK_IMPORTED_MODULE_1___default(...)(...)' as it is undefined.
at Object.aorh (/home/MyInspire-ph.ru-v4/.next/server/pages/
Package version is the same, and it does work on my machine. How can I fix it?
Here's my config file
const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = phase => {
return {
trailingSlash: true,
images: {
domain: ['localhost'],
},
publicRuntimeConfig: {
dev: phase === PHASE_DEVELOPMENT_SERVER,
},
serverRuntimeConfig: {
rootDir: __dirname.replace(/\\/g, '/'),
telegram: {
token: 'sometoken',
usersFile: 'somefile',
},
},
webpack: config => {
config.resolve.alias['#sass'] = path.resolve(__dirname, 'sass');
return config;
},
};
};
I know there are a lot of questions on this already, but I'm posting because things were working totally fine until I changed from UglifyJS to Terser as I wanted to be able to compress ES6 code.
I'm returning the streams and using done() where relevant as well, yet I am getting this error when running gulp on the command line?
Here is the relevant section where I am using Terser:
var terser_options = {
compress: {
keep_fnames: true
},
mangle: false,
keep_classnames: true,
keep_fnames: true
};
gulp.task('uglify', gulp.series('scripts', function() {
let stream;
for (const bundle of bundleFolders) {
// Get just the last directory of 'js/dev/bootstrap', 'js/dev/lib`, etc.
let thisBundle = path.basename(bundle);
if (thisBundle === 'bootstrap') {
stream = merge2(
gulp.src(bootstrap_files)
.pipe(terser(terser_options))
.pipe(concat(thisBundle + '.min.js'))
.pipe(gulp.dest('./js'))
);
} else {
stream = gulp.src(bundle + "**/*.js")
.pipe(gulpif('!**/*.min.js', terser(terser_options)))
.pipe(concat(thisBundle + '.min.js'))
.pipe(gulp.dest('./js'));
}
}
return stream;
}));
Here is the majority of the code:
var bootstrap_files = [
// We have to set the bootstrap lines separately as some need to go before others
'js/dev/bootstrap/alert.js',
'js/dev/bootstrap/collapse.js',
'js/dev/bootstrap/tooltip.js',
'js/dev/bootstrap/popover.js',
'js/dev/bootstrap/tab.js',
'js/dev/bootstrap/transition.js'
];
const bundleFolders = glob.sync('js/dev/*/'); // returns an array of folders
var terser_options = {
compress: {
keep_fnames: true
},
mangle: false,
keep_classnames: true,
keep_fnames: true
};
gulp.task('scripts', () => {
let stream;
for (const bundle of bundleFolders) {
// Get just the last directory of 'js/dev/bootstrap', 'js/dev/lib`, etc.
let thisBundle = path.basename(bundle);
if (thisBundle === 'bootstrap') {
stream = merge2(
gulp.src(bootstrap_files)
.pipe(sourcemaps.init())
.pipe(concat(thisBundle + '.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'))
);
} else {
stream = gulp.src(bundle + "**/*.js")
.pipe(sourcemaps.init())
.pipe(concat(thisBundle + '.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'));
}
}
return stream;
});
gulp.task('uglify', gulp.series('scripts', function() {
let stream;
for (const bundle of bundleFolders) {
// Get just the last directory of 'js/dev/bootstrap', 'js/dev/lib`, etc.
let thisBundle = path.basename(bundle);
if (thisBundle === 'bootstrap') {
stream = merge2(
gulp.src(bootstrap_files)
.pipe(terser(terser_options))
.pipe(concat(thisBundle + '.min.js'))
.pipe(gulp.dest('./js'))
);
} else {
stream = gulp.src(bundle + "**/*.js")
.pipe(gulpif('!**/*.min.js', terser(terser_options)))
.pipe(concat(thisBundle + '.min.js'))
.pipe(gulp.dest('./js'));
}
}
return stream;
}));
// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', gulp.series('uglify', function (done) {
browserSync.reload();
done();
}));
/* Creates the standard version */
gulp.task('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream());
});
/* Creates the minified version */
gulp.task('css-minify', gulp.series('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact' // Options: nested, expanded, compact, compressed
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer({
cascade: false
}),
]))
.pipe(cleanCSS({
advanced: false,
aggressiveMerging: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'));
}));
gulp.task('browser-sync', function(done) {
browserSync.init({
open: 'external',
proxy: site_url,
host: site_url,
// port: 5000,
browser: "chrome",
});
done();
});
gulp.task('watch', gulp.series('browser-sync', function() {
gulp.watch('scss/**/*.scss', gulp.series('css-minify'));
gulp.watch('js/dev/**/*.js', gulp.series('js-watch'));
}));
gulp.task('default', gulp.series('js-watch', 'css-minify'));
Edit: I did do a npm install when I added terser as well, so it may have updated gulp, but I have been using 4.* for a while now, specifically this is the version line from my package.json: ^4.0.2
Edit 2: Seems 4.0.2 still is the latest version and hasn't been updated in at least a year, so I would still be on the same version of Gulp.
Edit3: I just updated the gulp.js file on another project to use terser and it seemed to work fine. The gulp.js files are exactly the same.
What is the issue here?
Ok, strange one but figured out the issue.
Unsure why it happened, but it seems it was having issues and giving this error because my js/dev directory was empty.
Not sure how the files got deleted, but fortunately I was able to restore them, but at the end of the day it wasn't a very helpful error message.
If you're getting this error and it doesn't appear to be for the reasons stated by the error message, check your source directory/files actually exist.
Now it works fine.
How assets section is working ?
During build it gives expected result - languages extended.
But once running webpack-dev-server it gives assets from file (not extended) - assets is built.
As i know webpack should load all assets into memory, why it gives assets from file and not built assets ?
Thanks
compiler.plugin('emit', function (compilation, callback) {
console.log('\nBuilding Languages...\n');
getBaseLanguages(function (files) {
Promise
.all(files.map(function (file) {
return languageBuilder.build(file).then(setAsset);
}))
.then(function () {
callback();
});
});
function setAsset(langs) {
langs.forEach(function (lang) {
compilation.assets[lang.path] = {
source: function () {
return JSON.stringify(lang.file);
},
size: function () {
return lang.file.length;
}
};
});
}
});