Git Product home page Git Product logo

pwa's Issues

Server-side rendering and async routing

Hi!

When I render a synchronous route on server-side and then the client side hydrate the dom, I get a warning because client side asynchronous route don't expect to find the component.

image

In other hand react fiber reconciliation tries to remove this non hydratable node. So the page makes a blank flash on client side :(

image

Issue with common chunk plugin

Hi i am trying to modify the webpackclient.js file.

  entry: {
    main: './client/index.js',
    vendor: ['./client/vendor/js/index.js', './client/vendor/css/index.css'],
    modOne: './client/views/Chunk.js',
  }

In the entry i have added one more entry point modOne which contains chunk.js
chunk.js is contains present the view folder which imports these from the same view folder.

import Detail from './Detail/Detail';
import NotFoundPage from './NotFoundPage/NotFoundPage';

Changes i made in the route folder are

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import importCss from 'core/importCss';
import Wrapper from 'views/Wrapper/Wrapper';
import NotFoundPage from 'views/NotFoundPage/NotFoundPage';
import Detail from 'views/Detail/Detail';

export default (
  <Route path="/" component={Wrapper}>

    <Route
      name="landing"
      getComponent={(_, cb) => {
        Promise.all([
          import('views/LandingPage/LandingPage' /* webpackChunkName: 'landing' */),
          importCss('landing'),
        ]).then(([module]) => cb(null, module.default));
      }}
    />
    <IndexRoute name="modOne" component={Detail} />
    <Route name="modOne" path="*" component={NotFoundPage} />

  </Route>
);

Here is the common chunk configuration

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new CleanWebpackPlugin(['./build/client']),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isProd ? '"production"' : '"development"',
      __BROWSER__: true,
      __PWA_ENV__: JSON.stringify(__PWA_ENV__),
      __LOCAL__: __PWA_ENV__ === 'local',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'webpackManifest'],
      minChunks: Infinity,
    }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'main',
    //   children: true,
    //   minChunks: 2,
    // }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'modOne',
      chunks: ['main', 'modOne'],
      minChunks: 2,
    }),

but the issue is that when i make a build and run the code on localhost:1377 i get a error in the console as -

webpackManifest.afbe5cc0.js:formatted:10 Uncaught TypeError: Cannot read property 'call' of undefined
    at n (webpackManifest.afbe5cc0.js:formatted:10)
    at Object.6rQ3 (main.bf018efd.js:1)
    at n (webpackManifest.afbe5cc0.js:formatted:10)
    at window.webpackJsonp (webpackManifest.afbe5cc0.js:formatted:26)
    at main.bf018efd.js:1

Please let me know what wrong i am doing with common chunk plugin.

npm install fails on Windows 10 

$ npm install

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\integer
> node tools/install


C:\www\NodeJS\React-Express\pwa\node_modules\integer>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Program Files (x86)\Python36-32\python.exe", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\www\NodeJS\React-Express\pwa\node_modules\integer
gyp ERR! node -v v8.9.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\farmhash
> node-gyp rebuild


C:\www\NodeJS\React-Express\pwa\node_modules\farmhash>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Program Files (x86)\Python36-32\python.exe", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\www\NodeJS\React-Express\pwa\node_modules\farmhash
gyp ERR! node -v v8.9.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\pre-commit
> node install.js


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\spawn-sync
> node postinstall


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\preact
> node -e "console.log('\u001b[35m\u001b[1mLove Preact? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/preact/donate\u001b[0m')"

Love Preact? You can now donate to our open collective:
 > https://opencollective.com/preact/donate
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\integer):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node tools/install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\farmhash):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

Python env variable exists and specify path to C:\Program Files (x86)\Python36-32\python.exe.
npm config set python 'C:\Program Files (x86)\Python36-32\python.exe' or npm install --python= 'C:\Program Files (x86)\Python36-32\python.exe' give the same result.

node v8.9.0
npm 5.5.1
$ python -V
Python 3.6.1

R Router 4

Any chance of a react-router 4 update?

Thanks!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.