fullstackreact / react-yelp-clone Goto Github PK

After adding :

 config.postcss = [].concat([
        require('precss')({}),
        require('autoprefixer')({}),
        require('cssnano')({})
    ])

I'm getting the following error :
\node_modules\webpack\lib\webpack.js:19
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
^

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

• configuration has an unknown property 'postcss'. These properties are valid:
  object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
  For typos: please correct them.
  For loader options: webpack 2 no longer allows custom properties in configuration.
  Loaders should be updated to allow passing options via loader options in module.rules.
  Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
  plugins: [
  new webpack.LoaderOptionsPlugin({
  // test: /.xxx$/, // may apply this only for some modules
  options: {
  postcss: ...
  }
  })
  ]
  at webpack (E:\projects\React\yelpReact\node_modules\hjs-webpack\node_modules\webpack\lib\webpack.js:19:9)
  at Object. (E:\projects\React\yelpReact\node_modules\hjs-webpack\bin\hjs-dev-server.js:53:16)
  at Module._compile (module.js:569:30)
  at Object.Module._extensions..js (module.js:580:10)
  at Module.load (module.js:503:32)
  at tryModuleLoad (module.js:466:12)
  at Function.Module._load (module.js:458:3)
  at Function.Module.runMain (module.js:605:10)
  at startup (bootstrap_node.js:158:16)
  at bootstrap_node.js:575:3

when attempting npm start after adding app.css in the Demo:css modules section of tutorial, this is returned:
TypeError: Cannot read property 'filter' of undefined
at findLoader (/Users/wjt/ReactProjects/welp/webpack.config.js:41:25)
at Object. (/Users/wjt/ReactProjects/welp/webpack.config.js:48:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/Users/wjt/ReactProjects/welp/node_modules/hjs-webpack/bin/hjs-dev-server.js:17:12)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
Failed to load webpack config, please use like this
hjs-dev-server.js webpack.config.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: NODE_ENV=development ./node_modules/.bin/hjs-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start 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/wjt/.npm/_logs/2018-06-29T07_44_31_216Z-debug.log

current suggested solution in comments is deleting node_modules directory, replacing webpack config file w/ tutorial repo version and reinstalling dependencies, theorising that a change in technologies is the reason for the failure, but I would rather find out how to do this using the updated technologies.

The goal is to allow global styles (.css) and module styles (module.css).
I think the configuration is wrong.

$ NODE_ENV=development node

> var config = require('./webpack.config.js');
...
> config.module.loaders
[ ...,
 { test: /[^module]\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path]     [name]__[local]__[hash:base64:5]!postcss-loader' },
 { test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!postcss-loader',
    include: [ '/Users/cdock/Desktop/react-yelp-clone/src' ] },
 { test: /\.css$/,
    include: [ '/Users/cdock/Desktop/react-yelp-clone/node_modules' ],
    loader: 'style!css' } ]

We have 3 css loaders here. Should we only have 2?
Something like this:

> config.module.loaders
[ ...,
 { test: /[^module]\.css$/,
    loader: 'style-loader!css-loader!postcss-loader' },
 { test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!postcss-loader',
    include: [ '/Users/cdock/Desktop/react-yelp-clone/src' ] } ]

As it stands, I'm getting en error when loading global semantic-ui css file:

import React from 'react'
import ReactDOM from 'react-dom'
import App from 'containers/App/App'

import 'semantic-ui/dist/semantic.min.css'
import './app.css'

import makeRoutes from './routes'
const routes = makeRoutes()

const mountNode = document.querySelector('#root')

ReactDOM.render(
  <App routes={routes} />,
  mountNode
)

Error output:

ERROR in ./~/css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!./~/postcss-loader!./~/style-loader!./~/css-loader!./~/semantic-ui/dist/semantic.min.css
/Users/cdock/Desktop/fullstack/node_modules/semantic-ui/dist/semantic.min.css:5:1: Unknown word
var content = require("!!./../../css-loader/index.js!./semantic.min.css");
if(typeof content === 'string') content = [[module.id, content, '']];
^
// add the styles to the DOM

ERROR in ./~/css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!./~/postcss-loader!./~/style-loader!./~/css-loader!./~/semantic-ui/dist/semantic.min.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/input.js:31:23)
    at parse (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/Users/cdock/Desktop/fullstack/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/cdock/Desktop/fullstack/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/semantic-ui/dist/semantic.min.css 4:14-225 13:2-17:4 14:20-231

But this works with fixed webpack.config.js as defined below.

The demo is not loading on iphone as intended.

tried installing on win 10 / osx with node 6 and node 8

can npm install and npm start

localhost:3000 returned title but with blank screen

is there a need to update for latest node or packages for win 10 / osx ?

Thanks

Whenever scripts in the package json are executed, ones with NODE_ENV=development or similar will throw an error. In order to fix it, cross-env was made.

If you are using Windows with Cygwin or similar, run the command

npm install -D cross-env

and then change the code in package.json to the following

"scripts": {
"start": "cross-env NODE_ENV=development ./node_modules/.bin/hjs-dev-server",
"test": "cross-env NODE_ENV=test ./node_modules/karma/bin/karma start karma.conf.js",
"test:watch": "npm run test -- --watch"
},

and the commands should work as expected.

Does any have this problem?

npm install

NODE_ENV=development ./node_modules/.bin/hjs-dev-server

{ Error: ENOENT: no such file or directory, open '.env'
at Object.fs.openSync (fs.js:584:18)
at Object.fs.readFileSync (fs.js:491:33)
at Object.config (/Users/seojin/Programmings/crt_dev/yelp/node_modules/dotenv/lib/main.js:30:37)
at Object. (/Users/seojin/Programmings/crt_dev/yelp/webpack.config.js:40:27)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17) errno: -2, code: 'ENOENT', syscall: 'open', path: '.env' }
Listening at http://localhost:3000
^C

Hello I have got as far as the loading the CSS into webpack on page 18 on the PDF.
I keep getting the following errors when running npm start (see screen shot)
I saw someone else had the same problem on Stackoverflow:
https://stackoverflow.com/questions/39130526/why-webpack-cant-find-loader

Hi Auser! Thanks for posting this tutorial. The only thing is that I am not getting the result that I suppose to get. I clone from repo and followed exactly the way it is stated. I am very new to React and NEM, so please bare with me. I think I am doing wrong with "Configuring the Application" part. Here's what I am having.

Got API and after executing this command->
cp .env.example .env

Inside .env file

Server is running and working fine

The browser shows nothing

What am I doing wrong?

Hey guys,

I followed the tutorial up until "Demo: Basic app.js".

However, when I try to start the hjs-dev-server I get the following error:

Would appreciate some help, thanks!

problem when install --save react react-dom, --save react-router, and npm i -S [dependencies]. do I need to create a debug.log? or there is something wrong with my code?

Thx

ShenghandeMacBook-Pro:smap Han$ npm install --save react react-dom
[email protected] /Users/Han/Desktop/smap
├── [email protected]
└── [email protected]

npm WARN [email protected] No repository field.
ShenghandeMacBook-Pro:smap Han$ npm install --save react-router
[email protected] /Users/Han/Desktop/smap
└── [email protected]

npm WARN [email protected] No repository field.
ShenghandeMacBook-Pro:smap Han$ npm i -S [dependencies]
npm ERR! addLocal Could not install /Users/Han/Desktop/smap/[dependencies]
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/Users/Han/.npm-packages/bin/npm" "i" "-S" "[dependencies]"
npm ERR! node v7.0.0
npm ERR! npm v3.10.9
npm ERR! path /Users/Han/Desktop/smap/[dependencies]
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/Users/Han/Desktop/smap/[dependencies]'
npm ERR! enoent ENOENT: no such file or directory, open '/Users/Han/Desktop/smap/[dependencies]'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /Users/Han/Desktop/smap/npm-debug.log

I assume this is a webpack issue, but I thought I'd ask, I had an issue where I was importing a component that didn't exist in this case import Rating from 'components/Rating/Rating'; I assumed it'd throw module not found or smthing but instead I got an enzyme error which doesn't make much sense besides the fact that enzyme wouldn't be able to render that element, wondering if there are any quick wins to make webpack debugging easier?

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in /Users/gaudi/work/tutorials/yelp/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 37:16-39

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ReactContext' in /Users/gaudi/work/tutorials/yelp/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 38:23-56

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/gaudi/work/tutorials/yelp/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 68:4-45

I dont why it not running.
Please help ! Thank you.

I've done everything according to the instructions in README.md starting from installing dependencies, adding API key to .env. Not entirely sure where to go from here. I've tried changing the port as well.

TypeError: Cannot read properties of undefined (reading 'filter')
at findLoader (C:\Users\msi\Downloads\Github\react-yelp-clone\webpack.config.js:68:25)
at Object. (C:\Users\msi\Downloads\Github\react-yelp-clone\webpack.config.js:73:3)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\msi\Downloads\Github\react-yelp-clone\node_modules\hjs-webpack\bin\hjs-dev-server.js:17:12)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
Failed to load webpack config, please use like this
hjs-dev-server.js webpack.config.js

Hello, new to React and can't seem to figure out the cause of an error.

NODE_ENV=development ./node_modules/.bin/hjs-dev-server
/PROJ/webpack.config.js:22
const cssModulesNames = '${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]';
                                                ^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mihirpatel/Desktop/life of mi/code/personal_projects/react-foodsearch/node_modules/hjs-webpack/bin/hjs-dev-server.js:17:12)
    at Module._compile (module.js:570:32)
Failed to load webpack config, please use like this
hjs-dev-server.js webpack.config.js

good day, in this article i can't run npm start script .

i write nmp start in console ang got error:

$ npm start

[email protected] start c:\OpenServer\domains\cloning-yelp NODE_ENV=development hjs-dev-server
"NODE_ENV" ▒▒ ▒▒▒▒ ▒▒▒▒७▒▒▒ ▒▒▒ ▒▒▒譥▒ ▒▒▒▒▒▒▒▒, ▒ᯮ▒▒塞▒▒ ▒ணࠬ▒▒▒ ▒▒▒ ▒▒▒▒▒▒ 䠩▒▒▒.

npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start" npm ERR! node v6.2.0 npm ERR! npm v3.8.9 npm ERR! code ELIFECYCLE npm ERR! [email protected] start: NODE_ENV=development hjs-dev-server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script 'NODE_ENV=development hjs-dev-server'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the cloning-yelp package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! NODE_ENV=development hjs-dev-server npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs cloning-yelp npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls cloning-yelp npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! c:\OpenServer\domains\cloning-yelp\npm-debug.log

what i did wrong?

p.s. and if i directly write NODE_ENV=development ./node_modules/.bin/hjs-dev-server . it's work fine

First, thank you guys effort to let us get the skill of react,Thanks!
while , I yo react-gen，this is some errors happen like something missed:

AssertionError: Trying to copy from a source that does not exist: /Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/generators/app/templates/.env
at EditionInterface.exports._copySingle (/Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/node_modules/yeoman-generator/node_modules/mem-fs-editor/lib/actions/copy.js:45:3)
at EditionInterface.exports.copy (/Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/node_modules/yeoman-generator/node_modules/mem-fs-editor/lib/actions/copy.js:23:17)
at EditionInterface.module.exports as copyTpl
at tplCopy (/Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/generators/app/index.js:7:11)
at /Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/generators/app/index.js:17:5
at Array.forEach (native)
at dest (/Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/generators/app/index.js:16:9)
at module.exports.yeoman.Base.extend.prompting.writing.features.forEach as writing
at Object. (/Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/node_modules/yeoman-generator/lib/base.js:431:23)
at /Users/ivan/.npm-packages/lib/node_modules/generator-react-gen/node_modules/yeoman-generator/node_modules/run-async/index.js:26:25

Is there any thing I did't get? It's look like somethig removed from NPM?

node version: v4.4.1
npm version: v2.14.20
yo version: 1.8.4

When i open http://localhost:3000/ , url is changed to http://localhost:3000/#/ (without ?_k) and project correctly open without errors. And, when i reload this page, it is hidden http://take.ms/Sx9Ks .

while running win10.

I came across this problem while building up from the tutorial, but decided to try running it from this repo to see where i may have gone wrong. I cloned this repo, ran npm install, made new .env, and then npm test:

I get exactly the same problem as I had when building up from the tutorial- all enzyme-based tests fail with for example:

6) "before each" hook for "has a Router component"
     <App />
     null is not an object (evaluating 'ReactInstrumentation.debugTool.onSetDisplayName')
ShallowComponentWrapper@C:/react/react-yelp-clone/tests.webpack.js:79151:34
_render@C:/react/react-yelp-clone/tests.webpack.js:79201:48
_batchedRender@C:/react/react-yelp-clone/tests.webpack.js:79183:20
batchedUpdates@C:/react/react-yelp-clone/tests.webpack.js:11314:16
batchedUpdates@C:/react/react-yelp-clone/tests.webpack.js:1175:35
render@C:/react/react-yelp-clone/tests.webpack.js:79176:31
render@C:/react/react-yelp-clone/tests.webpack.js:27705:44
C:/react/react-yelp-clone/tests.webpack.js:55934:33
perform@C:/react/react-yelp-clone/tests.webpack.js:3917:25
batchedUpdates@C:/react/react-yelp-clone/tests.webpack.js:11316:27
batchedUpdates@C:/react/react-yelp-clone/tests.webpack.js:1175:35
C:/react/react-yelp-clone/tests.webpack.js:55933:42
withSetStateAllowed@C:/react/react-yelp-clone/tests.webpack.js:45109:6
ShallowWrapper@C:/react/react-yelp-clone/tests.webpack.js:55932:39
shallow@C:/react/react-yelp-clone/tests.webpack.js:74201:42
C:/react/react-yelp-clone/tests.webpack.js:61263:36

if one changes the browser from Phantomjs to Chrome
then the error message is slightly different

Chrome 51.0.2704 (Windows 10 0.0.0) ERROR
  Uncaught TypeError: Cannot convert a Symbol value to a string
  at http://localhost:9876/context.js:64

I suspect there is an issue here with karma since i could successfully write a test using just enzyme and mocha.

I was following along the tutorial but at step Demo: Basic app.js when I ran NODE_ENV=development ./node_modules/.bin/hjs-dev-server it is giving this error:

and at http://localhost:3000 it is showing:
Cannot GET /

Please help!

It might be helpful to include somewhere that for Windows users, their npm start script should be SET NODE_ENV=development ./node_modules/.bin/hjs-dev-server, otherwise they get a message that the variable doesn't exist.

Cloning the repo, running npm i and npm start gives me the following error when I load the page.

I am running on a mac.

I have tried removing the node_modules folder and installing again, but it didn't help. Any clues?

ERROR in ./~/google-maps-react/dist/index.js
Module not found: Error: Cannot resolve module 'invariant' in /Users/sorenbs/Code/react-yelp-clone/node_modules/google-maps-react/dist
 @ ./~/google-maps-react/dist/index.js 3:4-184

ERROR in ./~/google-maps-react/dist/lib/GoogleApi.js
Module not found: Error: Cannot resolve module 'invariant' in /Users/sorenbs/Code/react-yelp-clone/node_modules/google-maps-react/dist/lib
 @ ./~/google-maps-react/dist/lib/GoogleApi.js 3:8-49

I get the following error when I run npm start on windows -

NODE_ENV=development ./node_modules/.bin/hjs-dev-server

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.

This example is working fine on OSX. Is there an alternate way to start script to run this on windows?

Upon npm install, there seems to be an problem where the included version of react-router requires a pre-3.0 version of history, yet history 3.0 is installed.

debug.txt

I ran npm run test and got the following