Invalid configuration object: webpack.server.js - webpack-dev-server

I am using this webpack file and am getting an error.
This is the webpack file:
const path = require('path');
module.exports = {
target: 'node',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions']}}]
]
}
}
]
}
}
this is the error message:
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration.context: The provided value
"C:\\Users\\}\\Desktop\\Node\\HelloWorld!\\new" contains exclamation mark
(!) which is not allowed because it's reserved for loader syntax.
-> The base directory (absolute path!) for resolving the `entry` option. If
`output.pathinfo` is set, the included pathinfo is shortened to this
directory.
- configuration.output.path: The provided value
"C:\\Users\\}\\Desktop\\Node\\HelloWorld!\\new\\build" contains
exclamation mark (!) which is not allowed because it's reserved for loader
syntax.
-> The output directory as **absolute path** (required).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! new#1.0.0 dev:build:server: `webpack --config
webpack.server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the new#1.0.0 dev:build:server 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! C:\Users\}\AppData\Roaming\npm-cache\_logs\2019-01-
08T16_11_48_069Z-debug.log

Had the same error. The problem seems to be in the path of your folder. It must not contain an exclamation mark(!).
Change folder 'HelloWorld!' to just 'HelloWorld' without the exclamation mark.
Hope this solves the problem.

just remove all !(exclamation marks) from your Project's Directory path: like from "C:\Users\}\Desktop\Node\HelloWorld!\new" to this "C:\Users\}\Desktop\Node\HelloWorld\new"

Related

Storybook migration from 6.2.13 to 6.5.14 having many errors

I am new to storybook and I upgraded the storybook from 6.2.13 to 6.5.14. However, when I run the command yarn storybook I get the below list of errors and the storybook does not start.
yarn run v1.22.19
$ start-storybook -p 6006 -s public
info #storybook/react v6.5.14
info
(node:22853) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info Found existing addon "#storybook/addon-actions", skipping.
info => Serving static files from ./public at /
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
info Addon-docs: using MDX1
info => Using implicit CSS loaders
(node:22853) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '#storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
info => Using default Webpack4 setup
info => Ignoring cached manager due to change in manager config
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item '/.../node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js' twice.
ERR! -> A non-empty array of non-empty strings
ERR! at webpack (/.../node_modules/webpack/lib/webpack.js:31:9)
ERR! at starterGeneratorFn (/.../node_modules/#storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR! at starterGeneratorFn.next (<anonymous>)
ERR! at Object.start (/.../node_modules/#storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/.../node_modules/#storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR! at async buildDevStandalone (/.../node_modules/#storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR! at async buildDev (/.../node_modules/#storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item '/.../node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js' twice.
ERR! -> A non-empty array of non-empty strings
ERR! at webpack (/.../node_modules/webpack/lib/webpack.js:31:9)
ERR! at starterGeneratorFn (/.../node_modules/#storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR! at starterGeneratorFn.next (<anonymous>)
ERR! at Object.start (/.../node_modules/#storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/.../node_modules/#storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR! at async buildDevStandalone (/.../node_modules/#storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR! at async buildDev (/.../node_modules/#storybook/core-server/dist/cjs/build-dev.js:174:5)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
Not sure how to get rid of these errors. Would appreciate any suggestions.
I am using Next.js 12 with React 18.
Firstly, if you are migrating from Storybook 6.2.13, please check the .storybook/main.js file. This file structure has changed from 6.2.13 to 6.5.14.
Please see this storybook link that I referred to fix this:
https://storybook.js.org/docs/react/configure/overview
The steps I followed from the link:
Step 1: Update package.json file
{
...
"scripts": {
...
"storybook": "start-storybook -p 6006 -s public",
...
}
...
}
updated to:
{
...
"scripts": {
...
"storybook": "start-storybook -p 6006 public",
...
}
...
}
Step 2: Update `.storybook/main.js
module.exports = {
...
"addons": [
"#storybook/addon-a11y",
"#storybook/addon-essentials",
"#storybook/addon-links",
"storybook-addon-next-router",
"#storybook/react"
],
...
}
updated to:
module.exports = {
...
staticDirs: ['../public'],
addons: [
"#storybook/addon-a11y",
"#storybook/addon-essentials",
"#storybook/addon-links",
"storybook-addon-next-router",
],
framework: "#storybook/react",
core: {
builder: 'webpack4',
},
features: {
postcss: false,
},
...
}
Step 3: Now you can run this command successfully from your terminal
npx storybook upgrade

Proxying Multiple API requests with Create React App with React-Scripts version 3.4.1

I am currently using the older version of React Script version 1.5.1. I want to upgrade my react app(react-scripts v 3.4.1) but in doing so I break the proxy structure defined in my package.json.
My current JSON has
"proxy": {
"/ossapi": {
"target": "http://localhost:8002"
},
"/pcp": {
"target": "http://test.corp.test.com:8004"
},
"/ossOps": {
"target": "http://test.corp.test.com:8085"
},
"/ems": {
"target": "http://test.corp.test.com:8001"
}
}
I want a similar setup for my app even after I upgrade to new React-scripts version 3.4.1 as I have done lots of development and don't want to restart from scratch again.
when I change the react-scripts version to the latest stable 3.4.1, it keeps on throwing failed to parse json error.
Please advise.
The following is the error I get:
npm ERR! code EJSONPARSE
npm ERR! file /Users/dhrumit.sheth/Documents/Dev/stash/console-app/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 1438 while parsing near '...git push --tags",
npm ERR! JSON.parse },
npm ERR! JSON.parse "proxy": [
npm ERR! JSON.parse "/os...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
"proxy" in package.json works for single endpoint I believe. For more advanced configuration you need to create setpProxy.js file in project root folder, install http-proxy-middleware and put your configurations there. Code will look like this.
module.exports = function(app) {
app.use(
'/ossapi',
createProxyMiddleware({
target: 'http://localhost:8002',
changeOrigin: true,
})
);
app.use(
'/pcp',
createProxyMiddleware({
target: 'http://test.corp.test.com:8004',
changeOrigin: true,
})
);
};
And rest same.
documentation here.

React Typescript ERROR when running npm run build with webpack

I'm using typescript with react. And I want to run npm run build. a dist folder with a bundle.js file should be created (I will share my webpack configurations below). Instead i'm getting this error even though I've done some research to try to solve it. Here's the error:
npm run build
> react_tutorial#1.0.0 build C:\Users\21650\-----------------------
> webpack
Hash: ------------
Version: webpack 4.41.2
Time: 2954ms
Built at: 2019-11-25 22:18:06
1 asset
Entrypoint main = bundle.js
[1] ./src/index.tsx 253 bytes {0} [built]
+ 6 hidden modules
ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'object-assign' in 'C:\Users\21650\Desktop\-------------\node_modules\react-dom\cjs'
# ./node_modules/react-dom/cjs/react-dom.production.min.js 13:39-63
# ./node_modules/react-dom/index.js
# ./src/index.tsx
ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign' in 'C:\Users\21650\-----------\node_modules\react\cjs'
# ./node_modules/react/cjs/react.production.min.js 10:19-43
# ./node_modules/react/index.js
# ./src/index.tsx
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react_tutorial#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react_tutorial#1.0.0 build 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! C:\Users\21650\AppData\Roaming\npm-cache\_logs\2019-11-25T21_18_06_349Z-debug.log
Here's my webpack configuration file:
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx']
}
};
I'm sorry if I made the description too long, but it really frustrates me.
For this code I tried to follow Chris Hawkes's Tutorial on Youtube : Total React Tutorial - For Beginners - Using TypeScript.
Update : Issue resolved
Thanks to #Brian Thompson comment, the problem no longer exists.
Here's the update on my webpack.config.js file:
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}
Update : Issue resolved Thanks to #Brian Thompson comment, the problem no longer exists. Here's the update on my webpack.config.js file:
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}

Create js Webpack config with react

I create and config the webpack.config.js
module.exports = {
entry: './src/app/index.js',
output: {
path: __dirname + '/src/public',
filename: 'bundle.js'
}
};
And in my package.json
"scripts": {
"webpack": "webpack --mode development"
}
But in console show me this error:
ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\marle\Desktop\mern-stack\node_modules\destroy'
# ./node_modules/destroy/index.js 14:17-30
# ./node_modules/send/index.js
# ./node_modules/express/lib/response.js
# ./node_modules/express/lib/express.js
# ./node_modules/express/index.js
# ./src/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-stack#1.0.0 webpack: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-stack#1.0.0 webpack 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! C:\Users\marle\AppData\Roaming\npm-cache\_logs\2019-10-29T23_50_32_004Z-debug.log
My webpack version is 4.41.2 and webpack-cli 3.3.9
Have you tried setting the target: node in the webpack config.
https://webpack.js.org/concepts/targets/

Error while using webpack -p

I'm trying to write code with reacts (JSX) and transformes it with webpack (using babel). I've changed part of my "package.json" file to this:
"scripts": {
"production": "webpack -p"
}
and I'm running npm run production on command line and this is what i get:
> react-fundamentals#1.0.0 production D:\Nave\MyProjects\ReactJs\React-Fundamentals
> webpack -p
webpack 1.13.0
Usage: https://webpack.github.io/docs/cli.html
Options:
--help, -h, -?
--config
--context
--entry
--module-bind
--module-bind-post
--module-bind-pre
--output-path
--output-file
--output-chunk-file
--output-named-chunk-file
--output-source-map-file
--output-public-path
--output-jsonp-function
--output-pathinfo
--output-library
--output-library-target
--records-input-path
--records-output-path
--records-path
--define
--target
--cache [default: true]
--watch, -w
--watch which closes when stdin ends
--watch-aggregate-timeout
--watch-poll
--hot
--debug
--devtool
--progress
--resolve-alias
--resolve-loader-alias
--optimize-max-chunks
--optimize-min-chunk-size
--optimize-minimize
--optimize-occurence-order
--optimize-dedupe
--prefetch
--provide
--labeled-modules
--plugin
--bail
--profile
-d shortcut for --debug --devtool sourcemap --output-pathinfo
-p shortcut for --optimize-minimize
--json, -j
--colors, -c
--sort-modules-by
--sort-chunks-by
--sort-assets-by
--hide-modules
--display-exclude
--display-modules
--display-chunks
--display-error-details
--display-origins
--display-cached
--display-cached-assets
--display-reasons, --verbose, -v
Output filename not configured.
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "production"
npm ERR! node v0.12.3
npm ERR! npm v2.9.1
npm ERR! code ELIFECYCLE
npm ERR! react-fundamentals#1.0.0 production: `webpack -p`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the react-fundamentals#1.0.0 production script 'webpack -p'.
npm ERR! This is most likely a problem with the react-fundamentals package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack -p
npm ERR! You can get their info via:
npm ERR! npm owner ls react-fundamentals
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Nave\MyProjects\ReactJs\React-Fundamentals\npm-debug.log
Does anybody know why?
this is my "web.config.js" file:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};
Webpack looks for a filename webpack.config.js by default. You can rename yours to that or change the script to
webpack -p web.config.js

Resources