I have tried to install yii2-bootstrap4
but I got this composer error
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Installation request for yiisoft/yii2-bootstrap4 ^1.0#dev -> satisfiable by yiisoft/yii2-bootstrap4[1.0.x-dev].
- Conclusion: don't install bower-asset/bootstrap v3.3.7
- yiisoft/yii2-bootstrap4 1.0.x-dev requires bower-asset/bootstrap ~4.0.0 -> satisfiable by bower-asset/bootstrap[v4.0.0, v4.0.0-beta.3, v4.0.0-beta1, v4.0.0-alpha.6, v4.0.0-alpha.5, v4.0.0-alpha.4, v4.0.0-alpha.3, v4.0.0-alpha.2, v4.0.0-alpha1].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-beta.3].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-beta1].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.6].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.5].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.4].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.3].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha.2].
- Can only install one of: bower-asset/bootstrap[v3.3.7, v4.0.0-alpha1].
- Installation request for bower-asset/bootstrap (locked at v3.3.7) -> satisfiable by bower-asset/bootstrap[v3.3.7].
Installation failed, reverting ./composer.json to its original content
I want to be able to use bootstrap3 and 4 in the same app, I also tried what is described in this issue "prefer-stable": true, and did not work also.
so what exactly should I do, how to use both bootstrap:~3.0 and bootstrap:~4.0 with official yii2-bootstrap packages
You can try to override some requirements in this way:
"minimum-stability": "dev",
"prefer-stable": true,
"require": {
"php": ">=5.4.0",
"yiisoft/yii2": "~2.0.14",
"yiisoft/yii2-bootstrap": "~2.0.8",
"yiisoft/yii2-bootstrap4": "1.0.x-dev",
"bower-asset/bootstrap": "3.3.7 as 4.1.3",
"npm-asset/bootstrap": "~4.1.3"
},
This will install bootstrap 3.3.7 from bower and bootstrap 4.1.3 from npm. You need to update path for bootstrap4 assets bundles:
'components' => [
'assetManager' => [
'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
],
'yii\bootstrap4\BootstrapPluginAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
]
]
]
]
Note that yii2-bootstrap4 is not ready to use and does not even have a alpha/beta release, so expect many other problems.
A lot of solution on how to use Bootstrap 4 in Yii2. Even the Yii2 team created an extension for that. But since, I don't like too much configuration. This is what I did. In AppAsset.php, remove the yii\bootstrap\BootstrapAsset with custom your own. I'll recommend, you stick with the original filename and classname.
// AppAsset.php
public $depends = [
'yii\web\YiiAsset',
//'yii\bootstrap\BootstrapAsset', // Remove this
'app\assets\BootstrapAsset', // Add this
];
Then, I created a BootstrapAsset.php file in assets folder. Copy the code from yii\bootstrap\BootstrapAsset. Then changed some part of the code. No NPM, No Bower.
namespace app\assets;
use yii\web\AssetBundle;
class BootstrapAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'vendor/bootstrap/css/bootstrap.min.css'
];
public $js = [
'vendor/bootstrap/js/bootstrap.min.js',
'vendor/popper.js/umd/popper.min.js'
];
}
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!
We're having a problem with our Vue.js application on Windows 10 / IE 11.
The application was giving SCRIPT1003: Expected ':' until we updated out babel.config to the following:
module.exports = {
presets: [
[
'#vue/cli-plugin-babel/preset',
{
targets: {
'ie': '11'
}
}
]
]
}
At which point the error is now SCRIPT1002: Synxax Error chunk-vendors.js (11365, 9311) which appears to relate to the vuelidate node module.
It appears that I need to exclude the above package, but I dont understand where the syntax should go.
It's also likely that there will be multiple packages that I need to exclude.
The base project was built using vue-cli 4.4.1 and the config files haven't moved far from the stock install
Do you want to transpile the modules? You could use exclude property in webpack.config.js or babel.config.js to transpile modules.
You could change this line:
...
exclude: /node_modules/,
...
into this:
...
exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...
If you need to exclude more than one module you can extend the exception list like so:
exclude: /node_modules\/(?![module1|module2])/
For more information, you could refer to this link.
I'm trying to install a certain package in composer into a certain path, the package name is cyphix333/nbbc and normally it would be installed into vendor/cyphix333/nbbc however I wanted to install it into vendor/nbbc so I tried this in the main project composer.json
"require": {
//......
"cyphix333/nbbc": "dev-master"
},
"extra": {
"asset-installer-paths": {
//.....
"cyphix333/nbbc": "vendor/nbbc"
}
}
However it didn't work, it still installed into vendor/cyphix333/nbbc.
Edit: ...and here is the full data from the extra part, which comes from my php framework yii2:
"extra": {
"yii\\composer\\Installer::postCreateProject": {
"setPermission": [
{
"runtime": "0777",
"web/assets": "0777",
"yii": "0755"
}
],
"generateCookieValidationKey": [
"config/web.php"
]
},
"asset-installer-paths": {
"npm-asset-library": "vendor/npm",
"bower-asset-library": "vendor/bower",
"cyphix333/nbbc": "vendor/nbbc"
}
}
What am I doing wrong here?
1. asset-installer-paths = Composer plugin fxp/composer-asset-plugin
The asset-installer-paths directive belongs to the Composer plugin fxp/composer-asset-plugin.
The plugin is required, for this directive to work. But you are not requiring it in your project repo or globally.
Docu - Installation
composer require "fxp/composer-asset-plugin:~1.0"
or
composer global require "fxp/composer-asset-plugin:~1.0"
2. Is cyphix333/nbbc a Bower or NPM asset?
No.
3. What am I doing wrong here?
You think, that you can use asset-installer-paths directive to move your package to a specific folder. You can't. Because your repo is not an Bower or NPM asset.
4. How can i move my package from vendor/cyphix333/nbbc to vendor/nbbc?
Stop trying that. It's wasted time. Why? Composer has an Autoloader and he does the mapping from classname to filename. Please do not care about the path, just define an autloading strategy (files or classmap) and start using your class.
If you really need to copy stuff, you might use the scripts section of your composer.json.
https://getcomposer.org/doc/articles/scripts.md
I am working on my first project which uses a dojo 1.7.2 component, and only need a vertical slider widget. I was able to create a custom build which is supposed to include only the modules needed for my stated dependencies. Using the following build profile, and the command C:\dojo-release-1.7.2-src\util\buildscripts>build -p profiles/km.admin.dashboard.profile.js -r the resulting release/dojo/dojo.js.uncompressed.js is 796kb, and the release/dojo/dojo.js is 236kb. Is there any way to exclude more unneeded modules to reduce the file size? For instance, I just opened the release/dojo/dojo.js.uncompressed.js and took a quick look, there is a dojo/json package, I am not using any json. How do I exclude it? Thank you.
dependencies = {
layers: [
{
name: 'dojo.js',
customBase: true,
dependencies: [
'dojo/dojo',
'dojo.aspect',
'dojo/selector/acme',
'dojo/cldr/nls/number',
'dijit.form.VerticalSlider',
'dijit.form.VerticalRule',
'dijit.form.VerticalRuleLabels'
]
}
],
staticHasFeatures: {
'dojo-trace-api':0,
'dojo-log-api':0,
'dojo-publish-privates':0,
'dojo-sync-loader':0,
'dojo-xhr-factory':0,
'dojo-test-sniff':0
},
prefixes: [
[ 'dijit', '../dijit' ],
[ 'dojox', '../dojox' ]
]
}
There are some approaches by which you can trim down dojo.js to a bare minimum and keep adding the modules within dojo.js that you really need.
See:
http://dojotoolkit.org/reference-guide/1.7/build/customBase.html
and also:
http://www.sitepen.com/blog/2008/07/01/dojo-in-6k/ (this is somewhat old and cutombase approach in the first link might work better)