parcel build error: plugin is not a function - bundler

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.

Related

Cypress cucumber with custom directory structure - Unable to find the step defs

I need to support a custom directory structure on my project that uses Cypress for testing. As I am using cucumber preprocessor plugin to handle feature files (trying to work with ATDD approach but also I am using other plugins to manage accessibility and performance testing) I though why not try to split the directory structure this way
package.json
src/
testing/
---> acceptance/
---> accessibility/
---> performance/
---> cypress.acceptance.json
---> cypress.accessibility.json
---> cypress.performance.json
Where the cypress.X.json files are the Cypress configuration files that will act as the cypress.json for each testing folder.
To manage this I am adding some scripts to my package.json to make things easier
"scripts": {
...
"test:acceptance": "npx cypress run --config-file test/cypress.acceptance.json",
"test:performance": "npx cypress run --config-file test/cypress.performance.json",
"test:accessibility": "npx cypress run --config-file test/cypress.accessibility.json",
...
}
If we focus on the acceptance testing for a moment, the Cypress configuration (test/cypress.acceptance.json) looks something like this (yes I had to override all the defaults to make Cypress happy!)
{
"baseUrl": "http://localhost:3000/",
"video": true,
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"nonGlobalStepBaseDir": "test/acceptance/integration"
},
"testFiles": "**/*.feature",
"integrationFolder": "test/acceptance/integration",
"fixturesFolder": "test/acceptance/fixture",
"screenshotsFolder": "test/acceptance/screenshots",
"videoFolder": "test/acceptance/videos",
"pluginsFile": "test/acceptance/plugins/index.js"
}
From what I can tell this seems to be doable and in the docs https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#configuration they give the options above in the "cypress-cucumber-preprocessor" where they also suggest the nonGlobalStepBaseDir should point at the same path as the integration folder (which I have done... except that all of this doesn't work. The error I am getting is the step definitions are not found (will post only one of the failed test for shortness, the others are the same)
Running: features/product-catalogue/product-catalog.feature (4 of 8)
Product Catalog
1) A customer is able to see the product catalog
2) The product catalog displays the navigation bar
3) The catalogue page view defaults to grid on mobile
0 passing (2s)
0 pending
3 failing
1) Product Catalog
A customer is able to see the product catalog:
Error: Step implementation missing for: products are available on the system
at Context.resolveAndRunStepDefinition (http://localhost:3000/__cypress/tests?p=test/acceptance/integration/features/product-catalogue/product-catalog.feature:12789:11)
at Context.eval (http://localhost:3000/__cypress/tests?p=test/acceptance/integration/features/product-catalogue/product-catalog.feature:12104:35)
Note that the internal directory structure used to work before when it was inside the traditional cypress/integration/features folder. At the end of the day I have just renamed things around and pushed one level down to test/acceptance/integration/features.
From what I can tell it's the plugin not able to get the base folder for the non-global step definitions, but I can't see why.
Any help would be highly appreciated, thank you

TypeError: node.getIterator is not a function when using VuePress

I'm following https://v1.vuepress.vuejs.org/guide/getting-started.html#quick-start to generate a new VuePress site.
I did the following (I'm using Node 15.4.0):
npx create-vuepress-site
cd docs
npm install
npm run build
I'm getting:
TypeError: node.getIterator is not a function
at LazyResult.visitTick (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:528:33)
at LazyResult.runAsync (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:408:30)
at LazyResult.async (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:221:30)
at LazyResult.then (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:206:17)
at OptimizeCssAssetsWebpackPlugin.processCss (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/src/index.js:81:8)
at Object.processor (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/src/index.js:20:18)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:150:10
at arrayEach (/home/marcin/tmp/vuepress-testing/docs/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/home/marcin/tmp/vuepress-testing/docs/node_modules/lodash/forEach.js:38:10)
at OptimizeCssAssetsWebpackPlugin.process (/home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:147:5)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:178:28
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), :25:17)
at AsyncSeriesHook.lazyCompileHook (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/Hook.js:154:20)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/webpack/lib/Compilation.js:1409:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
at AsyncSeriesHook.lazyCompileHook (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/Hook.js:154:20)
I also noticed that the same error started to appear on my existing VuePress site, which worked without issues before (I think even yesterday).
What is the problem? Am I able to get around it somehow?
Same here.
I locked vuepress to version 1.8.1, and build seems fine... until bug fix.

`Cannot use e "__Schema" from another module or realm.` and `Duplicate "graphql" modules` using ApolloClient

I have a React application with ApolloClient with Apollo-Link-Schema. The application works fine locally but in our staging environment (using GOCD), we get the following error:
Uncaught Error: Cannot use e "__Schema" from another module or realm.
Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutions
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
at t.a (instanceOf.mjs:21)
at C (definition.mjs:37)
at _ (definition.mjs:22)
at X (definition.mjs:284)
at J (definition.mjs:287)
at new Y (definition.mjs:252)
at Y (definition.mjs:254)
at Object.<anonymous> (introspection.mjs:459)
at u (NominationsApprovals.module.js:80)
at Object.<anonymous> (validate.mjs:1)
Dependencies are installed with yarn, I've added the resolutions field to the package.json.
"resolutions": {
"graphql": "^14.5.8"
},
I've checked the yarn.lock and can only find one reference for the graphql package.
npm ls graphql does not display any duplicates.
I thought maybe its a build issue with webpack - I have a different build script for staging, but running that locally I am still able to get the react application to run with that bundle.
Can anyone suggest anything else to help me fix this?
I managed to find the cause of the issue, if this helps anyone else. The issue is not to do with duplicate instances of the package at all, this is a false positive triggered by us using webpack's DefinePlugin to set the process.env.NODE_ENV to staging for our staging build.
However, in webpack the mode (see https://webpack.js.org/configuration/mode/), which sets the process.env.NODE_ENV, only accepts none, development and production as valid values. This was triggering an env check in the graphql package to fail and trigger this error message.
In our case, we need to differentiate between staging and production as our API endpoint differs based on this, but the solution we implemented is to not rely on the process.env.NODE_ENV, but to assign a custom variable on build (e.g. process.env.API_URL)
I would try to replicate the error locally and debug it:
try this:
rm -rf node_modules yarn.lock
# also remove any lock files if you have package-lock.json too
yarn install
# build the project locally and see if you got the error
I got this problem one time where I was working with Gatsby and 2 different themes where using different versions of GraphQL. Also be more explicit with the version (without caret) and check if the error persist.
do you have a repo youc an share? that would also help us to help you :)
While changing NODE_ENV to production might solve the issue, if you have different variables for each environment and don't want to mess with your metrics this is not an ideal solution.
You said you use webpack. If the build with the issue uses some kind of source-map in your devtool, you might want to disable that to see if the problem persists. That's how I solved this without setting my NODE_ENV to production.
I had a similar problem when trying to run Apollo codegen and was able to fix it by deduping my npm packages. Run this:
rm -rf node_modules && npm i && npm dedupe
I was having this problem so I switched to yarn, and after deleting node_modules and npm lockfile, then running yarn, the problem went away :-).
I ended up here because I use the AWS CDK and the NodejsFunction Construct. I was also using bundling with minify: true.
Toggling minify to false resolved this for me.

Unable to debug firebase functions

I am trying to debug my js code the runs on firebase functions.
My steps were:
install from functions
npm install --save #google-cloud/debug-agent
added index.js:
require('#google/cloud-debug').start();
when I tryed to run
firebase deploy --only functions
got an error :
Error: Error parsing triggers: Cannot find module '#google/cloud-debu
g'
Try running "npm install" in your functions directory before deployin
try: ndb firebase serve
debugger breakpoints are hit with stack traces visible, note it's a little slow so give the debugger time to instrument the child processes
Additionally I was able to debug cloud functions in isolation using (caps for removed values):
GCLOUD_PROJECT=THE-FIREBASE-PROJECT node --inspect-brk /path/to/functions-framework --target FUNCTION-NAME --port=5000
where functions-framework simply expands to the full path for the installed functions-framework (global in my case) and the working directory contains the target index.js for functions.
Alternately when or where the FIREBASE_CONFIG is needed try this format adjusted to fit:
FIREBASE_CONFIG="{\"databaseURL\":\"https://YOUR-FIREBASE-PROJECT.firebaseio.com\",\"storageBucket\":\"YOUR-FIREBASE-PROJECT.appspot.com\",\"projectId\":\"YOUR-FIREBASE-PROJECT\"}
https://github.com/GoogleChromeLabs/ndb
https://cloud.google.com/functions/docs/functions-framework
https://github.com/GoogleCloudPlatform/functions-framework-nodejs/issues/15
The addition to index.js should be:
require('#google-cloud/debug-agent').start();
or better:
require('#google-cloud/debug-agent').start({ allowExpressions: true });
We recently renamed the module, and it is possible that the instructions you are following are partially out of date. Can you point us to the instructions you have been following?
Also note that support for debugging cloud functions is experimental at this point. There are certain cases (dependent on the traffic to the function) where you function may finish before the debug-agent has a chance to initialize/register. We're currently looking into how to address this.

How do use node-qunit?

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.

Resources