Comments (11)
It should also be mentioned that the above fixes won't actually resolve issues when including the module as-is, only when including the cjsx source. You'll have to configure webpack to define a browser-check environment variable and support coffeescript/react transforms; then you should be able to use something similar to the below to work around the issue:
var ReactCardFormContainer;
if (process.env.IS_BROWSER) {
ReactCardFormContainer = require('card-react/src/components/card-react-form-container.cjsx');
} else {
ReactCardFormContainer = require('card-react');
}
from card-react.
What is that for?
} else {
ReactCardFormContainer = require('card-react');
}
Why not to require cjsx always directly?
from card-react.
It's to do with the way webpack checks files when building. My understanding is basically-
- if you're running in a node environment, you generally want to load precompiled ES5 files to avoid parsing them at runtime. This should be the default behaviour of a module - you don't want to force anyone integrating your library to have to prehandle your module with coffeeify.
- if you're running in webpack, then weback wants to handle your build process for you. This means it wants you to reference source files from your own source files; in fact if you don't it will throw a critical error that you're using preminified files and abort. Hence the two different require paths.
from card-react.
@pospi i'm kinda new to webpack, so i'll ask you this:
If I'll change card-react.js file in the root folder from
module.exports = require('./lib/card-react-form-container');
to
var ReactCardFormContainer;
if (process.env.IS_BROWSER) {
ReactCardFormContainer = require('src/components/card-react-form-container.cjsx');
} else {
ReactCardFormContainer = require('lib/card-react-form-container');
}
module.exports = ReactCardFormContainer;
and will change the main file in package.json to card-react.js
will it allow webpack to include the module as-is? and in the same time not interfering with the non-webpack require?
from card-react.
Hey there, after looking into it unfortunately things are a bit more complicated than that. Definitely leave your main export as-is.
I should have mentioned in my earlier post, but IS_BROWSER
is a check specific to the app I'm currently working on. Webpack provides a plugin for setting variables in your compilation process, so the way I determine whether I'm running things serverside in node vs. clientside via a compiled webpack build is to use DefinePlugin
to set an environment variable I can switch on.
It's a workaround to be sure, but it's enough to get webpack running. The real issue is that @jessepollak has precompiled payment's modules (payment itself and qj) all into the same file, and I believe it's multiple instances of module.exports
within one source file that webpack specifically complains about (it's not technically valid node module structure either, but it'll work).
The real fix would be for all modules to compile their files into separate source files and to reference each other separately, so the final build of payment should only include its own source in payment/payment.js
and still reference QJ by require
ing directly from node_modules
. If that change was completed then card-react would be able to load payment by its main entrypoint under both node and webpack without issues.
I'll leave it up to you guys as to whether you think it's worth fixing, with things as they are at the moment it's possible to get both your modules working under either environment so I'm happy either way (:
from card-react.
@pospi I've released version 1.0.18 a few days ago with the merged fix and with the new payment version. I'll be happy to know if it worked for you. Thanks!
from card-react.
Hi @shatran
We are using this module, but we are still having the "Not found module payment/src/payment" which seems pretty reasonable since we are using v3 of npm and the "payment" dependency it's being installed independently from card-react. For now, we bypassed the error editing the "card-react-form-container.js" and "card-react-component.js" files to just require "payment" as an independent module (Payment = require('payment')).
But it would be nice to have a solution for this.
Yes, we are using webpack too 💃
from card-react.
HI @nicoecheza,
Thanks for your comment. are you using version 1.0.18 of card-react? i added payment there as a dependency.
from card-react.
Yes, we are.
from card-react.
I've decided to restore the old require (Payment = require('payment'). I think that's the right way, and like @pospi said "The real fix would be for all modules to compile their files into separate source files and to reference each other separately". so by doing this + hoping the payment requiring qj issue will be solved, it should work fine. @nicoecheza please use version 1.0.19 and let me know if it solved your issue.
from card-react.
@shatran nice, thanks you!
from card-react.
Related Issues (20)
- Payment.js is still used as pre-built instead of source (?) HOT 8
- Formatting not working in mobile browser
- npm run fails requiring global ruby/sass HOT 2
- Changing styling?
- is there a way to separate out the expiration fields? HOT 1
- Entering every 4th digit doesn't trigger onChange HOT 7
- initialValues don't re-render HOT 2
- When you focus on the cvv field, the card flips but the back side of the card dissapears HOT 3
- Incomplete event handling missing input fill in from browser suggestion popup HOT 2
- Using with stripe.js HOT 2
- missing last digit of card number HOT 5
- Incompatible with redux HOT 2
- Identify card type HOT 3
- React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement. HOT 1
- card-react failed to build with node 6.11.x
- Redux Bad Formatting HOT 3
- HTML encoding for default values that include '••••' is not working for React ^0.14.3 HOT 4
- How to get input values? HOT 2
- Sass error on build
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from card-react.