I've just upgraded webpack-dev-server to version 4.0.0 and my webpack.config.js devServer forgot how to handle "stats" option. Has it been removed somewhere else?
Error I get:
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Related
the react-scripts package provided by create react app requires a dependency eslint ^5.6.0.
it says that another version was detected higher up in the tree (version: 8.30.0) the latest I've installed. If I install the 5.6 version I get other errors instead of fixing it.
I've also tried the SKIP_PREFLIGHT in a .env file with no success. As well as the troubleshooting from the terminal (removedd the node module folder and npm install again).
Here are some of the things I've tried
craco: cannot find eslint loader (eslint-loader) - lastest error showing up
reintalled eslint (lastest version)
installed eslint different versions to match with the ones in the file
Reinstalled google-auth-library
troubleshooting from terminal (React Suggestions):
- Removed node_modules from user and ran npm install (install all node modules again)
- Added the SKIP_PREFLIGHT .env
- Under Package.json removed and added again the eslintConfig / changed "eslint": "8.31" to recommended one (version 7)
- Deleted package-lock (added back after no success)
- devDependencies Removed ESLint (added back after no success)
- npm audit
From StackOverflow:
- Added to craco eslint: { enable: false},
- Updated npm
- Changed craco version to 6.4
- npm install -D eslint to install in the devDependecy
- Added module: rules on craco
- downgraded to npm install webpack#5.75.0
New error messages: craco cannot find ESLint loader (eslint-loader) - eslint-loader is deprecated, tried installing eslint-webpack-plugin.. same problem
Any ideas about what might be happening?
I had multiple versions of eslint - the problem went away when I updated to version 8 (updating the manifest as well)
When I try to run webpack-dev-server it gives the error.
Error: Cannot find module 'webpack-cli/bin/config-yargs'
I looked around and found that you had to change the script to "webpack serve" and did that but then it gives me the following:
**[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.**
My system is Windows 10 Pro and the versions are the following:
webpack: 5.6.0
webpack-cli: 4.2.0
webpack-dev-server: 3.11.0
I've also tried including "inline: false" into the devServer object in webpack.config.js but to no avail.
just few step:
add script "dev": "webpack serve"
set devtool: 'eval-source-map' in webpack.config.js
then run npm run dev or npx webpack serve
webpack v5 && webpack-cli v4 should use webpack serve instead of webpack-dev-server
if you run npx webpack serve come out
configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.**
you can set devtool: 'eval-source-map' in webpack.config.js
usually to balance speed and debugging:
in development mode we use devtool: 'eval-source-map'
in production mode we use devtool: 'cheap-module-source-map'
you can also return webpack v4 && webpack-cli v3
or try npm i webpack-dev-server#4.0.0-beta.0 -D
see https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.0
more issues you can see
https://github.com/webpack/webpack-cli/issues/1948
https://github.com/webpack/webpack-dev-server/issues/2759
Maybe someone will need to change devtool: 'cheap-module-eval-source-map' to devtool: 'eval-source-map'
I have a freshly cloned repo created from the create-react-app template. I npm install to install the packages and then npm start to serve the files on localhost:3000. My coworker (the repo creator) is not having any issues.
However, I see the page flash for a second and then I get the following error:
Failed to compile
createRequire is not a function
Referenced from: BaseConfig
The error message doesn't provide any other information to help trace which file it could be coming from.
I've tried the following to troubleshoot:
Deleting node_modules and package-lock.json and re-installing
Deleting the entire repo and re-cloning
Searching for 'createRequire' or 'BaseConfig' in project files found no results
Searching online for similar issues. None seem to have the same error I'm encountering.
Other details:
npm version 6.14.8
react version 17.0.1
Any idea where this error could be coming from or what steps I can do to trace it?
TL;DR Needed to upgrade node version
I tried npx create-react-app to confirm if the issue was with the template or with the project code. While doing that, I got a message that my package dependencies required a higher version of node (I was on v.10.4, the latest is v15.2.0).
Doing brew upgrade installed the latest version but didn't change the default node version across the system (ie: node -v still showed v10.4) but
doing nvm install --lts then nvm alias-default [latest-version] fixed my issue!
Some solutions are not worked for me. I uninstalled node.js and installed latest version. It worked!
It could be connected with eslint in create-react-app
try to reinstall 'eslint' or 'eslint-config-react-app'
https://github.com/AtomLinter/linter-eslint/issues/1351
BaseConfig is a variable of the create-react-app react-scripts module
in node_modules/react-scripts/config/webpack.config.js
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// #remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],
For me, downgrade the react-scripts to latest 3.x version solved my problem. I could not update the NodeJS version, as I didn't have access to NodeJS server instance. Seems it fits better with React 16.x.
I'm running and building the app at NodeJS V10.0.0.
I am a noob, but I just came across this very same error message in picking up where I previously had left off following a MERN stack tutorial. During the break, I must have switched nvm versions, and thanks to this thread I was able to correct this. From the terminal, I simply ran nvm list. From the result, I could see that I was running an older version (10.9.0) but had a newer one (10.12.0) available to me, which I switched to by running nvm use 10.12.0. This resolved my issue.
I installed flex layout using "npm install #angular/flex-layout".
After installation, I get this typescript error message.
"node_modules/#angular/core/index"' has no exported member
'Renderer2'." "node_modules/#angular/core/index"' has no exported
member 'InjectionToken'."
I am using Angular Core: 2.4.10 version and
Node: 7.5.0 version.
Screenshot:
The latest version "#angular/flex-layout#2.0.0-beta.8" is not supported in angular 2.4.10. I installed #angular/flex-layout#2.0.0-beta.5 and it worked. Please refer the change log here https://github.com/angular/flex-layout-builds/blob/master/CHANGELOG.md
I created a standard app with tns create project --ng which ran fine (and adding platform android)
I also wanted to use graphQL so added apollo-client and graphql tag:
npm install apollo-client --save
npm install angular2-apollo --save
npm install graphql-tag --save
So now when I build with tns build android the error I get is...
node_modules/#types/isomorphic-fetch/index.d.ts(7,5): error TS2300:
Duplicate identifier '"audio"'.
which clashes with (from what I can see)
node_modules/tns-core-modules/declarations.d.ts(25,5): error TS2300:
Duplicate identifier '"audio"'.
isomorphic-fetch is added when apollo-client was added. Not too sure about the typings issue but would be good to know how to get around this.
EDIT:
looking at the guide
I have the 2 items set to false in the tsconfig.json which seem to continue despite of the error...
"noEmitHelpers": false,
"noEmitOnError": false
But I would like to know how to fix this properly.
I ran into the same issue but worked around it in a project with the following dependencies:
nativescript#2.5.1
typescript#2.2.1 (bundles isomorphic-fetch typings in dom)
apollo-client#1.0.0-rc.5
This requires changes to tsconfig.json and references.d.ts described in my response to Github nativescript-dev-typescript issue 19.
While this setup works in the browser with Angular CLI and builds for NativeScript using tns android without relaxing "noEmitOnError": true in tsconfig.json, I then had to debug a runtime exception with an apollo-client call to redux which attempts to call node.js code leading to the following error:
ReferenceError: process is not defined
…
/tns_modules/redux/lib/index.js', line: 38, column 4
This was worked-raound by adding global.process = { env: {} }; as the first line in main.ts, as described in NativeScript Github issue 2937, which StackOverflow won't allow me to link to due to my lack of reputation points.
Well I see tns-core-modules/declarations.d.ts is imported with tns-core-modules/tns-core-modules.base.d.ts so actually Nativescript should provide optionally one more definition where they dont include the request definitions in the base file