Monaca Editor syntax highlighting is ok, but editor doesn't show any errors - editor

Syntax highlighting is ok, but doesn't show any errors.
Line 5 should show an error in red at end of the line in editor, but not.
Why could that be?
I'm using monaco webpack plugin, with these config.
index.js
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript';
import 'monaco-editor/esm/vs/basic-languages/python/python';
monaco.editor.create(document.getElementById('duzenleyici'), {
value: ``,
language: 'python',
theme: 'vs-dark',
wordWrap: true,
automaticLayout: true,
});
webpack-config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'monaco.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
use: ['file-loader'],
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'python'],
features: ['find', 'bracketMatching', 'comment', 'folding', 'suggest', 'contextmenu', 'coreCommands', 'codeAction', 'clipboard', 'linesOperations', 'suggest', 'wordHighlighter'],
globalAPI: true,
// publicPath: '/',
}),
],
};

In index.js :
`
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
});
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true
});
`
In webpack-config.js plugins key:
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript']
})

Related

How add rollupNodePolyFill to electron.vite.configs

I need excute 'twilio-client' on electron project
import Twilio from 'twilio-client';
// this line broken when run electron-vite preview or builded app version
const device = new Twilio.Device();
device.setup('xyls', {
debug: true
});
console.log(device);
When I run my app with electron-vite preview or after build, I got an error:
Uncaught TypeError: Failed to resolve module specifier "events"
This also happened when it was executed:
electron-vite dev --watch
I added nodePolifill plugins now it works in dev mode, but on preview or build doesn't
The plugin 'rollup-plugin-node-polyfills' doesn't works on build.rollupOptions.plugins
I need help
My electron.vite.configs.ts:
import { resolve, normalize, dirname } from 'path'
import { defineConfig } from 'electron-vite'
import injectProcessEnvPlugin from 'rollup-plugin-inject-process-env'
import tsconfigPathsPlugin from 'vite-tsconfig-paths'
import reactPlugin from '#vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import { main, resources } from './package.json'
const [nodeModules, devFolder] = normalize(dirname(main)).split(/\/|\\/g)
const devPath = [nodeModules, devFolder].join('/')
const tsconfigPaths = tsconfigPathsPlugin({
projects: [resolve('tsconfig.json')],
})
export default defineConfig({
main: {
plugins: [tsconfigPaths],
build: {
rollupOptions: {
input: {
index: resolve('src/main/index.ts'),
},
output: {
dir: resolve(devPath, 'main'),
},
},
},
},
preload: {
plugins: [tsconfigPaths],
build: {
outDir: resolve(devPath, 'preload'),
},
},
renderer: {
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.platform': JSON.stringify(process.platform),
},
server: {
port: 4927,
},
publicDir: resolve(resources, 'public'),
plugins: [
tsconfigPaths,
reactPlugin(),
],
resolve: {
alias: {
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain',
events: 'rollup-plugin-node-polyfills/polyfills/events',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6', // add buffer
process: 'rollup-plugin-node-polyfills/polyfills/process-es6', // add process
}
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
]
}
},
worker: {
format: "es",
},
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill() //this line doesn't works
],
input: {
index: resolve('src/renderer/index.html'),
},
output: {
format: "esm",
dir: resolve(devPath, 'renderer'),
},
},
},
},
})
and the is my project repostitory:
https://github.com/caioregatieri/app-electron
I tried add many polyfills, add twilio import on preload and export to render with
contextBridge.exposeInMainWorld('Twilio', Twilio)
I solved it with:
electron.vite.config.ts
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill,
],
},
},
and this:
index.html
<script>
global = globalThis;
</script>

No such file or directory, when using Vite and Antd Pro Layout

No such file or directory, when using Vite and Antd Pro Layout
This is file vite.config.ts:
import { defineConfig } from 'vite';
import reactRefresh from '#vitejs/plugin-react-refresh';
import path from 'path';
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => {
return `antd/lib/${name}/style/index.less`;
},
},
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...{
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
},
},
},
},
resolve: {
alias: [
{
find: /^~/,
replacement: path.resolve(__dirname, 'src'),
},
],
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
});
This is my config to using antd, antd-pro-layout with vite.
But I received the error:
[vite] Internal server error: ENOENT: no such file or directory, open
'/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less'
Can someone help me to fix it?
I had some problems when using React + Antd in Vite.
Thanks for #theprimone for the answer. But the answer is incomplete. I will complete the answer here.
First time, add additional config to Less Preprocessor:
Add this config to your vite.config.js file:
{
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}
Second, setting module aliases to fix Less #import problem:
Again, add the following config into your vite.config.js file:
{
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
}
Last, install vite-plugin-imp plugin to solve Antd ES problem:
Install the vite-plugin-imp dependencies:
pnpm add -D vite-plugin-imp
# or
npm i -D vite-plugin-imp
then, setup the plugin in your vite.config.js file:
{
plugins: [
// React plugin here
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
];
}
The final configuration in vite.config.js file will look like this:
import { defineConfig } from "vite";
import reactRefresh from '#vitejs/plugin-react-refresh';
import vitePluginImp from "vite-plugin-imp";
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
});
Also work with #preact/preset-vite.
Ref:
https://github.com/theprimone/vite-react
https://github.com/ant-design/ant-design/issues/7850
https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
Try to import antd styles like this:
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
More usage of Vite + React + Ant Design or other UI Library, this repo theprimone/vite-react might give you more or less inspiration.

Vue cli. How to build with the same hash

i have a problem with hashes in vue cli build.
And now to the details.
I build my app, and in dist folder i see my files with names like
app.dsadas.js, chunk-1-dsadaas.js etc.. all looks good.
But i build my app in docker images, there may be 2 or more, and i need all this images with the same hashes in filenames, but it is not.
This 'webpack-md5-hash' plugin helped me with this problem, but its very old solution, works with warnings.
Help pls find solution for webpack 4.
This is my vue config file:
const path = require('path');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
function resolve(dir) {
return path.resolve(__dirname, dir);
}
module.exports = {
assetsDir: 'static',
runtimeCompiler: true,
lintOnSave: process.env.NODE_ENV !== 'production',
devServer: {
overlay: {
warnings: true,
errors: true,
},
},
configureWebpack: {
performance: {
hints: false,
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'#': resolve('src'),
utils: resolve('src/utils'),
api: resolve('src/api'),
defaultStates: resolve('src/store/modules/defaultStates'),
router: resolve('src/router'),
store: resolve('src/store'),
config: resolve('src/config'),
helpers: resolve('src/store/modules/helpers'),
constants: resolve('src/constants'),
mixins: resolve('src/mixins'),
},
},
plugins: [
new VuetifyLoaderPlugin(),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8,
}),
],
},
};

ng-bootstrap AoT build failure with Unexpected Token and missing loader

I am trying to use ng-bootstrap library in my project. Runs fine with webpackdevserver and jit build but aot build throw errors similar to following
Module parse failed: E:\SVNCode\Learning\spa\aot\node_modules\#ng-
bootstrap\ng-bootstrap\alert\alert.ngfactory.ts Unexpected token (13:21)
You may need an appropriate loader to handle this file type.
I have searched for the issue but the only reference related to ng-bootstrap was ticket no. #1381 on github, which was closed without any further details. So, I believe that I may be missing something very small. Here are relevant details
Node : 8.1.3
Angular & Compiler-cli: 4.2.4
Webpack : 2.6.1
typescript : 2.3.4
ng-bootstrap : 1.0.0-alpha.26
bootstrap : 4.0.0-alpha.6 (using CDN but tried after install also with
same result)
webpack.prod.js
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CompressionPlugin = require("compression-webpack-plugin");
let CopyWebpackPlugin = require('copy-webpack-plugin');
let path = require('path');
let rootDir = path.resolve(__dirname, '..');
module.exports = {
entry: {
'polyfills': './spa/polyfills.ts',
'vendor': './spa/vendor-aot.ts',
'app': './spa/main-aot.ts' // AoT compilation
},
output: {
path: path.join(rootDir,'wwwroot'),
filename: 'js/[name]-[hash:6].bundle.js',
chunkFilename: 'js/[id]-[hash:6].chunk.js',
publicPath: '/'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.html']
},
module: {
rules: [
{
test: /\.ts$/,
use: [
'babel-loader?presets[]=es2015',
'awesome-typescript-loader?configFileName=tsconfig-aot.json',
'angular-router-loader?aot=true&genDir=spa/aot/'
],
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
{
test: /\.html$/,
use: 'html-loader'
}
],
exprContextCritical: false
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: false,
mangle: {keep_fnames: true}
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
template: './spa/index.html'
}),
new CopyWebpackPlugin([
{ from: path.join(rootDir,'spa','assets'), to: 'assets'}
]),
new webpack.NoEmitOnErrorsPlugin()
]
};
tsconfig-aot.js
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"lib": ["es2015","dom"],
"typeRoots": ["node_modules/#types"],
"types":["node", "core-js"]
},
"files": [
"spa/app/app.module.ts",
"spa/main-aot.ts"
],
"exclude": ["node_modules"],
"angularCompilerOptions": {
"genDir": "spa/aot",
"skipMetadataEmit": true
},
"awesomeTypescriptLoaderOptions":{
"useWebpackText": true,
"useCache": true
}
}
vendor-aot.ts
import '#angular/platform-browser';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/forms';
import '#angular/router';
import '#angular/platform-browser/animations';
import 'rxjs';
//can import others e.g. bootstrap, jquery etc
//can import js, ts, css, sass etc..
import '#ng-bootstrap/ng-bootstrap';
Thanks & Regards
After searching the internet high and low, going through several stackoverflow posts and github project configurations/samples, I finally managed to fix it (duct tape way).
All I had to do to fix the issue was remove the exclusion of node_modules folder in webpack config file.
Now, WHY exclusion of node_modules works for angular and rxjs packages but not for ng-bootstrap, is still beyond me.
Exclusion works when building for jit but for aot to succeed node_modules HAS TO BE INCLUDED in ts loader chain. Now the build time for aot has increased multifold, but at least it works.

use jquery-ui with webpack having a particular file structure

I would like you to help/suggest the best way to use datepicker from jquery-ui having the following file structure:
-single_pages
-admin
-admin.js
-webpack.config.js
-common
-DatesFilter
-DatesFilter.js
-node_modules
-package.json
I already installed jquery-ui
My webpack.config.js file is:
var path = require('path');
var webpack = require("webpack");
module.exports = {
resolve: {
alias: {
'jquery': require.resolve('jquery'),
},
root: [
path.resolve(__dirname, './../admin'),
path.resolve(__dirname, './../common')
],
extensions: ['', '.js'],
fallback: path.resolve(__dirname, './../node_modules')
},
resolveLoader: {
fallback: path.resolve(__dirname, './../node_modules')
},
entry: './index.js',
output: {
filename: 'bundle.js',
publicPath: "/"
},
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
},
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
})
],
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, './')
],
loader: "babel-loader"
},
{
test: /\.js$/,
include: path.resolve(__dirname, './../common'),
babelrc: false,
loader: require.resolve('babel-loader'),
query: { // load the same presets as in the .babelrc file, but in a way that resolves in the parent directory
presets: [require.resolve('babel-preset-es2015'), require.resolve('babel-preset-react'),
require.resolve('babel-preset-stage-0')]
}
}
]
}
};
I'm using React.js.
I import DatesFilter.js inside admin.js. I get to see the component. The problem comes when I want to use the datepicker.
DatesFilter.js uses datepicker from jquery-ui
I'm using: import { datepicker } from 'jquery-ui' inside DatesFilter.js but it keeps saying TypeError: $(...).datepicker is not a function
What can I do?
Thank you
Try importing just the module, see this link jquery-ui-and-webpack-how-to-manage-it-into-module
in your case you would import "jquery-ui/ui/widgets/datepicker"

Resources