I have started to play with react and soemhow get stucked.
I have following code: github.com/gandra/my-lara-react-app
When I runn following code on the command-line:
npm install
webpack --config webpack.config.js
I expect to find file ./dist/bundle.js but this not happens.
Any idea why?
The file mentioned in the question, webpack.config.js contains a typo wntry, which should have been entry, i.e.
module.exports = {
entry: ['./app/main.js'],
...
}
Related
I have created a Create React App application with typescript template build in, then i installed MSW with npm and created files based on MSW install guide.
It's working perfectly for jest, but for browser when im using start script i got a bunch of warnings that are saying:
WARNING in ./node_modules/#mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<ROOT_DIR>\node_modules\#mswjs\interceptors\src\utils\uuid.ts' file: Error: ENOENT: no such file or directory, open '<ROOT_DIR>\node_modules\#mswjs\interceptors\src\utils\uuid.ts'
# ./node_modules/#mswjs/interceptors/lib/interceptors/fetch/index.js 167:13-40
# ./node_modules/msw/lib/esm/index.js 12:0-76 1568:14-28
# ./src/mocks/browser.ts 3:0-34 6:22-33
# ./src/index.tsx 8:0-41 10:0-12
and simmilar...
I couldn't find any answers so Im asking you for help.
Update: Issue fixed in msw 0.38.0.
Previous answer:
Are you using react-scripts 5?
Webpack 5 used in that version of react-scripts is clashing with msw somehow.
You have a couple of options for now:
disable source maps by adding a .env file in the root of your project containing GENERATE_SOURCEMAP=false so that you can keep react-scripts 5;
downgrade react-scripts to v4.
More on the github issue posted by kettanaito
Instead of disable source maps you could disable the warnings trough react-app-rewired.
Add react-app-rewired as dev dependency
yarn add -D react-app-rewired
Rename react-scripts into react-app-rewired in package.json start, test and build scripts
Add ignoreWarnings in config-overrides.js at the same level as package.json as documented in source map loader.
// config-overrides.js
module.exports = {
webpack: function (config) {
return { ...config, ignoreWarnings: [/Failed to parse source map/] };
},
};
If you do not want to use react-app-rewired, downgrade to react-scripts v4 or use GENERATE_SOURCEMAP=false you can check my idea. It is ugly but it works.
Create a script like so:
const { readFileSync, writeFileSync } = require("fs");
const path = "node_modules/source-map-loader/dist/utils.js";
const regex = /.*throw new Error\(`Failed to parse source map from '\${sourceURL}' file: \${error}`\);*/;
const text = readFileSync(path, "utf-8");
const newText = text.replace(regex, `buffer="";sourceURL="";`);
writeFileSync(path, newText, "utf-8");
And then add it to your package.json:
"scripts": {
"start": "node removeSourceMapsWarning.js && react-scripts start"
Obviously this code will stop working when source-map-loader changes the error message. But I hope we will a real solution for it by then.
I have installed a new package ('react-router-dom') and now my project doesn't start.
I get this warning:
How can I resolve this problem?
Thanks for the help!
the current version (don't support webpack4) of this package does not work with html-webpack-plugin v4
Please refer this issue
or
you can try yarn add preload-webpack-plugin#3.0.0-beta.3
If the above method doesn't works:
If you ejected from create-react-app and are getting this error upon yarn build, make sure the InterpolateHtmlPlugin line comes after the HtmlWebpackPlugin line in your webpack config file(s):
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin({
// ...
}),
new InterpolateHtmlPlugin(env.raw),
//..
]
}
I have sample installation of react-app and I got the following
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
after running
npm run lint -> eslint .
I don't use typescript in this project.
I tried to install it from scratch and got it again.
also tried to remove tslint from vscode plugin
You can add this to your .eslintignore file in the root of your project.
node_modules
create-react-app team will release a new version with that fix also
https://github.com/facebook/create-react-app/pull/8376
I had the same issue when trying to create a new react app today.
You can try the following steps:
Make sure you update your nodejs to the latest version
Make sure your folder path is short and does not contain spaces
Run: npm install -g create-react-app
Run: npm i --save-dev typescript #typescript-eslint/parser
Run: create-react-app my-app
Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore
// package.json
// ...
"eslintConfig": {
"extends": "react-app"
},
"eslintIgnore": [
"node_modules",
"build/*"
],
Most likely, you have this in your .eslintrc:
extends: react-app
It means the following rule is applied:
files: ['**/*.ts?(x)'],
parser: '#typescript-eslint/parser',
Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?
Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for #typescript-eslint/parser and remove it.
I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.
In my case, I wanted typescript, but didn't get it installed.
This question still helped me figure out my problem which is described below.
I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:
npx create-react-app cra-ts --typescript
This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.
Error: Failed to load parser '#typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
The fix was to use the command:
npx create-react-app myappts --template typescript
This used create-react-app#4.0.0 and react-scripts#4.0.0.
ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.
I have a big project which I was trying to reduce in size using webpack-p according to here: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f
I could not run it as I was encountering problems when running webpack -p (it threw an error on every function of index.js
I thought it might be something with my packages. I decided to create new create-react-app and run the command there. To my surprise, there I get the same error:
What might be the problem here?
If your app uses webpack v4 you must use webpack --mode=production instead of webpack -p.
Possible values for mode are: none, development or production.
Another usage:
// webpack.config.js
module.exports = {
...
mode: 'production',
...
}
You don't have a config file because the command you are trying to run is global, it is not getting from your current working directory. Run npm run build instead, which does that under the hood, but has a lot of other things created by the contributors of create-react-app.
You could pass a config file for the global webpack cli, but you don't have access for that in your folder since it is "not" available for your. npm run build also already applies a lot of optimizations for you.
I created an app with react-create-app, I just dev it using npm start, that seems to do react-scripts start according to my package.json
Whenever I add a proxy to my package.json, I get this error message :
Invalid Host header
I get the idea, it's a security issue. What I don't get is how to fix it. I read several issues on github and QA here on the subject, the fix is easy enough, but I still don't get where to put it
in the end, I will add a whitelist of hosts. I think I saw it's possible.
but where do I put this config to start :
devServer: {
disableHostCheck: true
}
Another way to disable the host check would be to set the following environment variable: DANGEROUSLY_DISABLE_HOST_CHECK=true
That can be done by e.g. adding that line to .env file in the root of the project. Note that this is not a secure solution and should not be used in production.
You can manage it without changing stuff inside node_modules or by ejecting your project by using an npm package called react-app-rewired.
It basically has an option to override your default hardcoded settings for webpack that are inside a create-react-app boilerplate setup.
You put a config-overrides.js inside your root folder and change the scripts inside your package.json to match react-app-rewired instead of the react-scripts. This way you can override all the webpack config that's hard coded inside a react project by writing it down inside a config-overrides.js file.
The syntax is inside this link. There's also an article about it which can be found here.
I never found out where to put the webpack.config.js. It didn't work in the app root directory where I suppose it should go, it didn't do anything for me, I just ended up modifying where react-scripts invokes webpack-dev-server and then put the disableHostCheck to true directly before invoking.
Basically I changed the following line :
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
to :
var serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
serverConfig.disableHostCheck = true;
that's really not good practice (modify the code and disableHostCheck), but now I know I can actually modify settings, I'll just go for a whitelist, may be one day I'll understand why it doesn't care about my webpack.config.js ^^
Install react-app-rewired:
npm install react-app-rewired --save-dev
change package.json script to
"start": "set PORT=80&&react-app-rewired start",
then add a file named .env.development, add this line:
HOST=buzzbuzzenglish.com
then add config-overrides.js file (you can override some webpack settings there but don't have to - still, file have to be created)
finally you type npm start, then browser will open and navigate to buzzbuzzenglish.com and renders normally without the Invalid Host Header error.