I am new to React.js and i am trying to setup simple react application locally using webpack.
while running the npm run dev command i m getting below error.
Error getting in command prompt after running npm run dev
F:\ReactApp\react-webpack>npm run dev
> react-webpack#1.0.0 dev F:\ReactApp\react-webpack
> webpack -wd
error: option '-d, --devtool <value>' argument missing
npm ERR! code ELIFECCLE
npm ERR! errno 1
npm ERR! react-webpack#1.0.0 dev: `webpack -wd`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-webpack#1.0.0 dev 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\nilesh\AppData\Roaming\npm-cache\_logs\2020-10-30T08_33_31
_702Z-debug.log
Below is code in package.json file
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0"
},
"devDependencies": {},
"scripts": {
"dev": "webpack -wd"
},
"author": "",
"license": "ISC"
}
Below is code for the webpack.config.js file
const path = require('path');
module.exports = {
entry : './js/app.js',
output : {
path: path.join(__dirname,'public'),
filename: 'bundle.js'
},
module :{
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader'
}
]
}
};
Code in app.js file
import React from "react";
import ReactDOM from "react-dom";
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('root')
);
Here my .babelrc file
{
"presets":[
"react",
"es2015"
]
}
I have already install latest version of node.js
Thanks in Advance
Nilesh Kulkarni
You have to specify devtool, either by using -d devtools or by putting
module.exports = {
...
devtool: 'source-map'
...
};
in your webpack.config.js.
If you chose to change the webpack.config.js file you don't need the -d option, if you use -d you must specify an argument after or it will throw an error.
As the error message says, you're missing a value for the -d (--devtool) argument. You can find a list of valid values on this list. You can add this directly to your webpack config as follows:
module.exports = {
...
devtool: 'source-map' // or any other valid value here
...
};
You only need to have a value for devtool in the config if you want to use a value, similarly you only need to use the -d argument in the CLI if you are going to pass a value through the CLI. If you don't want to use a devtool, remove it from your webpack config and change your dev script to webpack -w. However, for development, you'll likely want sourcemaps, so I'd recommend using devtool: 'source-map' (you'll still want to change your dev script to webpack -w).
Related
I am adding storybook in an existing monorepo and keep getting error when trying to add scss via <style lang="scss">:
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
This is the outline of monorepo structure:
package.json
.storybook
|_ main.js
|_ preview.js
client
|_package.json
|_ src
|_components
|_styles
|_stories
The relevant root package.json looks like:
"scripts": {
"build": "yarn workspaces foreach run build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#mdx-js/react": "^1.6.22",
"#storybook/addon-actions": "^6.3.7",
"#storybook/addon-docs": "^6.3.7",
"#storybook/addon-essentials": "^6.3.7",
"#storybook/addon-links": "^6.3.7",
"#storybook/addon-postcss": "^2.0.0",
"#storybook/preset-scss": "^1.0.3",
"#storybook/vue3": "^6.3.7",
"#types/mdx-js__react": "^1",
"css-loader": "^6.2.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"vue-loader": "^16.5.0"
}
Here is my .storybook/main.js
const path = require('path');
module.exports = {
"stories": [
"../client/src/stories/**/*.stories.mdx",
"../client/src/stories/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-scss"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push(
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
}
);
return config;
},
}
In my vue components, trying to use <style lang="scss"> throws the above error. I thought scss would be handled by the changes made in .storybook/main.js, but it's not working, and I'm wondering if it has something to do with the monorepo and two package.json, or if it is something else.
Based on the package.json you've provided, you may be encountering this bug:
https://github.com/webpack-contrib/sass-loader/issues/923
In short, using Vue 3 with sass-loader v11.0.0 or higher without Webpack v5 leads to this error. An interim solution may be to install a known-compatible version of sass-loader:
npm install --save-dev sass-loader#10.1.1
Or, if using yarn:
yarn add --save-dev sass-loader#10.1.1
Updating the storybook's webpack to version 5 as shown here solved the issue:
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
I'm new to Node.js, please help me.
What is wrong?
Using typescript, SQLite3 and Knex, with migration.
I get the error when running "yarn knex: migrate" or "knex migrate: latest":
$ knex migrate:latest
Requiring external module ts-node/register
Error: knex: Required configuration option 'client' is missing
These are my files:
package.json:
{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "ts-node-dev --transpile-only --ignore-watch node-modules --respawn
src/server.ts",
"knex:migrate": "knex --knexfile knexfile.ts migrate:latest",
"knex:migrate:rollback": "knex --knexfile knexfile.ts migrate:rollback"
},
"devDependencies": {
"#types/express": "^4.17.11",
"ts-node": "^9.1.1",
"ts-node-dev": "^1.1.6",
"typescript": "^4.2.4"
},
"dependencies": {
"espress": "^0.0.0",
"express": "^4.17.1",
"knex": "^0.95.4",
"sqlite3": "^5.0.2"
}
}
knexfile.ts:
import path from'path';
module.exports = {
cliente: 'sqlite3',
connection: {
filename: path.resolve(__dirname, 'src', 'database', 'resp.sqlite')
},
migrations: {
directory: path.resolve(__dirname, 'src', 'database', 'migrations'),
},
useNullAsDefault: true,
};
Migration 00_create_organizacoes.ts:
import knex from 'knex';
export async function up(knex: knex) {
return knex.schema.createTable('organizacoes', table => {
table.increments('id').primary();
table.string('razaosocial_org').notNullable();
table.integer('atividade_org').notNullable();
table.timestamp('criacao_org').defaultTo(knex.fn.now());
table.timestamp('atualizacao_org').defaultTo(knex.fn.now());
});
}
export async function down(knex: knex) {
return knex.schema.droptable('organizacoes');
};
My file structure:
enter image description here
Unsuccessful in other treatments.
Looks like you have a typo in your knexfile.ts
The name of the missing property is client and not cliente
The Requiring external module ts-node/register message you get is not the issue, the issue is that in the knexfile.ts the client property is not read. From the example above change the cliente property to client and it is fixed.
What if you have no spelling error, client exist in your configuration, and you are getting this message? Are you using a env file? If yes, In your knexfile.ts print the value from your env file. If it returns undefined, it means that no value was read for the env file. Check if you have the dotenv package installed and configured properly. Also check that your env file has a key called client and the value is available and in the knexfile.ts ensure you are calling the right key from your env.
Finally if the problem is not solved and every other thing is in-place, require dotenv in your package.json file before running a command as shown below.
"migrate:latest": "ts-node -r dotenv/config ./node_modules/knex/bin/cli.js migrate:latest
The ts-node -r dotenv/config ensures that the details in the env file are added to the environment.
The ./node_modules/knex/bin/cli.js starts the knex cli so that the remaining part which is a knex command can be executed.
I'm working on trying to integrate stylelint into my freshly created Vue project.
I thought this would be a simple case of using the Stylelint Webpack Plugin but when I run yarn serve, any errors completely freeze it with no output. If I run yarn build, the build will fail as intended but will only print "There was a stylelint error".
My vue.config.js is as follows:
const stylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
],
},
};
Here are my current versions from package.json:
"#vue/cli-service": "^3.9.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylelint-scss": "^3.9.2",
While this may come too late, here are working configurations by using stylelint-config-recommended-scss.
It is an extension to the 3rd party stylelint-scss plugin which needs to be installed along with stylelint itself. Also stylelint-webpack-plugin needs to be installed, which seems to have been missing from your setup.
Install dev dependencies:
# First remove an unnecessary one you had (with NPM):
npm uninstall stylelint-config-recommended
# Or with Yarn:
yarn remove stylelint-config-recommended
# Install dev deps with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
In your vue.config.js configuration file:
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new StyleLintPlugin({
files: ['src/**/*.{vue,scss}'],
}),
],
},
};
Create a file stylelint.config.js in your project's root folder:
module.exports = {
extends: 'stylelint-config-recommended-scss',
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
};
In package.json you can add this lint:scss command (run by npm run lint:scss). It tries to run autofix on all rules, but please note that not all rules can be autofixed.
In that case the script will output a list of error lines and exit on error. You need to go and fix these by hand, and then re-run the script to see that the errors got fixed:
{
"scripts": {
"lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
}
}
Hope this helps! Please add a comment if I missed something.
my configuration is the same like ux.engineer written
but when i try run scripts npm run lint:scss then I have
node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
^^^^^
SyntaxError: Unexpected reserved word
it turned out that I had the wrong (old) node version, so pay attention for that
I'm new with Webpack, Node.js and Typescript and I'm having trouble configuring my dev enviroment.
When running webpack to compile my src/server.ts to generate the /server/bundle.js I'm getting this error:
ERROR in ./src/server.ts
Module not found: Error: Can't resolve 'hapi' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/src'
# ./src/server.ts 3:11-26
The architecture of the project is:
The src/server.ts:
import * as Hapi from 'hapi';
const server = new Hapi.Server();
The webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/server.ts',
output: {
filename: './server/bundle.js'
},
resolve: {
extensions: ['.ts'],
modules: [
path.resolve('src'),
path.resolve('node_modules')
]
},
module: {
loaders: [
{
test: /.ts$/,
loader: 'awesome-typescript-loader'
}
]
}
};
The package.json:
{
"name": "nodang-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack --progress --watch",
"serve": "node-dev server/bundle.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/hapi": "^16.0.0",
"lodash": "^4.17.4"
},
"devDependencies": {
"awesome-typescript-loader": "^3.0.8",
"tsd": "^0.6.5",
"typescript": "^2.2.1",
"webpack": "^2.2.1"
}
}
OBS: It's webpack 2
UPDATE
After installing hapi and adding .js to webpack's resolve extentions and node as webpack's target I'm getting this erros with hapi modules:
ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
# ./~/hapi/lib/server.js 5:15-32
# ./~/hapi/lib/index.js
# ./src/server.ts
ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox-memory' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
# ./~/hapi/lib/server.js 6:21-45
# ./~/hapi/lib/index.js
# ./src/server.ts
You did not install hapi. #types/hapi are just the type definitions that TypeScript uses for the library, but not the actual library itself. So you need to add hapi as well:
npm install --save hapi
Once you've installed it, the module can be found, although you'll get a new error that ./server could not be resolved in hapi/lib/index.js and that's because you configure resolve.extensions to only include .ts, but the library makes use of Node automatically resolving .js when leaving off the extension. So you also need to include .js in the extensions:
extensions: ['.ts', '.js'],
After also resolving this issue, you'll be faced with another one, namely that Node built-in modules like fs can't be resolved. By default webpack builds for the web, so the Node built-in modules are not available. But you can change that by setting the target option in your webpack config to node:
target: 'node'
Edit
You're having trouble with other node_modules because you only use the top level node_modules, instead you want to always fall back to the regular module resolution of node_modules, so the resolve.modules should look like this:
modules: [
path.resolve('src'),
'node_modules'
]
I have tried all the way to run sample Module-Loader program based on YouTube but even after following with all the links in stackoverflow regarding this, am unable to fix the issue.Please find the details of my project below,
My Project Structure:
**package.json**
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.16.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.12.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.16.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.12.2"
},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webconfig.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Exception trace:
D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-basic-rea
ct>webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.2
Time: 1424ms
+ 1 hidden modules
ERROR in ./js/scripts.js
Module build failed: ReferenceError: Unknown plugin "react-html-attrs" specified
in "base" at 0, attempted to resolve relative to "D:\\Software\\Ping\\react-js-
tutorials-master\\react-js-tutorials-master\\1-basic-react\\js"
at D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-ba
sic-react\node_modules\babel-core\lib\transformation\file\options\option-manager
.js:176:17
at Array.map (native)
at Function.normalisePlugins (D:\Software\Ping\react-js-tutorials-master\rea
ct-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation\
file\options\option-manager.js:154:20)
at OptionManager.mergeOptions (D:\Software\Ping\react-js-tutorials-master\re
act-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:228:36)
at OptionManager.init (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\op
tions\option-manager.js:373:12)
at File.initOptions (D:\Software\Ping\react-js-tutorials-master\react-js-tut
orials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\inde
x.js:221:65)
at new File (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-m
aster\1-basic-react\node_modules\babel-core\lib\transformation\file\index.js:141
:24)
at Pipeline.transform (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\pipelin
e.js:46:16)
at transpile (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-
master\1-basic-react\node_modules\babel-loader\index.js:38:20)
at Object.module.exports (D:\Software\Ping\react-js-tutorials-master\react-j
s-tutorials-master\1-basic-react\node_modules\babel-loader\index.js:131:12)
Try npm install babel-plugin-react-html-attrs --save
and while you're at it,
$npm install babel-plugin-transform-class-properties --save
For some reason the name is shortened in the error message.
These help process attributes and class names from html pasted in as JSX codes. The syntax needs to be adapted to JSX.
See https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md
Oops, now I see these in your package.json (tldr). Somehow these errors got fixed for me by doing the npm installs.
I cloned the same repository from learnCodeAcademy, and got issues when try run webpack , I did the following step by step till i got the webpack command ran without any issue.
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-plugin-react-html-attrs --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install react-dom --save-dev
npm install react --save-dev
And when i ran webpack command , i got the following result :
Hash: c323a36a23de43f8c0cf
Version: webpack 1.15.0
Time: 2186ms
Asset Size Chunks Chunk Names
client.min.js 1.76 MB 0 [emitted] main
+ 163 hidden modules
Then you can run it using npm run dev
as on package.json the script mapped as below :
"dev": "webpack-dev-server --content-base src --inline --hot"
I also modified the webpack.config.js the entry section as followed:
entry: {
javaScript: './js/client.js',
html: './index.html'
}
This is the result after running npm run dev
output
I hope this will help, if i answered your question, kindly mark it.
Thanks.