These are chat archives for reactioncommerce/reaction

8th
May 2019
Allie Reilly
@acreilly
May 08 02:01
@pnewell4_twitter how do I go about important the component that I want to extend off of? this doesn't seem to work
import CartItem from "@reactioncommerce/components/CartItem/v1";
Baldwin John Sumatra
@bij-fts
May 08 04:00
@acreilly npm install --save react@16 prop-types styled-components@3 reacto-form @reactioncommerce/components-context @reactioncommerce/components
priyankaa02
@priyankaa02
May 08 05:33
can anyone help me to know how to register any redirect uri with client ?
progranime
@progranime
May 08 07:17
Hi I'm trying to add a dependency (react-slick) in version 2.0 I npm install react-slick under the reaction-next-starterkit but when I tried to import it returns an error
Screen Shot 2019-05-08 at 3.17.06 PM.png
Loan Laux
@loan-laux
May 08 07:19
@progranime It may be a dumb question but... Are you sure you ran your npm install in the Next.js starter-kit and not the backend?
progranime
@progranime
May 08 07:20
@loan-laux when I check the node_modules of reaction-next-starterkit the dependency is there
Screen Shot 2019-05-08 at 3.19.42 PM.png
Loan Laux
@loan-laux
May 08 07:21
Ah, that's a weird one. I've seen issues with Next.js and deps like react-slick that are due to CSS files being imported inside the module itself, which Next.js doesn't like unless you've got a special loader. But that doesn't seem to be the case here.
progranime
@progranime
May 08 07:24
@loan-laux I will try to restart again if it will solve the issue. I will update you if its work. Thanks for your response
Stabyou
@Stabyou
May 08 07:25
Hi, all. I'm have problems with running react app. It seems that i can't run the shop. What ever I do it just says "No shop matching the domain ".......com"". Any ideas what might be?
I'm able to login in the admin panel. But there is no store index. And I can't see the store front-end.
progranime
@progranime
May 08 08:39

@loan-laux it works after I restarted it thanks.
Another issue that I encounter is for example here in css file there's an error encountered then I tried to remove that error
This line of code: @charset 'UTF-8';

but when I tried to remove it to the code and reload it again the code changes does not reflect, but when I tried to restart again by doing the make stop and make start command the code changes reflects. Does it necessary to restart always when something like that happened?

Screen Shot 2019-05-08 at 4.33.48 PM.png
Stabyou
@Stabyou
May 08 08:43
now i fixed that error and a new one apeared. "The connection to ws://<domain>/graphql-alpha was interrupted while the page was loading."
anyone?
progranime
@progranime
May 08 09:13
I'm trying to achieve to change the styles globally using less (which is the available by default) then
I tried to change the background-color to red in the index.less file it's under the reaction/imports/plugins/included/default-theme/client/styles/index.less but when I tried to refresh it the changes does not reflect. Is that a wrong place to change the styles globally?
Screen Shot 2019-05-08 at 5.09.45 PM.png
What I saw in the documentation (https://docs.reactioncommerce.com/docs/swag-shop-3) it's only changing the styles internal using js but I want all my styles to be in less/sass files
priyankaa02
@priyankaa02
May 08 09:56
The OAuth2 request resulted in an error.
Error: invalid_request
Description: The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed
Hint: The "redirect_uri" parameter does not match any of the OAuth 2.0 Client's pre-registered redirect urls.
Debug:
You are seeing this default error page because the administrator has not set a dedicated error URL (environment variable OAUTH2_ERROR_URL is not set). If you are an administrator, please read the guide to understand what you need to do. If you are a user, please contact the administrator.
this occur when I click on login or register button of storefront ui
can anyone help me to solve this
what is the concept of pre registered uri with client ?
what is the use of redirect_uri which is mentioned in .env file
how both are the uri's are different with each other
can any one help
please its urgent
Janus Reith
@janus-reith
May 08 12:17
run docker ps
reaction-next-starterkit should be running, as you have somthing where you can click login/register
check that your hdyra container is running aswell - I assume it is, as you get that error page
check that the main reaction container is running as well
check your .env file
are the urls set there properly, especially those starting with OAUTH2_ ?
are you running on localhost, or are you visiting that page from an external computer?
priyankaa02
@priyankaa02
May 08 12:42
all containers are running..can you answer one more que when clicking on signin button why it is redirecting to localhost:3000 instead of my ip:3000 even when I changed all localhost to my ip in .env file
?
Richard Keller
@richardkeller411
May 08 12:45
I have SCSS / SASS loading in Next Reaction Startup kit. It requires new libraries. Changes to the Docker File and changes to the config files for WebPack.
node-sass ( or dart ) have binary specifics so you must account for loading modules that have binaries that the local dev will most likely NOT be Alpine Linux that the Docker Images use. So if you are using Docker in the Dev then you have to account for compiles under Alpine
Richard Keller
@richardkeller411
May 08 12:51
@progranime You need to setup Next config to understand Less or CSS files.
silviuiacobivfuture
@silviuiacobivfuture
May 08 12:52
hey guys . wonderful project and community i can say. but I do have a question : is your meteor reaction dashboard app rendering after 40 to 90 seconds ? O_O its really frightnening
id like some feedback if possible just to know if I shoudl continue struggling with this or not haha
Loan Laux
@loan-laux
May 08 12:52
Mine isn't. What version are you using @silviuiacobivfuture? Are you on the develop branch with the latest changes pulled?
progranime
@progranime
May 08 12:53
@richardkeller411 I will check that out. Thanks
Loan Laux
@loan-laux
May 08 12:53
Or is that a production site with a lot of traffic/products/orders/whatever?
silviuiacobivfuture
@silviuiacobivfuture
May 08 12:54
hey @loan-laux . no its not prod. its running on a dev server.
might be a problem with the rc version ? 2.0.0-rc.11
Loan Laux
@loan-laux
May 08 12:54
Looks like you're running the latest one. Do you have like a million orders in the database or something?
silviuiacobivfuture
@silviuiacobivfuture
May 08 12:54
150 products and 20 orders :))
thats why i said its frightening
i did notice something
Loan Laux
@loan-laux
May 08 12:55
Very strange. Shouldn't take 40 to 90 seconds to open. At least I haven't noticed that on my end.
Richard Keller
@richardkeller411
May 08 12:56
@progranime if Sass.. Here is my Webpack config in next.config.js on dev machine( its a work in progress ) There may be an issue with Sass-Loader I am tracking Down.

/ eslint-disable arrow-parens /
const path = require("path");
const glob = require("glob");

const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const appConfig = require("./config");
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

const nextConfig = {
/**

  • serverRuntimeConfig is available in browser code, ONLY when run on the server
  • @example
  • import getConfig from "next/config";
  • const { serverRuntimeConfig } = getConfig();
    /
    serverRuntimeConfig: {
    graphqlUrl: appConfig.INTERNAL_GRAPHQL_URL
    },
    /*
  • publicRuntimeConfig is available in browser code, even when run on the server
  • @example
  • import getConfig from "next/config";
  • const { publicRuntimeConfig } = getConfig();
    */
    publicRuntimeConfig: {
    canonicalUrl: appConfig.CANONICAL_URL,
    graphqlUrl: appConfig.EXTERNAL_GRAPHQL_URL,
    segmentAnalytics: {
    skipMinimize: appConfig.SEGMENT_ANALYTICS_SKIP_MINIMIZE,
    writeKey: appConfig.SEGMENT_ANALYTICS_WRITE_KEY
    },
    stripePublicApiKey: appConfig.STRIPE_PUBLIC_API_KEY,
    enableSPARouting: appConfig.ENABLE_SPA_ROUTING
    },
    // NextJS builds to /src/.next by default. Change that to /build/app
    distDir: "../build/app",
    webpack: webpackConfig => {
    webpackConfig.module.rules.push({
    test: /.(gql|graphql)$/,
    loader: "graphql-tag/loader",
    exclude: ["/node_modules/", "/.next/"],
    enforce: "pre"
    });

    webpackConfig.module.rules.push({
    test: /.(css|scss)/,
    loader: "emit-file-loader",
    options: {
    name: "dist/[path][name].[ext]"
    }
    });

    webpackConfig.module.rules.push({
    test: /.s(a|c)ss$/,
    resolve: {
    extensions: [".scss", ".sass"]
    },
    use: [
    "babel-loader",
    "raw-loader",
    "postcss-loader",
    {

     loader: "sass-loader",
     options: {
       includePaths: ["scss", "node_modules"]
         .map(dir => path.join(__dirname, dir))
         .map(gl => glob.sync(gl))
         .reduce((ap, cp) => ap.concat(cp), [])
     }

    }
    ]
    });

    webpackConfig.module.rules.push({
    test: /.css$/,
    use: ["babel-loader", "raw-loader", "postcss-loader"]
    });

    webpackConfig.module.rules.push({
    test: /.mjs$/,
    type: "javascript/auto"
    });

    return webpackConfig;
    }
    };

module.exports = withPlugins(
[
// add a plugin with specific configuration
[
withSass,
{
cssModules: true,
cssLoaderOptions: {
localIdentName: "[local]___[hash:base64:5]"
}
}
],
withImages,
withFonts
// optimizedImages, // Try Later
// {
// // these are the default values so you don't have to provide them if they are good enough for your use-case.
// // but you can overwrite them here with any valid value you want.
// inlineImageLimit: 8192,
// imagesFolder: "images",
// imagesName: "[name]-[hash].[ext]",
// handleImages: ["jpeg", "png", "svg"],
// optimizeImages: true,
// optimizeImagesInDev: false,
// mozjpeg: {
// quality: 80
// },
// optipng: {
// optimizationLevel: 3
// },
// pngquant: false
// }
],
nextConfig
);

silviuiacobivfuture
@silviuiacobivfuture
May 08 12:56
lemme share smth with you . im just playing around with it for a university project
apparently it waits for all subscriptions to end O_O
ashwinsoni
@ashwinsoni
May 08 12:59

all containers are running..can you answer one more que when clicking on signin button why it is redirecting to localhost:3000 instead of my ip:3000 even when I changed all localhost to my ip in .env file

@priyankaa02 You may try make init-reaction-next-starterkit or make init-reaction in case of any .env update. Always worked for me.
I don't know why is docker-compose restart not working in that case.
Reference: https://github.com/reactioncommerce/reaction-platform/blob/master/README.md#getting-started

Loan Laux
@loan-laux
May 08 13:01
@silviuiacobivfuture Wow, yeah I have no idea what's happening there. What I know for a fact is that the Reaction team is working to improve performance of the Operator in many parts.
silviuiacobivfuture
@silviuiacobivfuture
May 08 13:01
yeah :P been through quite a few tickets. some ideas are really great
this will be awesome in a year or two.
Loan Laux
@loan-laux
May 08 13:02
Personal opinion, I think we're looking at a couple of months to get 2.0 stable and then it'll be already incredibly improved.
Of course at some point a whole new Operator will be built using GraphQL, but that's a long way from now.
silviuiacobivfuture
@silviuiacobivfuture
May 08 13:05
graphql made me look into reaction
ill contribute for sure
i love this tek stack.
you are an optimist :D
would be so happy to see this fly in a few months
Richard Keller
@richardkeller411
May 08 13:08
@silviuiacobivfuture Mine with similar data set is 3-4 secs with 1.78 Load on Localhost Docker. Did you check your memory settings on Docker/
silviuiacobivfuture
@silviuiacobivfuture
May 08 13:11
how do you mean
@richardkeller411
Richard Keller
@richardkeller411
May 08 13:12
image.png
priyankaa02
@priyankaa02
May 08 13:12
@ashwinsoni Thanks for answering, will try this
silviuiacobivfuture
@silviuiacobivfuture
May 08 13:12
hihi how much memory does it need :))
Loan Laux
@loan-laux
May 08 13:13
@silviuiacobivfuture I run on 6GB dedicated to Docker, out of 16 on my machine
Would recommend 6GB as a sweet spot
silviuiacobivfuture
@silviuiacobivfuture
May 08 13:14
i run it on a 4gb do droplet with 2 cores on ubuntu 18.06 hmm :thinking:
ill increase the specs.
ubuntu ubuntu 18.04 **
thanks !
Ben S.
@bnschmdt
May 08 19:32
where should I be putting the config info for pre-render.io ?
Janus Reith
@janus-reith
May 08 20:18
@bnschmdt Probably nowhere when using the 2.x branch
Nuruddin Badawi
@NuruddinBadawi
May 08 20:54
Screen_Shot_2019-05-08_at_11_52_35_PM.png
hello
who can help me with this feature, I want it in my app
please contact me