danielstern / isomorphic-react Goto Github PK

View Code? Open in Web Editor NEW

380.0 19.0 261.0 726 KB

A simple but powerful React application built on a standards-compliant back-end

Home Page: https://isomorphic-react-x.herokuapp.com/

JavaScript 97.52% HTML 2.48%

react redux react-router hot-module-replacement isomorphic universal webpack

isomorphic-react's Introduction

Isomorphic React

Updated 2021 Version

As of February 2021, the Jest Branch is now merged into the main branch of this project

A Starter Isomorphic React Application with All Best Practices and No Frills

About The Application

This application is a basic API client which gathers data from an outside API (in this case, Stackoverflow) and generates an isomorphic, single-page application (SPA).

Why Isomorphic React?

Great question!

Uses React / Redux as main application engine
Supports hot reloading and server rendering!
Uses React Router (in a combination with server rendering that is truly amazing)
No fluff, just the good stuff

Getting Started

Clone the repository
install dependencies npm install && npm run postinstall
Run the dev server npm run start-dev
Navigate to the application's url http://localhost:3000/

Usage

Enabling / Disabling Server Rendering

Server rendering is great, but sometimes we want to disable it when there's an error in our render and we'd rather troubleshoot it in the client. This setting is passed in as a CLI argument via the --useServerRender=true argument. You can modify this in package.json to --useServerRender=false which will disable any server-side rendering functionality.

Enabling / Disabling Live Data

This application is designed to grab the latest data from Stackoverflow.com. However, their API has a strict request limit which means that no questions will be returned after X requests (usually 300). Therefore, the application comes loaded with mock-questions in the data directory. To ease the learning process by eliminating potential sources of error, live data is disabled by default. However, you are strongly encouraged to use live data once you understand the associated pitfalls.

Note: You can increase your allotted requests to a much larger number by registering an application here, https://stackapps.com/apps/oauth/register and then appending the key to the URLs in data/api-real-url.js

Production Build

This application fully supports a production build setting, which disables live reloading in favor of precompiled and uglified JS, which boosts performance. To run production, run the command npm run start-prod, which automatically triggers the build script. This mode is recommended for production. However, this boilerplate has never been used in actual production so utilize caution if deploying as a real application.

Troubleshooting

`unexpected token import`

This error appears when babel is not configured correctly. This can actually be caused by outdated global dependencies, and is hard to fix. For best results, try the following -

Install babel-register as a local saved dependency
Update global versions of babel, webpack and all dependencies to latest / course versions

Any Error That is Taking a Long Time to Troubleshoot

Things can always go wrong in the world of programming. If this happens, clone the master branch of this repo to a new directory and run the installation instructions. If desired, you can work backwards, pruning extra files until you get the application in the state you want.

Problems with the Repo

I want this repo to work perfectly for as many users as possible. Got a problem? Open an issue! Let's figure out a solution together.

isomorphic-react's People

Contributors

Stargazers

Watchers

Forkers

rengokantaicourse jorgeitenjr sandylib ufo2mstar miguelgimenezgimenez tomekmoryl abrambueno1992 thepixelboy bildungsroman tirunagari1 nykysoft bovas85 divinetouch janelbrandon dannyleiton neilhalligan vmandic diwakersurya luismoriguerra aleesham laszlo-lazuer ramyatata ocalvet billonline33 joshwl2003 dduggiraju deomsj binoysinha collins33 jmiquel hrai wsparsons siva-govindan jgordy oalberto96 drtran jaydreyer bbenefield89 sophiaprice shishkovoleg dacogemini prsdcse chandarsunderraj ryanrasmussen gkapatia nitinreddy3 vibhor94 josiblair sjbuysse calsaviour javascrifer reiniermujica mobydickens pushnoy100500 angellopezbellmont sunakshitejwani rabira-hierpa tedkimdev jaypsl wafflebag koni55 hlltarakci dailymp sandervn lauren-rutledge thuyvq93 karlmet nicholaspedroso dalalsunil1986 rodhall85 ppywmjr edelrabe renishb10 kevbite lparkermg rbaryla sarangk90 johnnybee4e faltherr classicmatsuo hong-zhou floroz bj1976 ahebwa49 bank8426 ankitagnihotri orlovskyjavaprofi sanpanthera andie5 vfarah-if husseinmansour6 imana97 jl201835 itpreneur nyagz kinowarrior sjhang germancardenasm alanphanth adkaushik

isomorphic-react's Issues

THis does not work

'babel-node' is not recognized as an internal or external command,
and there no package called babel node.

Images

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

I just pulled down the repo and ran npm install && npm run postinstall

When I run npm run start-dev, I get the following error:

C:\Projects\Playground\react\pluralsight\testing-react-applications-jest\isomorphic-react\node_modules@babel\helper-plugin-utils\lib\index.js:72
throw Object.assign(err, {
^

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Any ideas?

Ignore this issue

Resolve Alias Support Additions

[Found the solution -- At end]

I've left the question here in case any one else comes across this issue *

Hello,
I've been adapting a current project to a isomorphic app (from CRA + Prerender).

I've heavily used aliases within the code base, I've been trying to get them to work with your setup, however it can never find the module:

import TagsList from 'components/TagsList' (not working) instead of import TagsList from './TagsList' (working)

Usually the resolves have been working fine with a webpack config such as the below:

resolve: { extensions: ['*', '.js', '.jsx'], alias: { components: path.resolve(__dirname, 'src/components') }

However, within the scope of express, babel-node & webpack:
webpack --mode production correctly builds the project
cross-env NODE_ENV=development babel-node server --useServerRender=true --useLiveData=false results in the aliased modules not found.

Could this be a bundle issue from webpack? --Babel needs the alias
I believe I've missed something, or Am I doing the resolves wrong with babel? Babel needed the alias, hence why it worked with production.
Is there any specific way to use resolves so aliasing works? -- Module Resolver

SOLUTION:

Use: https://www.npmjs.com/package/babel-plugin-module-resolver
["module-resolver", { "root": ["./src"],"alias": {"components": "./src/components"}}]

Incorrect configuration in package json for dependency

All the packages are showing under dependency. Can you please confirm if this is the right way? Is there no major difference between dependency and devDependency? Will all web-pack and other local/dev related package will not be part of production build?

First clone of master doesn't match beginning of pluralsight class

This isn't a big deal for experienced devs but for beginners it may be a problem.

I cloned the repo then followed the instructions in the pluralsight course on testing react. Jest isn't supposed to be installed and there aren't supposed to be any tests.

I get the following output from running master that isn't in the video

Ran all test suites.
console.warn src/services/mocks/NotificationsService.js:8
GOOD JOB! USING MOCK SERVICE

console.warn src/services/mocks/NotificationsService.js:8
GOOD JOB! USING MOCK SERVICE

console.log src/components/NotificationsViewer.jsx:15
componentDidMount count: 42

console.log src/components/NotificationsViewer.jsx:23
componentDidUpdate count: 42

console.log src/components/NotificationsViewer.jsx:15
componentDidMount count: 42

console.log src/components/NotificationsViewer.jsx:23
componentDidUpdate count: 42

console.log src/components/NotificationsViewer.jsx:15
componentDidMount count: 42

console.log src/components/NotificationsViewer.jsx:23
componentDidUpdate count: 42

console.log src/components/NotificationsViewer.spec.js:39
text is: 42 Notifications Awaiting

require("history").createMemoryHistory issue

Please userequire("history").createMemoryHistoryinstead ofrequire("history/createMemoryHistory"). Support for the latter will be removed in the next major release

i got this error tried to work around it but still cant be resolved

Required Change to package file !!

I was having issues with my build process crashes as you know, after two days and playing around I realized its because Heroku has a 60-second kill switch if the port doesn't bind.

The build needs to be in the post-install, it cannot be in the start. This is advised in their documentation

Daniel

Error on start

I keep getting this error whenever I run the project:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

TypeError: (0 , _fetchQuestionSaga.handleFetchQuestion) is not a function

On module 6 in the "Mocking - Demo" video, a get the error "TypeError: (0 , _fetchQuestionSaga.handleFetchQuestion) is not a function"

This is that I have

import { handleFetchQuestion } from "./fetch-question-saga";

describe("Fetch questions saga", () => {
  it("should fetch the questions", async () => {
    const gen = handleFetchQuestion({ question_id: 42 });
    const { value } = await gen.next();
  });
});

The jest output is

 FAIL  src/sagas/fetch-question-saga.spec.js
  Fetch questions saga
    × should fetch the questions (2 ms)

  ● Fetch questions saga › should fetch the questions

    TypeError: (0 , _fetchQuestionSaga.handleFetchQuestion) is not a function

      3 | describe("Fetch questions saga", () => {
      4 |   it("should fetch the questions", async () => {
    > 5 |     const gen = handleFetchQuestion({ question_id: 42 });
        |                 ^
      6 |     const { value } = await gen.next();
      7 |   });
      8 | });

      at Object.<anonymous> (src/sagas/fetch-question-saga.spec.js:5:17)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.148 s
Ran all test suites matching /fetch-question/i.

Cannot find module 'babel-plugin-transform-object-rest-spread' from

Steps to reproduce run below:

git clone
git checkout jest
npm i
npm run test-dev

` FAIL src/reducers/questions.spec.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/components/tests/QuestionDetail.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/components/QuestionList.spec.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/sagas/fetch-question-saga.spec.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/components/tests/NotificationsViewer.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/App.spec.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

FAIL src/components/TagsList.spec.js
● Test suite failed to run

Cannot find module 'babel-plugin-transform-object-rest-spread' from '/Users/manishjain/isomorphic-react'

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:69:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (node_modules/@babel/core/lib/config/config-descriptors.js:40:19)

Test Suites: 7 failed, 7 total
Tests: 0 total
Snapshots: 0 total
Time: 2.153s
Ran all test suites.

Watch Usage: Press w to show more.

Demo branch already has tests

I'm following the course on PluralSight and want to code along with the starter files. However, the code form the jest-demo branch already contains all the test files and the test runs correctly from the beginning, which is not supposed to work like that (according to the video).

Any steps on deploying in firebase

Throwing errors

Error: Cannot find module 'uglifyjs-webpack-plugin'

Warning: Please use require("history").createMemoryHistory instead of require("history/createMemoryHistory"). Support for the latter will be removed in the next major release.
node:internal/modules/cjs/loader:936

Bundle Size Warning !

Hi Daniel

Curious question @danielstern

Your completely basic program gets warnings for bundle size as is (Production Build, Untouched), which is concerning?

I'm thinking this app is super small, but still hits them limits already.

What kinda bundle sizes are you getting with this basic app?

Is all the server stuff bundled in for the client in this app?

Suppose I am assuming I can reduce prod size to the very low right using your structure?

Thoughts?

Daniel Gadd

Can we add CSS support?

Hi,

I tried but facing issues with enabling CSS in the boilerplate.

Issue type :-
/Users/mohit/Documents/isomorphic-react/src/app.css:1
.p {
^
SyntaxError: Unexpected token .

I do want to support below stuff :-

CSS / SCSS with / without CSS module
Combined CSS using https://webpack.js.org/plugins/mini-css-extract-plugin/
Require help to understand such modules to render on NODE/Server side.

what happend to 'Cannot set headers after they are sent to the client'

what happend to 'Cannot set headers after they are sent to the client' when i use res.send(index)

ERROR in bundle.js from UglifyJs Unexpected token: punc (}) [bundle.js:3358,0]

Hi,

I am getting the following error when running the

$ npm start
ERROR in bundle.js from UglifyJs
Unexpected token: punc (}) [bundle.js:3358,0]

Both $ npm install and
$ npm run postinstall worked perfectly.

Any help greatly appreciated. Am new to React and have fallen at the first hurdle.

Regards

Sally

Invariant failed: You should not use <Link> outside a <Router>

Error: Invariant failed: You should not use Link outside a Router
at invariant (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
at Object.children (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/react-router-dom/modules/Link.js:89:11)
at ReactDOMServerRenderer.render (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/react-dom/cjs/react-dom-server.node.development.js:3635:55)
at ReactDOMServerRenderer.read (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
at renderToString (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
at /Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/server/index.jsx:88:29
at Generator.next ()
at onFulfilled (/Users/karnadeeprana/Documents/ReactWorkspace/isomorphic-react/node_modules/co/index.js:65:19)

Fix/Change - HMR & node_ENV++: webpack.config.dev.babel.js

#1: webpack.config.dev.babel.js

module.exports = {
/**
* The scripts in entry are combined in order to create our bundle
*/
mode: 'development',
entry: [
'webpack-hot-middleware/client?reload=true',
'babel-regenerator-runtime',
path.resolve(__dirname, 'src')
],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},

.....

##2: webpack.config.dev.babel.js

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('development'),
            WEBPACK: true
        }
    }),

###3: package.json/terminal install

npm install terser-webpack-plugin@^4 --save-dev
npm i webpack@^4 uglifyjs-webpack-plugin@^2

How to add Environment Variabled on heroku to the production webpack file ?

I am havinv this issue where I cannot seem to figure out how to add my heroku environment varibles to the production webpack file ?

Has anyone ever solved this issue ?

Daniel Gadd

Cannot find module 'uglifyjs-webpack-plugin'

I've cloned this repo and followed the README.md:
npm install
nmp run postinstall
npm run start-dev

During install there are a few warnings about deprecating dependencies breaking on node v14+
Then when I try and run it I get the - Cannot find module 'uglifyjs-webpack-plugin' error.

Open Issues | Dev mode and Hot Reloading

Hi,

I have just explored the boilerplate. You have done an amazing job with nice and simple setup of boilerplate.

I have found couple of open issues :-

Dev Mode : npm run start-dev command is not working, giving below error

	throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
	^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Warning on createMemoryHistory, below is the error description

require("history").createMemoryHistory instead of require("history/createMemoryHistory"). Support for the latter will be removed in the next major release.

Hot reloading is not working

Although if dev command is not working, so we can not move on this setup to validate the hot reloading case. I have made the fixes to run the dev command, later i have identified another issue i.e hot reloading, on changes, browser do not reflect the latest changes made by me.

The good part :-

I have fixed all the open items, would be interested to share the fix with you. Please let me know the next steps.

Happy Coding !
Thanks
Mohit

Isomorphic-react not running in 2020.

I can't get the course files to run. I get a lot of errors mostly related to the fact that Babel no longer supports es2015.

First error is a problem with Uglify:

ERROR in bundle.js from UglifyJs
Unexpected token: punc (}) [bundle.js:5644,0]

Then a MODULE_NOT_FOUND error from cross-env

{
  code: 'MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `cross-env webpack --config ./webpack.config.prod.babel.js`

It doesn't get much better from there. Any chance you're feeling like updating this course for 2020?

Not changed styles by HMR after route change

I added the following button to the detailed view of record, lets call it RootButton, and met some kind of a bug.
The following code it related to the button:
<Link to={'/'}><Button block={true} color="warning" size="small">Back</Button></Link>
The problem is, that everytime when I change button's color property, HMR seems to work properly and it is visible that, for example, warning has changed to primary and button changed its representation, however if I will go to the root page and then click on another "More info" button, then this LinkButton of that record page will look oldstyled, i.e. with warning style.

Netlify giving PageNotFound Error

Hi,

I have deployed the application on netlify. The build is successful and the logs show site is deployed message. But when I try to preview the site it says PageNotFound.
I have provided the run build command as -- npm run build and Publish directory as ./dist.
build logs are at logs

can anybody help here , what's missing?

Having issue with start ?

made a few modifications on the webpack config
`const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

/**

Production Webpack Config bundles JS, then uglifies it and exports it to the "dist" directory
See Development webpack config for detailed comments
/
module.exports = {
mode: 'development',
entry: [
'babel-regenerator-runtime',
path.resolve(__dirname, 'src')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
WEBPACK: true
}
}),
/*
* Uglifies JS which improves performance
* React will throw console warnings if this is not implemented
*/

],
resolve: {
extensions: ['.js', '.json', '.jsx'],
},
module: {
rules: [
{
test: /.jsx?$/,
use: {
loader: 'babel-loader'
},
include: path.resolve(__dirname, 'src')
}
]
}
};`

in case you are having error none related to this :
I also tried rm -rf node_modules && npm cache clean --force && npm install

Getting unknown plugin while trying to use @babel/plugin-proposal-object-rest-spread

Hi,

I am trying to run the project with the dependencies exactly specified in package.json.

{
  "name": "isomorphic-react",
  "version": "1.0.0",
  "description": "An isomorphic React application implementing latest development standards",
  "main": "index.js",
  "scripts": {
    "start" : "cross-env NODE_ENV=development babel-node server --useServerRender=true --useLiveData=false"
  },
  "keywords": [],
  "author": "Daniel Stern (Code Whisperer)",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-regenerator-runtime": "^6.5.0",
    "copy-webpack-plugin": "^4.1.1",
    "cross-env": "^5.0.5",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "express": "^4.16.1",
    "express-yields": "^1.1.1",
    "fs-extra": "^4.0.2",
    "history": "^4.7.2",
    "isomorphic-fetch": "^2.2.1",
    "jest": "^24.8.0",
    "lodash": "^4.17.4",
    "optimist": "^0.6.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-markdown": "^2.5.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-router-server": "^4.2.2",
    "react-test-renderer": "^16.8.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.15.6",
    "request": "^2.83.0",
    "request-promise": "^4.2.2",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1"
  }
}

My .babelrc

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env", 
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

The response I get is:

ReferenceError: Unknown plugin "@babel/plugin-proposal-object-rest-spread" specified in "/home/node/app/.babelrc" at 0, attempted to resolve relative to "/home/node/app"

Running on node 10 with docker image: node:10-jessie

I would highly appreciate your help here.

Thanks.

Can we use this approach in .net core?

I used your approach in various nodeJs server solution and is working well.
but recently I have this idea to use .netcore for server side.
my questions are, if you agree with choosing .netcore over nodejs and if there is a good solution for this ?

pluralsight.com: unable to run the repo (unhandled error event)

I have tried to clone the master branch twice, installed an early version of node (did not work) with no luck. you suggested in the .md to upgrade the global version of webpack, but as I have a current live clients ecommerce site on the system I can not - besides it is bad practice to have a globally installed webpack.

The result after performing a 'start-dev' was the following:
➜ isomorphic-react git:(master) ✗ yarn run start-dev
yarn run v1.16.0
$ cross-env NODE_ENV=development babel-node server --useServerRender=true --useLiveData=false
Warning: Please use require("history").createMemoryHistory instead of require("history/createMemoryHistory"). Support for the latter will be removed in the next major release.
events.js:182
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 0.0.0.0:3000
at Object._errnoException (util.js:1041:11)
at _exceptionWithHostPort (util.js:1064:20)
at Server.setupListenHandle [as _listen2] (net.js:1322:14)
at listenInCluster (net.js:1370:12)
at doListen (net.js:1492:7)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:611:11)
at Object. (/MyFiles/development/jest/isomorphic-react/node_modules/@babel/node/lib/_babel-node.js:234:23)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:598:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜ isomorphic-react git:(master) ✗ node -v
v8.4.0
➜ isomorphic-react git:(master) ✗

I copied it from the terminal. Can you please help on this as I have wasted so much time.
Thanks :)

Stop the app to make ajax call for home page

when we make a get request to home page of the app, for example through the browser, the ajax call to get the list of all questions is redundant, because of server side rendering, we have populate the list of question from server,

so how can stop the app to make ajax request when the html is rendered from server ?

TypeError: context.compiler.plugin is not a function

Hello @danielstern

I'm getting this error trying to run the app. Can you help me out, please? Thanks

npm -v: 6.14.10
node -v: v14.15.4

npm run start-dev              

> [email protected] start-dev /Users/denistoledo/Dev/testing-react-applications-with-jest
> cross-env NODE_ENV=development babel-node server --useServerRender=false --useLiveData=false

Warning: Please use `require("history").createMemoryHistory` instead of `require("history/createMemoryHistory")`. Support for the latter will be removed in the next major release.
/Users/denistoledo/Dev/testing-react-applications-with-jest/node_modules/webpack-dev-middleware/lib/Shared.js:233
        context.compiler.plugin("done", share.compilerDone);
                         ^

TypeError: context.compiler.plugin is not a function

request: solutions to challenges

I know it makes it less of a challenge, in a way, but it would be awesome if there was a repo or branch that I could look at while I'm working out the challenges. Sometimes it's a wee syntax error (or a much broader understanding issue) that seeing the correct result would help me understand. I get it if you don't want to put that work in, but I had to ask 😄

PS. AWESOME course, and I'm excited to see other Ontarians doing the good work!

stateful component test failing

Demo clip on NotificationViewer: https://app.pluralsight.com/player?course=testing-react-applications-jest&author=daniel-stern&name=f31785ac-30f9-4d02-aab6-473c85ce6770&clip=8&mode=live

Stackoverflow question posted here: https://stackoverflow.com/questions/56637899/jest-stateful-component-with-async-function-failing-test

Pull-request with code here: #19

I have the NotificationsViewer service mocked and am able to change count to 42 or 5. However the test still fails and text is still "Loading..."

It seems to me that the await delay() is not letting the life cycle methods run first before the expect block is tested. Because the results of console.log('text is:', text); are hit first, then the componentDidMount and componentDidUpdate logs are hit.

Access Denied issue for /usr/local/lib/node_modules

hi,
While running npm install i am getting the following error . It is a permission issue.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/karnadeeprana/.npm/_logs/2021-09-08T09_14_55_728Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 243
npm ERR! [email protected] postinstall: npm install -g [email protected] [email protected] [email protected]
npm ERR! Exit status 243
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/karnadeeprana/.npm/_logs/2021-09-08T09_14_55_799Z-debug.log
Karnadeeps-MacBook-Air:isomorphic-react karnadeeprana$

Convert to ts

I want to convert this repo to ts version, did you do it ?
if yes please give me repo address , if no, please tell me how to do it ?

Support for WebPack 4.6.0

I tried this running with WebPack 4.6.0 but there is an error coming from entry property of webpack.config.dev.babel.js

ERROR in multi webpack-hot-middleware/client?reload=true babel-regenerator-runtime ./src
Module not found: Error: Can't resolve '/Users/Workspace/Garage/isom-react/src' in '/Users/Workspace/Garage/isom-react'
 @ multi webpack-hot-middleware/client?reload=true babel-regenerator-runtime ./src

ERROR in multi webpack-hot-middleware/client?reload=true babel-regenerator-runtime ./src
Module not found: Error: Can't resolve 'webpack-hot-middleware/client?reload=true' in '/Users/Workspace/Garage/isom-react'
 @ multi webpack-hot-middleware/client?reload=true babel-regenerator-runtime ./src

Plugin/Preset files are not allowed to export objects, only functions.

Babel settings it needs update. But if you run jest tests you receive the errors:

Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/xxx/isomorphic-react-jest/node_modules/babel-preset-react/lib/index.js

at createDescriptor (../../../../usr/local/lib/node_modules/jest-cli/node_modules/@babel/core/lib/config/config-descriptors.js:178:11) at Array.map (<anonymous>)

danielstern / isomorphic-react Goto Github PK

isomorphic-react's Introduction

Isomorphic React

Updated 2021 Version

A Starter Isomorphic React Application with All Best Practices and No Frills

About The Application

Why Isomorphic React?

Getting Started

Usage

Enabling / Disabling Server Rendering

Enabling / Disabling Live Data

Production Build

Troubleshooting

unexpected token import

Any Error That is Taking a Long Time to Troubleshoot

Problems with the Repo

isomorphic-react's People

Contributors

Stargazers

Watchers

Forkers

isomorphic-react's Issues

Recommend Projects

Recommend Topics

Recommend Org

`unexpected token import`