"react-meteor-data" gives error with react 16 - reactjs

I am using react 16 with meteor.
I am using react-meteor-data package for using "withtracker".
But this package gives this issue
TypeError: Class extends value undefined is not a constructor or null
at ReactMeteorData.jsx (packages/react-meteor-data/ReactMeteorData.jsx:162:36)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at createContainer.jsx (packages/react-meteor-data/createContainer.jsx:1:210)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at react-meteor-data.jsx (packages/react-meteor-data/react-meteor-data.jsx:1:139)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at /home/amardeep/react-16/simple-todo/.meteor/local/build/programs/server/packages/react-meteor-data.js:330:15
at /home/amardeep/react-16/simple-todo/.meteor/local/build/programs/server/packages/react-meteor-data.js:337:3
at /home/amardeep/react-16/simple-todo/.meteor/local/build/programs/server/boot.js:411:36
at Array.forEach (<anonymous>)
Exited with code: 1
Your application is crashing. Waiting for file change.
What could be the possible reason.

Related

'SyntaxError: Cannot use import statement outside a module' after first successful Next.js compiling

I'm using a library for React/Next.js with typescript to fetch Instagram media from posts called react-instagram-media for a website project.
The package's Docs says to import the component with...
import { InstagramMedia } from 'react-instagram-media';
The component compiles the first time without problems as I run yarn dev command. It renders correctly on hocalhost:3000/ but after saving any file and hot-reloading (even with no changes applied) or refreshing the browser tab, it throws this error:
..\node_modules\react-instagram-media\src\index.js:1
import instagramMediaParser from './helpers/instagramMediaParser'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.react-instagram-media (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:1555:18)
at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
at Module../src/components/InstagramPost.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:762:79)
at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
at Module../src/components/IgPostsBanner.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:714:72)
at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
at Module../src/pages/index.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:1261:83)
at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
at D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:91:18
The file referenced ..\node_modules\react-instagram-media\src\index.js:1 only has this:
import instagramMediaParser from './helpers/instagramMediaParser'
import InstagramMedia from './components/InstagramMedia'
export {
instagramMediaParser,
InstagramMedia
}
... and its the same code during the first successful and all subsecuent failing compilings, as far as I could check.
The only way I've found to successfully compile it again is to remove (or comment out) the import statement and its imported component and recompile it again (by hot-reloading). It doesnt matter where I use the import statement and Component (at index.tsx or any sub-level), it always crashes after the first successful compiling.
I'm new to Next and typescript so any help would be appreciated. Thanks!

Task function must be specified with GULP in AngularJS project

I need to use gulp(using version4), which I need for compile an old project, but running "gulp serve" giving the error:
gulp serve
assert.js:383
throw err;
^
AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\User\choosy-front\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\User\choosy-front\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\User\choosy-front\gulp-tasks\env\dev\tasks.js:29:6)
at Module._compile (internal/modules/cjs/loader.js:1139:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
at Module.load (internal/modules/cjs/loader.js:988:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:\Users\User\choosy-front\gulpfile.js:10:1)
at Module._compile (internal/modules/cjs/loader.js:1139:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
at Module.load (internal/modules/cjs/loader.js:988:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (internal/modules/cjs/helpers.js:72:18)
at execute (C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
at Liftoff.handleArguments (C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\index.js:206:24)
at Liftoff.execute (C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)
at module.exports (C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\flagged-respawn\index.js:51:3)
at Liftoff.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:191:5)
at C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:149:9
at C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\v8flags\index.js:138:14
at C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\v8flags\index.js:41:14
at C:\Users\User\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\v8flags\index.js:53:7
at processTicksAndRejections (internal/process/task_queues.js:79:11)
{
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
I don't have any tasks, the gulpfile.js content:
'use strict';
// "dist" tasks and build processes.
require('./gulp-tasks/dist/tasks.js');
require('./gulp-tasks/dist/build.js');
// "dev" environment tasks & builds processes.
require('./gulp-tasks/env/dev/tasks.js');
require('./gulp-tasks/env/dev/build.js');
// "stage" environment tasks & builds processes.
require('./gulp-tasks/env/stage/tasks.js');
require('./gulp-tasks/env/stage/build.js');
// "stage" environment tasks & builds processes.
require('./gulp-tasks/env/production/tasks.js');
require('./gulp-tasks/env/production/build.js');
when I tried version 3 I got the error:
ReferenceError: primordials is not defined
at fs.js:33:5
at req_ (C:\Users\User\choosy-front\node_modules\natives\index.js:143:24)
at Object.req [as require] (C:\Users\User\choosy-front\node_modules\natives\index.js:55:10)
at Object.<anonymous> (C:\Users\User\choosy-front\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
what should I do so I can run the server?
I don't think that the problem is with the undertaker module no?
Thank you

using LessCss in asset_compress plugin with CakePHP4

I fail to set up LessCss filter with asset_compress plugin on a new CakePHP4 app.
Read the docs: https://github.com/markstory/asset_compress/wiki
There are some examples on js filters and config in general, so I set up mine like so:
[General]
cacheConfig = false
[js]
cachePath = WEBROOT/cache_js/
[css]
cachePath = WEBROOT/cache_css/
[less]
filters[] = LessCss
[app-v1.css]
files[] = WEBROOT/less/app-v1.less
What happens is app-v1.less get parsed like a css file, so all the Less stuff is still there and not processed properly.
When adding filters[] = LessCss to [css] or [app-v1.css] get an error:
Error: /usr/local/lib/node_modules/less/dist/less.cjs.js:6735
imports.contents[fileInfo.filename] = str;
^
TypeError: Cannot read property 'contents' of undefined
at Object.parse (/usr/local/lib/node_modules/less/dist/less.cjs.js:6735:20)
at Object.<anonymous> (/Users/yy/www/fudis_app/tmp/asset_compress_less6IDAL9:5:8)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
I understand this is a general question and possibly I am missing something in the docs or general understanding, but a simple example of a proper config would be really handy. Thanks!

Meteor/React: Your app is crashing but fixed error?

I keep getting this error below but when I update the Resolutions.graphql file to correct the typo, I still get the error.
Tried restarting the Meteor server but still receiving the error.
Anything I'm missing?
Error: Unknown type "Sting". Did you mean "String"?
at assertValidSDL (/Users/macos/apollo/node_modules/graphql/validation/validate.js:89:11)
at Object.buildASTSchema (/Users/macos/apollo/node_modules/graphql/utilities/buildASTSchema.js:76:34)
at Object.buildSchemaFromTypeDefinitions (/Users/macos/apollo/node_modules/graphql-tools/dist/generate/buildSchemaFromTypeDefinitions.js:23:28)
at makeExecutableSchema (/Users/macos/apollo/node_modules/graphql-tools/dist/makeExecutableSchema.js:26:29)
at register-api.js (imports/startup/server/register-api.js:22:16)
at fileEvaluate (packages/modules-runtime.js:336:7)
at Module.require (packages/modules-runtime.js:238:14)
at Module.moduleLink [as link] (/Users/macos/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
at index.js (imports/startup/server/index.js:1:8)
at fileEvaluate (packages/modules-runtime.js:336:7)
at Module.require (packages/modules-runtime.js:238:14)
at Module.moduleLink [as link] (/Users/macos/.meteor/packages/modules/.0.13.0.1pfv79d.ujmak++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38)
at init.js (server/init.js:1:8)
at fileEvaluate (packages/modules-runtime.js:336:7)
at Module.require (packages/modules-runtime.js:238:14)
at require (packages/modules-runtime.js:258:21)
Exited with code: 1
Your application is crashing. Waiting for file change.
Resolutions.graphql:
type Resolutions {
_id: String!
name: String!
}
Finally got it to work using meteor reset instead of just cmd + c and then meteor

Velocity-React Won't Load with Webpack

I am trying to use the following library https://www.npmjs.com/package/velocity-react for animations in my react/webpack project. I am getting a really weird error when I even try and include the file. I do this by, following the documentation, requiring the package at the top of my webpack.config.js file like this:
require('velocity-animate');
require('velocity-animate/velocity.ui');
The error I get is:
/Users/patientplatypus/Documents/arc-app/node_modules/velocity-animate/velocity.js:417
})(window);
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/patientplatypus/Documents/arc-app/node_modules/velocity-animate/velocity.js:417:4)
at Module._compile (module.js:569:30)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/patientplatypus/Documents/arc-app/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/patientplatypus/Documents/arc-app/webpack.config.js:5:1)
This is very frustrating as it looks like a very neat package, but it won't even load. Does anyone know how to fix this?
You need to include it in your entry point, not the config. What you include in the config is only used for the bundling process, which is in Node not the browser, and window does not exist in Node.
Assuming you have the following entry configuration:
entry: './src/index.js'
In ./src/index.js you import it:
require('velocity-animate');
require('velocity-animate/velocity.ui');
// Or with ES modules
import 'velocity-animate';
import 'velocity-animate/velocity.ui';
If you are using a module, you can do something like this.
import Velocity from 'velocity-animate';
and then use it like this.
let el = document.querySelector("#someId");
Velocity(el, "fadeIn", {duration: 700, stagger: 200, easing: "easeInSine"});
window does not exist in NodeJS, it is related to DOM.

Resources