I'm trying to install Vue froala on my Laravel project.
I followed the exact instruction provided here: https://github.com/froala/vue-froala-wysiwyg but I get:
Cannot find module 'babel-runtime/core-js/json/stringify
Not sure if I have to touch the webpack.mix.js. I only try to add jQuery required by Froala. So now it looks like that:
const mix = require('laravel-mix');
mix.webpackConfig(webpack => {
return {
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#':__dirname + '/resources'
}
},
plugins: [
// ...
// Jquery loader plugin.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
})
I found people fixing a similar problem manually installing babel-runtime as a package.json dependancy. I did, but it didn't work.
Any help?
Based on a recommendation, I used:
import VueFroala from 'vue-froala-wysiwyg/dist/vue-froala.min.js'
... which worked for me.
Related
I am trying to update my postcss.config.js file to support two plugins: postcss-nested and postcss-mixins. Tech used: react project, using webpack and npm.
From PostCSS documentation, it says i need to add the plugins as an array and in this StackOverflow post, it similarly says 'the export in the postcss.config.js needs to be an object with a plugins property that holds an array of your plugins.' When i try that, i'm getting linting erros and it seems wrong. Any suggestions welcome.
Old postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: {
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
},
};
New postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-mixins'),
require('postcss-nested'),
],
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
};
};
One other question: will any of my postcss plugins work if i don't include them in my postcss.config.js file? I am looking at our codebase and seeing many postcss plugins installed (such as autoprefixer) and they are not in the config file...so not sure if that was ever working for us.
I created a sample project to reproduce this issue: https://github.com/splanard/vue3-vite-web-components
I initialized a vue3 project using npm init vue#latest, as recommanded in the official documentation.
Then I installed Scale, a stencil-built web components library. (I have the exact same issue with the internal design system of my company, so I searched for public stencil-built libraries to reproduce the issue.)
I configured the following in main.ts:
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-')
applyPolyfills().then(() => {
defineCustomElements(window);
});
And the same isCustomElement function in vite.config.js:
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I inserted a simple button in my view (TestView.vue), then run npm run dev.
When opening my test page (/test) containing the web component, I have an error in my web browser's console:
failed to load module "http://localhost:3000/node_modules/.vite/deps/scale-button_14.entry.js?import" because of disallowed MIME type " "
As it's the case with both Scale and my company's design system, I'm pretty sure it's reproducible with any stencil-based components library.
Edit
It appears that node_modules/.vite is the directory where Vite's dependency pre-bundling feature caches things. And the script scale-button_14.entry.js the browser fails to load doesn't exist at all in node_modules/.vite/deps. So the issue might be linked to this "dependency pre-bundling" feature: somehow, could it not detect the components from the library loader?
Edit 2
I just found out there is an issue in Stencil repository mentioning that dynamic imports do not work with modern built tools like Vite. This issue has been closed 7 days ago (lucky me!), and version 2.16.0 of Stencil is supposed to fix this. We shall see.
For the time being, dropping the lazy loading and loading all the components at once through a plain old script tag in the HTML template seems to be an acceptable workaround.
<link rel="stylesheet" href="node_modules/#telekom/scale-components/dist/scale-components/scale-components.css">
<script type="module" src="node_modules/#telekom/scale-components/dist/scale-components/scale-components.esm.js"></script>
However, I can't get vite pre-bundling feature to ignore these imports. I configured optimizeDeps.exclude in vite.config.js but I still get massive warnings from vite when I run npm run dev:
export default defineConfig({
optimizeDeps: {
exclude: [
// I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
'scale-components-neutral'
'#telekom/scale-components-neutral'
'#telekom/scale-components-neutral/**/*'
'#telekom/scale-components-neutral/**/*.js'
'node_modules/#telekom/scale-components-neutral/**/*.js'
],
},
// ...
});
This issue has been fixed by Stencil in version 2.16.
Upgrading Stencil to 2.16.1 in the components library dependency and rebuilding it with the experimentalImportInjection flag solved the problem.
Then, I can import it following the official documentation:
main.ts
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
applyPolyfills().then(() => {
defineCustomElements(window);
});
And configure the custom elements in vite config:
vite.config.js
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I did not configure main.ts
stencil.js version is 2.12.1，tsconfig.json add new config option in stencil:
{
"compilerOptions": {
...
"skipLibCheck": true,
...
}
}
add new config option in webpack.config.js :
vue 3 document
...
module: {
rules:[
...
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
compilerOptions: {
isCustomElement: tag => tag.includes("-")
}
}
}
}
...
]
}
...
I am trying to obfuscate the Nuxt project with javascript-obfuscator. Looking at their documentation it looks like we have to import their plugin in Webpack plugins. But they dont have the documentation for Vue or Nuxt way to do it. I also tried searching on google, but there aren't no relevant examples.
I also want to exclude node_modules from obfuscation.
Nuxt js documentation has something like
import webpack from 'webpack'
export default {
build: {
plugins: [
new webpack.ProvidePlugin({
// global modules
$: 'jquery',
_: 'lodash'
})
]
}
}
And Obsufaction has
var WebpackObfuscator = require('webpack-obfuscator');
// webpack plugins array
plugins: [
new WebpackObfuscator ({
rotateStringArray: true
}, ['excluded_bundle_name.js'])
]
How can i use it with nuxt and also exclude the node_modules folders?
I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.
package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.
What am I missing here?
If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.
But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js#2 --save and added this to the rules in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
Then I added the babel.config.js file to the root of the project.
module.exports = {
presets: [
['#babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-transform-spread',
]
}
A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.
I ended up just removing Vuetify (I was only using one feature from it which was easily replaced) and using the babel polyfill cdn. Probably not the best solution but got it working for now.
I need to configure Uglify options in a vue cli project.
What I need is to mantain certain comments, so I've tried to set up this in vue cli, without success.
configureWebpack: {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: /\<\/?fs_premium_only\>/i
}
}
})
]
},
Is something I'm doing wrong? if I inspect the vue config I see that the options is there, but my comment are stripped out.
Is there any way to preserve those comments?
It came ot I must use this syntax:
chainWebpack: config => config.optimization.minimizer([new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: /\<\/?fs_premium_only\>/i,
}
}
})])