When I bundle bluebird with webpack and target node I'm getting the following error -
makeNodePromisified(key, THIS, key, fn, suffix, multiArgs);
^
TypeError: makeNodePromisified is not a function
at promisifyAll (...)
at Function.e.24.module.exports.Promise.promisifyAll (...)
It appears to be pulling in ./node_modules/bluebird/browser/bluebird.js which has __BROWSER__ replaced with true. How do I pull in the non-browser version?
Don't pull bluebird directly from webpack, the source isn't designed to work this way because of optimizations performed.
Instead, include the minfieid result and set an alias to the minified end-result file:
externals: {
"Promise": "Promise"
}
In your Webpack configuration file. Alternatively you can ignore it as suggested here if you don't need the type feedback (not using TypeScript for instance).
Related
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.
It's great that ParcelJS just handles sass out of the box but I'm running into a problem where it keeps throwing an exception when it encounters a url within in my scss file. I guess Parcel is trying to locate the resource and rewrite the url. I do not want Parcel to do this. Is there anyway to disable this? I just want it to compile the sass and leave any urls in there alone.
This question was posted when Parcel v1 was the latest version. For folks arriving here in the future, you can accomplish this in Parcel v2 with the parcel-resolver-ignore plugin. Here's how:
Install it (e.g. yarn add -D parcel-resolver-ignore)
Create or modify your .parcelrc file to add it to the parcel pipeline:
{
"extends": "#parcel/config-default",
"resolvers": ["parcel-resolver-ignore", "..."]
}
Add a "parcelIgnore" entry to package.json that contains regex patterns that define which resources to ignore, e.g.:
{
// An array of Regex patterns
"parcelIgnore": [
"images\/*.*",
]
}
The things you want to target your regexes to match are the urls referenced in the .scss files, not the .scss files themselves.
I followed this howto: http://blob.tomerweller.com/reagent-import-react-components-from-npm and it worked great. I even managed to use one of my own NPM module on top of this example app of re-frame: https://github.com/Day8/re-frame/tree/master/examples/simple/
Starting the resulting app with:
lein clean && lein figwheel
everything works ok, but when I do:
lein do clean, with-profile prod compile
I get a TypeError: a is undefined. Any idea to fix this?
Let me provide you with the code: the bad commit is here,
while both :dev and :prod profiles work OK at this just previous commit.
Update: I managed to fix the compiled version like this (see the commit):
return d.c?d.c(c,v,w):d.call(null,c,v,w)}}(G,r,b,c,d,e)),I=dw(G);rf.b?: […]
};w.b=v;w.c=f;return w}()}(c,d,e,f))};hf.b(ow,ik);hf.b(ow,bp);hf.b(ow,To); […]
function nx(a){var b=window.deps["react-mathjax"],
- c=window.deps.clubexpr.kf;
+ c=window.deps.clubexpr.renderLispAsLaTeX;
return new U(null,3,5,V,[Vj,b.Context,new U(null,4,null)}
function Wv(){return function(a){return function(){return new U(null,6,5,V,[…]
This seems to me a compilation misconfiguration or bug.
Update 2: my code compiles OK if I set :optimizations to :simple (was :advanced). See the cljs compiler doc about this option.
Thanks.
The code that is failing is here.
It looks like you might need to provide externs for clubexpr, so that the Closure Compiler knows not to rewrite renderLispAsLatex as kf. When compiling under :simple, the Closure Compiler doesn't rewrite function names, so this problem wouldn't show up.
As a side note, you probably shouldn't use aget to get objects from the window, aget is designed for array access only. To get objects, you should use goog.object/get. See this post on Checked Array Access for more info on this.
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.
Following this gist here
https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346
I was able to set up a cool folder structure for a pretty complex app using Webpack's 'resolve.modulesDirectories' - I can reference shared components via module-type imports :
import MyModule from 'modules/MyModule';
where the file is in
src/app/modules/Foo/modules/Bar/modules/Baz/component.jsx
and MyModule is in
src/app/shared/modules/MyModule
The trouble is, when I try to run tests
mocha --compilers js:babel-core/register $(find src/app -name *.test.jsx)
the Babel compiler throws saying it can't find anything in 'modules/MyModule'...
Is there an analog to Webpack's 'modulesDirectories' in the Babel compiler config ?
You should be able to use Babel's resolveModuleSource option to essentially rewrite the import paths, but you'd need to use the programmatic API to do it. So instead of using Mocha's --compilers option, use --require to load a script that calls Babel's require hook and passes the resolveModuleSource option. If you're using Babel v6 use the babel-register package and it'd look something like:
require("babel-register")({
resolveModuleSource: function (source, filename) {
return filename.replace(/^modules\/.+/, "/abs/path/to/src/app/shared/$0");
},
});
You'll have to compile your tests using webpack:
https://webpack.github.io/docs/testing.html