Setting up react environment

Setting up react environment
0.0 0

#1

Can anyone help me set up a react.js environment . I tried following
the tutorial written here but get and error when I run npm start : https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.html

here is the error:

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (C:\Users\Brad Baguyo\Desktop\reactApp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactjs@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Can anyone help me fix this problem? If not, can anyone redirected me to other tutorials that work or some sites that can help me fix the problem?


#2

Hi. The most likely issue is that the tutorial is on an outdated version of webpack, and when you installed it yourself, you received the most updated version. There are some breaking changes from one version of webpack to the next.

The link you posted is broken, so I can’t check out the code, but if you see a screenshot of the package.json file, screenshot it (or all of the code) and post it here.


#3

It looks like u are missing some packages try this:

Install with npm:
npm install --save webpack

Install with yarn:
yarn add webpack


#4

@randallwhitlock, here is the link: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

This is my first time doing this kind of thing. Thanks for letting me know about the different versions of webpack


#5

@seonatic, Just downloaded npm install --save webpack and tried to run npm start. still missing the yargs. .

This is what’s written.


× 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactjs@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


#6

@randallwhitlock Maybe I’ll try setting up another react environment from other source? Do you know any up-to-date tutorials?


#7

Thanks everyone for your replies. I tried following the tutorials in this website : https://www.valentinog.com/blog/react-webpack-babel/

It is up-to-date and I successfully made my react js environment. Thanks you for all the infos. I learn so much


#8

refer to facebook’s official site for react.js in the future, they will most likely have the most up to date instructions