Where to put webpack.config.js in React project?

Where to put webpack.config.js in React project? - javascript

I obtained already existing React project and I'm supposed to continue with it.I never used React before. I need to use web worker in the project - there's a project that suits my needs: Worker Loader
The suggest one adds this to their webpack.config.js:
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
Then use worker like this:
import Worker from './file.worker.js';
const worker = new Worker();
But even though I can see that my React project uses webpack and babel o the background, there is no .babelrc or webpack.config.js in the project. This is how I run the project:
npm start
That actually runs react-scripts start based on what I see on package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Neither webpack nor babel are in package.json dependencies, so I really have no idea how are they run by React. I would really appreciate if someone explained to me how does it work and how to configure webpack to use worker loader.

You need to run npm run eject first.
This command will copy all of your configuration files into your project(including webpack.config.js). However, run this command only if you MUST because although you will have full control over your configuration, you'll be on your own. React won't manage the configuration for you anymore.

Not sure 100%, but I think this app was created using react starter kit called Create React App and it comes with a package called react-scripts which is a wrapper around the build tools -- webpack being one of them. So lookup that stuff in npm. It might be all taken care of for you
Also, see what you have under node_modules directory --i am guessing it's all there

Related

Web3 Issue : React Application not compiling

I am facing issue with React application while compilation.
Please find the issue below and screenshot.
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/node_modules/web3-providers-http/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
# ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
# ./node_modules/web3-core/lib/index.js 23:23-58
# ./node_modules/web3/lib/index.js 32:11-31
# ./src/index.js 10:0-24 14:13-17
On scrutiny, I found out Issue is with web3 related dependencies :
https://www.npmjs.com/package/web3
https://www.npmjs.com/package/#web3-react/core
https://www.npmjs.com/package/#web3-react/injected-connector
Can someone please help me with the same? I am using LTS versions, What are stable versions of these?

web3.js has updated their readme to included troubleshooting steps. Ref. link.
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Solution
Install react-app-rewired and the missing modules
If you are using yarn:
yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
If you are using npm:
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
Create config-overrides.js in the root of your project folder with the content:
const webpack = require('webpack');
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired
before:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
after:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
The missing Nodejs polyfills should be included now and your app should be functional with web3.
If you want to hide the warnings created by the console:
In config-overrides.js within the override function, add:
config.ignoreWarnings = [/Failed to parse source map/];
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Currently CRA ships react-scripts with version 5.0.0. Instead of ejecting CRA, just downgrade react-scripts to version 4.0.3. I was facing the same issue, downgrading worked for me.
First remove old version
npm uninstall react-scripts
Then run the following:
npm i react-scripts#4.0.3

as webpack grows in size, they removed the polyfills in webpack5. Looks like you are using create-react-app (CRA) and webpack configuration is not exposed to the user in CRA. you can expose it using eject. you might have this script in package.json:
"eject": "react-scripts eject"
so run npm run eject. This is not recommended because it means that you will no longer benefit from the updates of CRA.
you can handle ejecting with either rewire or craco.
After you get the webpack configuration, you need to add resolve property to webpack config and install all those required packages :
resolve: {
extensions: [".js", ".css"],
alias: {
// add as many aliases as you like!
// optional
components: path.resolve(__dirname, "src/components"),
},
fallback: {
// path: require.resolve("path-browserify"),
fs: false,
assert: require.resolve("assert/"),
os: require.resolve("os-browserify/browser"),
constants: require.resolve("constants-browserify"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
},
},
I have webpac5 Boilerplate. you can use it if you want:
Since there are too many polyfills, instead of manually installing all, you can use node-polyfill-webpack-plugin package. instead of fallback property
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
title: "esBUild",
template: "src/index.html",
}),
// instead of fallback
new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
React: "react",
}),
],
webpack5 boilerplate github repo

Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Refer the Solution in the Below link
https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Trouble with running a react + next.js project

I'd like to fork this repository and run it on my local server:
https://github.com/carbon-app/carbon.git
I am familiar with React but new to Next.js. The scripts in the package.json are specified as follows:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
How can I run this as a React project using npm? I'm interested in the React part to recreate another app using this app's frontend.
Please help me to run as a react project.

first, you should install dependencies:
npm i
then run next js in development mode using:
npm run dev
for more details, visit Next.js docs

What is best way to handle .env api urls, based on enviroments (dev / prod) REACT?

Here is the way in which I set up different API URL based on the current environment:
Development and Production, on npm, commanded setup env.
Is there are some more elegant solution cus my URLs are long:
Package.json
"scripts": {
"start": "REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts start",
"build": "REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install",
},

You can use .env files using dotenv library.
See: https://create-react-app.dev/docs/adding-custom-environment-variables
EDIT:
From the docs
Adding Development Environment Variables In .env
To define permanent environment variables, create a file called .env in the root of your project:
REACT_APP_NOT_SECRET_CODE=abcdef
Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
You can read more at the CRA docs or at DotEnv docs.
Solution
Basically you can use .env and .env.development.local to separate the URLs.
.env:
REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0
.env.development.local:
REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0

React how can I build minify code in react library

I have an issue with React Js app; how should I build minified code of my React code.
Code Structure
My Code File
I run my react app with npm start
What should I do next to build minified files.
'build/static/js/main.d3cd729d.js'
'build/static/css/main.9b99bc40.css'
Does anyone help?

If in your package.json file, these two scripts are exist
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
}
Then you can use the npm run build command to minify your react app code.

How to use jest.config.js with create-react-app

I would like to move my jest config out of my package.json, i am trying to use the --config as suggested here but get the error argv.config.match is not a function
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --config jest.config.js",
"eject": "react-scripts eject",
},
cli
hutber#hutber-mac:/var/www/management/node$ npm test -u
> management-fresh#0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js
Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]
argv.config.match is not a function
npm ERR! Test failed. See above for more details.

For me appending -- --config=jest.config.js worked.
So the whole string react-scripts test -- --config jest.config.js in your case.

TL;DR
Add -- before your options.
"test": "react-scripts test -- --config=jest.config.js",
The problem here is with react-scripts not seeing the options being passed to
it. We can demonstrate this by running it directly.
./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function
./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.
Variations
How you pass options to scripts varies depending on which versions of npm or
Yarn you use. For completeness, here are the results for the variations:
# This runs, but completely ignores the option.
npm test --config=jest.config.js
# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js
https://jestjs.io/docs/en/cli#using-with-yarn
https://jestjs.io/docs/en/cli#using-with-npm-scripts
create react app sets up the test script in package.json with
"test": "react-scripts test",
You can set additional options like so.
"test": "react-scripts test -- --config=jest.config.js",
Something like this might work if you want to send options through the CLI.
"test": "react-scripts test --",
yarn test --bail
# comes through as
react-scripts test -- --bail
Resources
Here are a few resources to explain the different usage.
https://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f

For me adding jest as key in package.json file worked. Added all the required config as object in jest key rather than jest.config.js
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary",
"lcov",
"cobertura"
],
"testMatch": [
"**/*.test.js"
]
},

tldr
npm install jest --save-dev (not sure if this is required -- I just did it).
replace
"scripts": {
...
"test": "react-scripts test",
...
},
with
"scripts": {
...
"test": "jest --watch",
...
},
run tests as normal with npm test
Everything
Adding -- --config=jest.config.js sort of work for me: my tests passed, but then I was getting the following error (truncated):
Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.
This problem is noted in the comment above.
Here's what's going on:
npm test looks in package.json for whatever is in scripts.test and runs that. For create-react-app, that's react-scripts test. This, in turn, runs
/node_modules/react-scripts/scripts/test.js (source) (you can easily print debug this to see what's going on). This script builds up a jest configuration based on your environment. When you add:
"test": "react-scripts test -- --config=jest.config.js",
to package.json, this replaces the jest config that react-scripts test is trying to create (yea!), but it also munges the arguments that "test": "react-scripts test" generates (boo!), so jest thinks you're trying to pass in a test pattern (which is obviously not a valid test pattern).
So, I decided to try running my tests using the jest CLI. At least for me, it worked fine and picked up all of my tests. It automatically looks for jest.config.js, so that works, and you can pass --watch in to get the same behavior as react-scripts test.
Keep in mind that react-scripts test seems to be going through a lot of trouble to build up a 'proper' config; I definitely haven't tried to figure all of that out: YMMV. Here's the full set of options it creates in my env. E.g., for --config the next element in the array is the config.
[
'--watch',
'--config',
'{"roots":["<rootDir>/src"],
"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"],
"setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
"setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
"testEnvironment":"jsdom",
"testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
"transform":{
"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
"^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
"transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\\\.module\\\\.(css|sass|scss)$"],
"modulePaths":[],
"moduleNameMapper":{"^react-native$":"react-native-web",
"^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
"moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
"watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
"resetMocks":true,
"rootDir":"<my_root_elided>"}',
'--env',
'<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]

This one got me too! create react app is a bit tricky as it already contains jest. I removed the
--config jest.config.js line, and didn't need that extra test.config file.
I also made sure my enzyme file was named setupTests.js. The testing module will be specifically looking to run that file, so it must be named that. Also,I had to have it in my src/ folder, where before I had it in a src/test folder. If you are asking the above question you are probably past this point, but wanted to mention just in case. My setupTests.js looks like:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter()
})

For me, none of the above answers worked. But with the help of documentation, I found out the way around.
For this purpose, place the code you want to configure jest, in your_project_root_folder/src/setupTests.js. My your_project_root_folder/src/setupTests.js looks like this
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({
adapter: new Adapter(),
})
And one more important point, you need to use enzyme-adapter-react-16 for react v16 and enzyme-adapter-react-15 for react v15
Moreover, if you want to use enzyme-to-json, you can place the following code in package.json file
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}

I would try adding "test": "jest --no-cache -w 2" to your package.json. Then run npm run test

We Keep Coding

JavaScript is the programming language of the Web.

Where to put webpack.config.js in React project? - javascript

Related

Web3 Issue : React Application not compiling

Trouble with running a react + next.js project

What is best way to handle .env api urls, based on enviroments (dev / prod) REACT?

React how can I build minify code in react library

How to use jest.config.js with create-react-app

Categories

Resources