Invalid configuration object in webpack.config.js
up vote
0
down vote
favorite
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 at 17:35
mojtaba1
95
add a comment |
up vote
0
down vote
favorite
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 at 17:35
mojtaba1
95
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 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 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 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 at 17:35
mojtaba1
95
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 at 17:35
mojtaba1
95
asked Nov 22 at 17:35
mojtaba1
95
asked Nov 22 at 17:35
mojtaba1
95
asked Nov 22 at 17:35
mojtaba1
95
asked Nov 22 at 17:35
mojtaba1
95
95
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 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 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 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09
add a comment |
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 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 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 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 at 17:45
have you used create-react-app? It is designed to eliminate complicated configuration.
– Peter
Nov 22 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 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 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 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 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
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 at 17:48
Peter
109211
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 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 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 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',
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
up vote
0
down vote
accepted
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 at 17:48
Peter
109211
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 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 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 at 23:13
add a comment |
up vote
0
down vote
accepted
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 at 17:48
Peter
109211
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 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 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 at 23:13
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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 at 17:48
Peter
109211
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 at 17:48
Peter
109211
answered Nov 22 at 17:48
Peter
109211
answered Nov 22 at 17:48
Peter
109211
answered Nov 22 at 17:48
Peter
109211
109211
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 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 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 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 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 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 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 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 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 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 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 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 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 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 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 at 18:00
thank you. I will read it.
– mojtaba1
Nov 22 at 18:09