"Invalid configuration object" after creating a package.json using "npm init" - json

I had a running webpack configuration. But after using npm init to create the following package.json file:
{
"name": "y",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"jshint": "^2.9.4",
"jshint-loader": "^0.8.4",
"node-libs-browser": "^2.0.0",
"webpack": "^2.2.1"
}
}
and installing the following modules:
npm install babel-core babel-loader jshint jshint-loader node-libs-browser
babel-preset-es2015 babel-preset-react webpack --save-dev
I got the error message
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.resolve.extensions[0] should not be empty.
When I tried to restart the dev-server using
webpack-dev-server
The webpack.config.json looks like this:
module.exports = {
entry: ["./global.js", "./app.js"],
output: {
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.es6']
},
}
What could be the problem?

You installed the latest version of webpack with:
npm install --save-dev webpack
Webpack 2 does not allow an empty string in resolve.extensions anymore. Simply remove the empty string from the array of extensions:
resolve: {
extensions: ['.js', '.es6']
},
You should also read the official Migration Guide.

Related

Why would I get this webpack and babel error for every javascript file in my solution?

I am using Webpack 5.73 and Babel-loader 8.2.5.
My package.json:
"dependencies": {
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2",
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-polyfill": "^6.26.0",
"babel-loader": "^8.2.5",
"css-loader": "^0.28.11",
"sass-loader": "^13.0.0",
"style-loader": "^0.20.3",
"text-loader": "^0.0.1",
In my webpack.config.js file, I am using babel like this:
module: {
rules: [
//Use babel to translate ES2015+ to a more compatible version of JS
{
test: /\.js$/,
include: path.resolve(__dirname, "Game"),
exclude: /(Game\/lib|userFiles)/,
use: {
loader: 'babel-loader',
options: {
//Processed in reverse order
presets: ["#babel/preset-env"],
//cacheDirectory: true
}
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(woff2?|svg)$/,
type: 'asset'
},
{
test: /\.(ttf|eot)$/,
type: 'asset/resource'
},
However, when running npm run webpack, for every .js file in my project, I get this error:
ERROR in ./Game/gameViews/MainView.js 4:0-48
Module not found: Error: Can't resolve 'text' in 'G:\GameHub\Project\Game\gameViews'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'text-loader' instead of 'text',
I tried deleting my package.lock.json and node_modules then reinstalling everything again but I keep getting the errors every time I run webpack.
Is there any way to fix this?
Thanks!

Unexpected token import, can not set up ES6 in my JS project with Mocha, Chai and Sinon

I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},

How to run webpack in production in a package.json script in windows with other commands?

I am using MERN stack and running windows 10. I am trying to run this npm run command from the package.json file.
"scripts": {
"build": "set NODE_ENV=production webpack && gulp",
"postinstall": "npm run build",
"start": "node ./bin/www"
},
When I run npm run build I get the following results:
terminal results
What happens is it looks like gulp runs and that is it. My bundle is not optimized for production at all. I will include the webpack file incase it is needed.
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: 'public/build/bundle.js',
sourceMapFilename: 'public/build/bundle.map'
},
devtool: '#source-map',
plugins:
process.env.NODE_ENV === 'production'
? [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warning: true
}
})
]
: [],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}
]
}
};
You might want to use cross-env, a platform-independent way to use environment variables:
"scripts": {
"build": "cross-env NODE_ENV=production webpack && gulp",
// or if the former does not work
"build": "npm run build:webpack && gulp",
"build:webpack": "cross-env NODE_ENV=production webpack",
},
Note that there are other ways to do production builds or evaluate environment variables in the webpack configuration.

npm start not working with webpack React

Currently I am self teaching myself React and trying to set-up a beginning framework. I'm having the following error after running npm start in my command line:
~/projects/reactApp » webpack --display-error-details Dustin#Dustins-MacBook-Pro
Hash: 94c3df302d8dd2990ab8
Version: webpack 2.4.1
Time: 37ms
ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Users/Dustin/projects/reactApp'
resolve './main.js' in '/Users/Dustin/projects/reactApp'
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: ./main.js)
as directory
/Users/Dustin/projects/reactApp/main.js doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.json doesn't exist
------------------------------------------------------------
~/projects/reactApp »
Coincidentally I get the same error when trying to load localhost:7777. I'm not to familiar with webpack and curious what I am doing wrong. Webpack isn't great at displaying errors, but I've managed to fix other errors up to this point.
webpack.config.js
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "first React app following tutorial",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "reactApp"
},
"keywords": [
"react"
],
"author": "Dustin Waggoner",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
}
}
I think it is a path problem, but attempted several different options to correct this. Thanks for any help.
Try this. resolve is mandatory while you are using none-default settings.
Here is the documents for webpack .
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;

gulp: Module parse failed

I'm working with Laravel 5.3.
Errors I get after installing node-uuid.
{ [Error: ./~/diffie-hellman/lib/primes.json
Module parse failed: /var/www/html/filecloudprod/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
My package.json file. Note json-loader
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"dropzone": "^4.3.0",
"animate.css": "^3.5.0",
"node-uuid": "^1.4.7",
"json-loader": "^0.5.4"
}
}
Then tried to merge webpack config like this in gulpfile.
I tried 2 different approaches, see TRY1 and TRY2, certainly not at the same time, just posted both approaches.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// TRY 1
elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
// TRY 2
elixir.ready(() => {
elixir.config.js.webpack = {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
elixir(function (mix) {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'filecloud.dev'
});
mix.version(['css/app.css', 'js/app.js']);
});
But I still get the error.
Full error
If you want to use npm modules which requires the json-loader, this is the solution.
Add following to package.json file.
"json-loader": "^0.5.4"
Create webpack.config.js with the following code:
Elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
Now you can require packages in your bootstrap.js file which require the json-loader.
Additional Notes
When you look to the index.js file where the webpack method of elixir is defined, you see that the json loader is missing inside the loaders array.
module: {
loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
},