Cannot find module 'react-bootstrap' with module other than commonjs - reactjs

I use React with Typescript, but cannot use React Bootstrap with a module other than commonjs.
I first install react-bootstrap package:
$ npm i react-bootstrap
And then write the code to use it, for example,
// src/index.tsx
import { Button } from 'react-bootstrap';
But compiling it by npx tsc get an error Cannot find module 'react-bootstrap' or its corresponding type declarations. When I googled about this issue, I found that react-bootstrap has its own types (so I do not need #types/react-bootstrap).
If I set module in tsconfig.json to commonjs, then I can compile it correctly.
Why cannot I use react-bootstrap however? Are there other ways to use React Bootstrap together with Typescript (and with modules other than commonjs)?
The minimal example here:
package.json:
{
"name": "foo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"type": "npx tsc --noEmit",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.9.5"
},
"dependencies": {
"react-bootstrap": "^1.0.1"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"skipLibCheck": true
},
"include": [
"src/**/*"
]
}
src/index.tsx:
import { Button } from 'react-bootstrap';
Then run
$ npm run type
> foo#1.0.0 type /home/bar/src/foo
> npx tsc --noEmit
src/index.tsx(1,24): error TS2307: Cannot find module 'react-bootstrap' or its corresponding type declarations.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! foo#1.0.0 type: `npx tsc --noEmit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the foo#1.0.0 type 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! /home/bar/.npm/_logs/2020-07-04T12_11_17_351Z-debug.log

Clean npm modules cache using
$ npm cache clean --force
Delete node_modules by $ rm -rf node_modules package-lock.json or delete it manually
Install npm modules npm install
This worked for me. Hopes it works for you too.

Related

Generating JSDoc Documentation on React 18 Project with #component

I am trying to set up JSDoc with better-docs for a react 18 project so I can document my components with the #component decorator.
When I try to install better-docs I get the following error:
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: framework#1.0.0 npm ERR! Found: react#18.2.0 npm ERR! node_modules/react npm ERR! react#"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react#"^17.0.2" from better-docs#2.7.2
Has anyone encountered this issue before? Is there a way to get JSDoc working with React 18? I don't really want to downgrade react version just to handle documentation. If there's not a way around this are there any better documentation generation packages I can use?
In package.json I have defined the docs script as
"docs": "jsdoc -c jsdoc.conf.json
And here is my jsdoc.conf.json:
`
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc"]
},
"plugins": [
"plugins/markdown",
"node_modules/better-docs/typescript",
"node_modules/better-docs/component"
],
"opts": {
"destination": "spec/docs",
"encoding": "utf8",
"readme": "README.md",
"recurse": true,
"verbose": true,
"template": "./node_modules/better-docs"
},
"source": {
"include": [ "./src" ],
"exclude": [ "./src/**/*.text,tsx", "./src/**/*.test.ts" ],
"includePattern": "\\.(jsx|js|ts|tsx)$",
"excludePattern": "(^|\\/|\\\\)_"
},
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"search": true,
"better-docs": {
"name": "framework documentation",
"title": "Framework Documentation",
"hideGenerator": false,
"navLinks": [
{
"label": "Respository",
"href": "..."
}
]
}
}
}
`
As mentioned above I tried installing better-docs with the --legacy-peer-deps option. When I run npm run docs no build file is generated into >spec, and no entry.js file is generated. I can view the docs by viewing the global.html file from my browser, but any files with the #component decorator are not displayed anywhere.
Just run
npm install --legacy-peer-deps
you have the problem, that your react 18 is too new and better-docs rely on react 17 still

when i try to run the project with library #google/model-viewer by npm start i get this error

this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#google/model-viewer": "^1.11.0",
"react": "^18.0.0"
}
}
`PS C:\Users\AA\Desktop\3Dpro\my-app> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AA\AppData\Local\npm-cache_logs\2022-04-05T20_22_54_567Z-debug-0.log
PS C:\Users\AA\Desktop\3Dpro\my-app>
I am using a library for 3D ( #google/model-viewer)
this is my code:
import '#google/model-viewer'
import React, { Component } from 'react'
export default class PersonalDesign extends Component {
render() {
return (
)
}
}
Looks like your package.json file is missing the scripts for some reason. Add them back in. You also appear to be missing the react-dom and react-scripts dependencies.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#google/model-viewer": "^1.11.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
After updating/saving your package.json file, run npm i to install the dependencies and then run npm start to start your project.

I'm trying to deploy my Gatsby Blog on Github pages, but "npm run deploy" returns error

I tried to build and deploy my Gatsby blog on github pages.
I followed Gatsby's docs about deploy: https://www.gatsbyjs.org/docs/deploy-gatsby/
I run the following command:
npm run deploy
I encountered:
Cannot read property 'email' of null
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-hello-world# deploy: `gatsby build && gh-pages -b master -d public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-hello-world# deploy 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! /Users/ChaewonKong/.npm/_logs/2018-09-20T09_34_57_114Z-debug.log
This is my gatsby-config.js looks like:
module.exports = {
siteMetadata: {
title: `Leon Kong's Blog`
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`
}
},
`gatsby-transformer-remark`
]
};
This is my package.json:
{
"name": "gatsby-starter-hello-world",
"description": "Gatsby hello world starter",
"license": "MIT",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"deploy": "gatsby build && gh-pages -b master -d public"
},
"dependencies": {
"gatsby": "^2.0.0",
"gatsby-source-filesystem": "^2.0.1",
"gatsby-transformer-remark": "^2.1.3",
"react": "^16.5.1",
"react-dom": "^16.5.1"
},
"devDependencies": {
"gh-pages": "^2.0.0"
}
}
Plus, I'm trying to make an user/organization site like:
https://username/github.io
I'm just guessing email is not set in your git config. Try to run git config user.email to see if it's there.
You can follow this article on how to add it https://help.github.com/articles/setting-your-commit-email-address-in-git/.
Also, here are docs on how to set a github page.

Webpack Options Validation Error

I was trying to run my webpack inside my windows 10 machine.
I set up the webpack inside my root folder.
Here's my webpack.config.js:
const path = require("path");
const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "client/dist");
module.exports = {
config: `${SRC_DIR}/index.jsx`,
output: {
filename: `bundle.js`,
path: DIST_DIR
},
module: {
rules: [
{
test: /\.jsx?$/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
mode: "development"
};
And then inside my package.json file:
{
"name": "rform",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.12.0",
"webpack-command": "^0.2.1"
}
}
Upon running npm run build I got the ff error:
ValidationError: config-loader
Options Validation Error
options['config'] is an invalid additional property
at validate (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/schema-utils/dist/validate-options.js:87:15)
at validator (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/schema-utils/dist/validate-options.js:118:10)
at resolve.then (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/config-loader/lib/index.js:18:7)
at process._tickCallback (internal/process/next_tick.js:109:7)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:151:9)
at bootstrap_node.js:542:3
npm ERR! Linux 4.4.0-17134-Microsoft
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v7.10.1
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rform#1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the rform#1.0.0 build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rform package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs rform
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls rform
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/darrenchui/.npm/_logs/2018-06-13T07_55_50_484Z-debug.log
I make sure that I am running the proper the file setup inside my dist and src folder..What am I doing wrong on configuration? Please help!
There isn't anything called as the config in their webpack-configuration options
Kindly go through their configuration options from the below link
https://webpack.js.org/configuration/
I guess it will work if you replace config with entry in you options like below
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
filename: `bundle.js`,
path: `DIST_DIR`
},
module: {
rules: [
{
test: /\.jsx?$/,
include: SRC_DIR,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
mode: "development"
};

missing script: start Electron

I try to create my first angular application using Electron, so i follow this guide here :
Electron Documentation
so i do step by step what is in the guide but when i do this command :
npm start
I get this error here:
$ npm start
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! missing script: start
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! D:\FreeLancer\angular2electron\npm-debug.log
package.json
{
"name": "angular2electron",
"version": "1.0.1",
"description": "my first angularjs",
"main": "main.js",
"dependencies": {
"electron": "^1.4.13"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "LAIDANI Youcef",
"license": "MIT"
}
Someone have an idea about this problem?
Thank you.
npm start runs the script in the package.json. To get an electron app running with it just add electron . to the start script :
package.json
{
"name": "angular2electron",
"version": "1.0.1",
"description": "my first angularjs",
"main": "main.js",
"dependencies": {
"electron": "^1.4.13"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start" : "electron ."
},
"author": "LAIDANI Youcef",
"license": "MIT"
}

Resources