Invalid configuration object in webpack.config.js
0
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /.tsx?$/, loader: ['ts-loader'] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
reactjs webpack-2
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
add a comment |
0
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /.tsx?$/, loader: ['ts-loader'] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
reactjs webpack-2
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source forreact-scripts.
– Peter
Nov 22 '18 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09
add a comment |
0
0
0
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /.tsx?$/, loader: ['ts-loader'] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
reactjs webpack-2
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /.tsx?$/, loader: ['ts-loader'] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
reactjs webpack-2
reactjs webpack-2
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
asked Nov 22 '18 at 17:35
mojtaba1mojtaba1
116
116
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source forreact-scripts.
– Peter
Nov 22 '18 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09
add a comment |
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source forreact-scripts.
– Peter
Nov 22 '18 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source for
react-scripts.– Peter
Nov 22 '18 at 18:00
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source for
react-scripts.– Peter
Nov 22 '18 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09
add a comment |
1 Answer
1
active
oldest
votes
0
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /.tsx?$/, loader: ["ts-loader"] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
answered Nov 22 '18 at 17:48
PeterPeter
128213
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435934%2finvalid-configuration-object-in-webpack-config-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /.tsx?$/, loader: ["ts-loader"] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
answered Nov 22 '18 at 17:48
PeterPeter
128213
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
add a comment |
0
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /.tsx?$/, loader: ["ts-loader"] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
answered Nov 22 '18 at 17:48
PeterPeter
128213
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
add a comment |
0
0
0
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /.tsx?$/, loader: ["ts-loader"] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
answered Nov 22 '18 at 17:48
PeterPeter
128213
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /.tsx?$/, loader: ["ts-loader"] },
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /.(otf|ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
answered Nov 22 '18 at 17:48
PeterPeter
128213
answered Nov 22 '18 at 17:48
PeterPeter
128213
answered Nov 22 '18 at 17:48
PeterPeter
128213
answered Nov 22 '18 at 17:48
PeterPeter
128213
128213
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
add a comment |
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
1
1
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
thank you . I tried it and it didn't work. I should try all my code again. maybe there is a mistake somewhere else, because I have tried too many codes. no of them works!!
– mojtaba1
Nov 22 '18 at 17:52
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
i tried to make a new simple project, following the steps in this link (codeburst.io/…) but still continuously the same problem
– mojtaba1
Nov 22 '18 at 18:32
1
1
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
it doesn't work yet. but now the Error is something new. at last i am relieved from the last error. but I think the new error is not about webpack.config but something else. it is You may need an appropriate loader to handle this file type. I should try to know what is the reason for this new error. thank you very much for your kindness.
– mojtaba1
Nov 22 '18 at 23:13
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435934%2finvalid-configuration-object-in-webpack-config-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 '18 at 17:45
yes. I used it . but I tried as a beginner to make it myself from scratch. it works but without using it, I was not successful. Thank you
– mojtaba1
Nov 22 '18 at 17:52
If you are new to react, why are you trying to do this? If you want to learn how to 'make it from scratch', I suggest reading the source for
react-scripts.– Peter
Nov 22 '18 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 '18 at 18:09