I want to use Gulp and ES6modules with Yarn PnP, but Gulp with ES6modules doesn't support PnP...
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'gulp' imported from /<pathToProject>/gulpfile.js
Did you mean to import gulp-npm-4.0.2-57826bdf31-c18e6c33e6.zip/node_modules/gulp/index.js?
at new NodeError (node:internal/errors:371:5)
at packageResolve (node:internal/modules/esm/resolve:864:9)
at moduleResolve (node:internal/modules/esm/resolve:910:18)
at defaultResolve (node:internal/modules/esm/resolve:1005:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:475:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:245:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
If set nodeLinker: "node-modules" in .yarnrc.yml PnP will stop working...
Can I somehow specify the dependencies that need to be saved in node_modules in parallel with PnP?
Thx ^_^
Related
I've been running my component tests via cypress open-ct for a while now, relying on importing /node_modules/tailwindcss/dist/tailwindcss.min.css.
Since upgrading to Tailwind v3 some of my tests are failing as there is no prebuilt CSS file I can import - everything is generated just in time.
For example, testing if a modal closes when clicking on a overlay that is fixed and full width fails as the whole modal is rendered so that it is inaccessible by Cypress.
Another side-issue that stems from not having access to Tailwind classes is that videos recorded when running tests in CI are unusable as they are just a bunch of random native elements.
I've been importing Tailwind like this at the top of each Test file (before describes)
import { mount } from '#cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";
Any ideas how to include Tailwind (preferably globally) so tests won't fail?
You can use the Tailwind CLI to generate your stylesheet on the fly.
Add this plugin in cypress/plugins/tailwind.js (be sure to change the -i source from ./src/styles/globals.css to your base CSS file):
before(() => {
cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
({ stdout }) => {
if (!document.head.querySelector('#tailwind-style')) {
const link = document.createElement('style')
link.id = 'tailwind-style'
link.innerHTML = stdout
document.head.appendChild(link)
}
},
)
})
Then, load the plugin by importing it in cypress/support/index.js:
import '../plugins/tailwind'
You should also set up a separate config file for your component tests, such as cypress/support/component.js, and specify that in your cypress.json config file:
{
"component": {
"supportFile": "cypress/support/component.js",
},
"e2e": {
"supportFile": "cypress/support/e2e.js"
}
}
Then, only include import '../plugins/tailwind' in your cypress/support/component.js config file, so that you don't perform the JIT compilation for your E2E tests (since it's unnecessary).
Michael Hays' solution works, but it rebuilds the whole .css file every time changes to the code are made, which slows tests down. An alternative would be to run tailwind externally in watch mode.
npm i -D concurrently
package.json
"scripts": {
"test": "concurrently \"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"cypress open\" "
},
cypress/support/component.ts
import "../../dist/index.css";
I see you're using import '/node_modules/tailwindcss/dist/tailwind.min.css' which expects a pre-compiled bundle. If you have any customization added to the tailwind config, those would not be covered.
But if you can't use the generated css and don't have any tailwind customization, you could use the cdn version from https://cdn.tailwindcss.com/
Because you are running it in a test and don't want to add to possible "flakyness" of using remote dependency, you'll likely want to download that file and keep it in the repo and update it manually from time to time. You can also use some automation for getting the correct version from the cdn before running the test, but Ideally you'd use the generated css, since that's what you're shipping so that's the resource that should be getting tested.
I am trying to build a simple web project
project structure like this
-src
--index.html
--index.js
--style.css
package.json
yarn.lock
I installed parcel-bundler with this
yarn global add parcel-bundler
And I run the parcel build command
parcel build src/index.html
But error has occurred followed by this log
D:\playground\js\sample>parcel build src/index.html
× D:\playground\js\sample\src\style.css:undefined:undefined: plugin is not a function
at LazyResult.run (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:288:14)
at LazyResult.asyncTick (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:212:26)
at C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:254:14
at new Promise (<anonymous>)
at LazyResult.async (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:250:23)
at LazyResult.then (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:131:17)
I'm just following the instruction of parcel's official docs
I cannot find a solution
please help me
Try --no-minify
Why is the accepted answer, "throw out the baby with the bathwater?"
parcel-bundler does still work, but instead of fixing what's broken, it's been abandoned for Parcel 2, which DOES NOT support Vue 2 SFCs.
Building a Rails 6/Vue 2 app and converting to parcel from webpack(er), so Parcel 2 is not an option for me. (Demanding people upgrade, and then not providing an upgrade path or decent docs, reminds me too much of webpack!)
parcel build ./app/packs/entrypoints/*.js --no-minify
This disables minification, which at least eliminates this particular error for me.
Problem solved: parcel-bundler is deprecated. Use 'parcel' not 'parcel-bundler'
package.json
If you have preset the scripts...
"scripts": {
"start": "parcel index.html",
"dev": "parcel index.html",
"build": "parcel build index.html"
},
...simply run
npm run build
otherwise use this syntax:
npm run build index.html
Replace index.html to whatever file you want to build, but make sure it is the same type of file.
I am using yarn 2 and react with webpack.
In my package is "typescript": ... defined. Once I start yarn start I am getting an error:
yarn workspace test start
When you use this plugin you must install `typescript`.
What is wrong? How should I fix it? Or debug it?
I've faced the similar issue when I was upgrading webpack from 4 to 5.
The problem was the version of react-dev-utils
Upgrading react-dev-utils from v10 to v12 made the issue disappear.
devDependencies {
...
"react-dev-utils": "^12.0.1",
...
}
You can be checked the value of your plugins config about ForkTsCheckerWebpackPlugin which the param key named tsconfig.
Error Message
Check [key, value] about ForkTsCheckerWebpackPlugin.
Find it in your node_modules, and set debug point, run the debugger.
You need to take a look at your webpack.config.js where ForkTsCheckerWebpackPlugin is initialized. ForkTsCheckerWebpackPlugin needs to be able to find the tsconfig file.
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
tsconfig: paths.appTsConfig,
})
}),
In my case I'm defining paths.appNodeModules and paths.appsTsConfig in a file called paths.js.
module.exports = {
appTsConfig: resolveApp('tsconfig.json'),
appNodeModules: resolveApp('node_modules'),
};
I have annoying issue with sass plugin. I use yeoman webapp geneator with default configuration. When I want to build production files (gulp command) I get sass error "File to import not found or unreadable [...]". It works only at first running gulp command – dist folder build properly. But when I want to run gulp command again I keep receiving this error (I have to restart computer to make it works again – at first run :) ). On the other hand, running "gulp serve" (live preview) command gets this same error only at fresh start – when I modify some .scss, files compile properly.
This is the main SCSS file:
// bower:scss
#import "bower_components/slick-carousel/slick/slick.scss";
// endbower
#import '_reset', '_fontello', '_variables', '_helpers', '_basic',
'_widerScreens', '_carousel';
Yeoman webapp generator v.3.0.1
I found this solution. Try to reproduce.
https://garystanton.co.uk/gulp-sass-file-to-import-not-found-or-unreadable/
The info on this page seems less-than-forth-coming -- https://github.com/kof/node-qunit. I've got a setup where I installed nodejs and installed the node-quit module. I have test runner and executed the command node /path/to/runner.js. Below is an example of my setup. Any ideas or examples on how to do this or maybe I'm using it wrong. I previous ran qunit tests using Rhino and EnvJs without any issues but I figured I try nodejs since I using it for other things and the packaging system can be scripted in my build. Maybe I missing an option to node to include Qunit or some environment variable not set -- that would make sense.
File Structure
node/
public/
js/
main.js
tests/
js/
testrunner.js
tests.js
Installation
cd node
npm install qunit
This will now update the file structure.
node/
node_modules/
qunit/
tests/js/testrunner.js
var runner = require("../../node/node_modules/qunit");
runner.run({
code : "/full/path/to/public/js/main.js",
tests : "/full/path/to/tests/js/tests.js"
});
tests/js/tests.js
test("Hello World", function() {
ok(true);
});
Command
node tests/js/testrunner.js
It appears that you need to use full paths to the main.js and tests.js files and also include a relative path to the qunit module. I updated the code above as an example for others.