I'm trying to migrate some all projects to a monorepo with pnpm.
Here's the structure of my repo:
project1/
project2/
package.json
pnpm-workspace.yaml
...
Here's the content of project1/package.json
...
"devDependencies": {
"grunt": "^1.5.3",
"grunt-babel": "^8.0.0",
"grunt-cli": "^1.4.3",
"grunt-contrib-watch": "^1.1.0",
"grunt-exec": "^3.0.0",
"grunt-karma": "^4.0.2",
"istanbul-combine": "^0.3.0",
"jasmine": "^4.5.0",
"karma": "^6.4.1",
"karma-chrome-launcher": "^3.1.1",
"karma-cli": "^2.0.0",
"karma-coverage": "^2.2.0",
"karma-jasmine": "^5.1.0",
"karma-replacer-preprocessor": "0.0.2",
"karma-spec-reporter": "0.0.36"
}
project1/karma.conf.js
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: ['*/*.js'],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./*.js': ['replacer', 'coverage'],
},
replacerPreprocessor: {
replacer (file, content) { /* ... */ },
},
// ...
});
};
If I run cd project1 && npm i, I can run the tests from the root with npm --prefix project1 run test.
However, if I remove the node_modules and use pnpm i instead of npm i, when i run the tests, I get a few errors:
Cannot load "replacer", it is not registered!
and
Server start failed on port 9876: Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
I tried pnpm i --shamefully-hoist and adding auto-install-peers=true to ./npmrc but in vain... How can I fix this?
Related
The Vite doesn't work
Os:CentOs7
Laravel: 9.26.1
node: v16.17.0
npm: 8.15.0
I would like use new Laravel Project with React.js.
And try the plug-in Breeze for Authentication
I use the command
composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev
At first all command successful complete , but when i use
npm run dev
the server told me
/tmp/dev-xxxxxx.sh: line 1: vite: command not found
and i try the solution
https://github.com/vitejs/vite/discussions/5432
and
https://github.com/vitejs/vite/issues/1215
that's all not work for me
this is package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#headlessui/react": "^1.4.2",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-react": "^0.8.0",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.1.0"
},
"dependencies": {
"vite": "^3.0.9"
}
}
How should I do to resolve this question？
I find the question
i type before npm install
npm config set bin-links false
because CentOs7 have sym link error(bin-link to my laptop)
that can not install complete
so i should set bin-links to true
and
npm install vite
it's would solve the problem
I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]
I am trying to install locally and globally a npm depency by using npm install -g ..
The package.json seems to be ok :
{
"private": true,
...
"main": "dist/main.js",
"bin": {
"gbts": "./dist/main.js"
},
"scripts": {
"build": "tsc"
},
...
"dependencies": {
"minimist": "^1.2.5",
"ora": "^5.1.0",
"ts2c": "^2.2.7",
"yargs": "^16.1.1"
},
"devDependencies": {
"#types/node": "^14.14.10",
"eslint": "6.8.0",
"install": "^0.13.0",
"npm": "^6.14.9",
"tslint": "^5.12.1",
"typescript": "^3.3.3"
}
}
This works perfetly, but when I invoke the command gbts, I still have this error pop in error on windows:
It occurs on the following line :
const parse = require("minimist");
I do not understand why this produce a syntax error, project's dependencies are missing?
Any solution in my case?
I am upgrading from vuetify version 1.0.5 to 2.3.10. I have removed node-sass and using sass as per the documentation. I am getting this error as below. I have included my package.json file. Any idea where I could be wrong?
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vuetify/src/styles/main.sass
Module build failed:
#content($material-light)
^
Invalid CSS after " #content": expected "}", was "($material-light); "
in /Users/weather/ceolaw/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
# ./node_modules/vuetify/src/styles/main.sass 2:14-102
# ./node_modules/vuetify/es5/presets/default/index.js
package.json file
{
"name": "weather",
"private": true,
"engines": {
"node": "^10.0.0",
"yarn": "^1.21.1"
},
"dependencies": {
"#rails/webpacker": "^3.2.0",
"#riophae/vue-treeselect": "^0.0.38",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"coffee-loader": "^0.9.0",
"coffeescript": "1.12.7",
"es6-promise": "^4.2.2",
"pdfjs-dist": "2.0.550",
"sass": "^1.26.11",
"sass-loader": "^6.0.6",
"scroll-into-view-if-needed": "^2.2.14",
"urijs": "^1.19.1",
"vue": "^2.6.12",
"vue-ads-table-tree": "^2.3.2",
"vue-analytics": "^5.9.0",
"vue-moment": "^4.0.0-0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-spinner": "^1.0.3",
"vue-star-rating": "^1.6.0",
"vuetify": "^2.3.10",
"yarn": "^1.22.5"
},
"devDependencies": {
"caniuse-lite": "^1.0.30000855",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"vue-loader": "^13.6.2",
"vue-template-compiler": "^2.6.12",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"client": "./bin/webpack-dev-server",
"server": "bundle exec rails s",
"start": "./bin/webpack-dev-server"
}
}
Error update
yarn remove node-sass
yarn remove v1.21.1
[1/2] 🗑 Removing module node-sass...
error This module isn't specified in a package.json file.
It seems one of your other dependencies has a dependency on node-sass. It's probably #rails/webpacker as you are using very old version 3.2.0 (current is 5.2.1) and they switched to sass (dart-sass) recently
Result is you have both packages installed - sass and node-sass
From the docs of sass-loader (which is used by Webpack when building Vue app) it seems that when both packages are installed, they prefer sass over node-sass but at the same time warn not to install both. Seems strange to me. Also the error suggests that sass-loader is in your case preferring node-sass.
You have 2 options:
upgrade #rails/webpacker to newer version which is using sass
configure sass-loader to use sass as documented here
recently i decided to migrate from webpack 3 to webpack 4. It almost works well until i started to run tests. If my application really works well, in fact, no tests are detected by Karma.
I use webpack throught a wrapper (symfony encore) which works well. I upgraded all packages to latest version, but it doesn't worked. I added a test file that doesn't rely on Vue, and then this test is detected and run.
So i can say that Karma try to load the VueJS spec files, but when the test try to import the SingleFileComponent (Movie.component.vue per exemple) then it stops without any warning. So maybe the problem is related to the preprocessor that might not work.
here is the karma config and the webpack encore config:
const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfig = require('./karma.webpack.config.babel');
const webpack = require('webpack');
// Configure specific plugin
for (const plugin of webpackConfig.plugins) {
// Set writeToFileEmit option of the ManifestPlugin to false
if ((plugin instanceof ManifestPlugin) && plugin.opts) {
plugin.opts.writeToFileEmit = false
}
}
// Remove entry property (handled by Karma)
delete webpackConfig.entry;
// Karma options
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
'./assets/js/vuejs/tests/DebugKarma.spec.js',
'./assets/js/vuejs/tests/Movie.spec.js'
],
preprocessors: {
'./assets/js/vuejs/tests/DebugKarma.spec.js': ['webpack'],
'./assets/js/vuejs/tests/Movie.spec.js': ['webpack']
},
browsers: ['Chrome'],
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only',
noInfo: true,
},
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-spec-reporter'),
require('karma-junit-reporter'),
require('karma-jasmine-html-reporter'),
],
chromeLauncher: {
exitOnResourceError: false
},
reporters: ['kjhtml', 'spec', 'junit'],
junitReporter: {
outputDir: './var/report', // results will be saved as $outputDir/$browserName.xml
outputFile: 'karma.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
suite: '', // suite will become the package name attribute in xml testsuite element
useBrowserName: false, // add browser name to report and classes names
nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
properties: {}, // key value pair of properties to add to the <properties> section of the report
xmlVersion: 1 // use '1' if reporting to be per SonarQube 6.2 XML format
},
autoWatch: true,
});
}
const Encore = require('#symfony/webpack-encore')
Encore
.configureRuntimeEnvironment('dev-server')
// the project directory where compiled assets will be stored
.setOutputPath('./var/tests/karma/')
.setPublicPath('/')
.cleanupOutputBeforeBuild()
.disableSingleRuntimeChunk()
.addEntry()
.enableSassLoader(function(sassOptions) {}, {
resolveUrlLoader: false,
})
.enableVueLoader()
let config = Encore.getWebpackConfig();
module.exports = config
and here is a part of my package.json
"dependencies": {
"#api-platform/admin": "^0.6.2",
"#rebolon/json-reviver": "0.0.7",
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link": "^1.2.9",
"apollo-link-error": "^1.1.8",
"apollo-link-http": "^1.5.12",
"axios": "^0.18.0",
"devextreme": "^18.2.6",
"devextreme-vue": "^18.2.6",
"graphql": "^14.1.1",
"graphql-tag": "^2.10.1",
"offline-plugin": "^5.0.6",
"prop-types": "^15.7.2",
"quasar-extras": "^1.0.3",
"quasar-framework": "^0.15.15",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"rxjs": "^6.4.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue": "^2.6.8",
"vue-apollo": "^3.0.0-beta.28",
"vue-router": "^3.0.2",
"vuelidate": "^0.7.4"
},
"devDependencies": {
"#angular/cli": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"#symfony/webpack-encore": "^0.24.0",
"bootstrap": "^4.3.1",
"create-react-app": "^1.5.2",
"jasmine": "^3.3.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"rxjs-tslint": "^0.1.7",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^5.3.3",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.8"
},
"browserslist": "> 1%"
And finally the karma output wher we can only see DebugKarma result, but not the Movie result:
npm run test-karma
> sf-flex-encore-vuejs#0.0.1 test-karma php-sf-flex-webpack-encore-vuejs
> karma start karma.conf.js --single-run
(node:20628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i ｢wdm｣: wait until bundle finished: noop
i ｢wdm｣: wait until bundle finished: noop
DONE Compiled successfully in 1235ms 10:10:06
i ｢wdm｣:
i ｢wdm｣: Compiled successfully.
08 03 2019 10:10:06.850:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
08 03 2019 10:10:06.853:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 03 2019 10:10:06.872:INFO [launcher]: Starting browser Chrome
08 03 2019 10:10:08.582:INFO [Chrome 72.0.3626 ]: Connected on socket hy9Imp7g7Qgdq0WuAAAA with id 25037598
Chrome 72.0.3626 INFO: 'This log message must be displayed in devTools of Karma browser'
Chrome 72.0.3626 INFO LOG: 'This log message must be displayed in devTools of Karma browser'
Debug Karma conf
√ config is ok
TOTAL: 1 SUCCESS
Chrome 72.0.3626 : Executed 1 of 1 SUCCESS (0.007 secs / 0.001 secs)
TOTAL: 1 SUCCESS
You can get the whole project here: https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/tree/feature/move-on-webpack4
Any clue is welcome, i really don't know how to fix this (neither how to debug it).
Thanks