I have been attempting to publish an npm package for react but keep running into issues. More specifically, after I publish my package and go to test it, the installed package has errors related to the jsx.
I built the published package with create-react-app and then added an additional package.json in the specific directory I wanted to publish.
I assume my issues are because create-react-app expects you to use the root package.json and not a separate one within the project. So this leads me to believe there are Webpack or Babel configurations I need to handle. I am having trouble finding this information.
The directory I am trying to publish only has 3 files other than my package.json which looks like this
{
"name": "...",
"version": "1.0.0",
"description": "...",
"main": "index.js",
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"keywords": []
}
this has so far been unsuccessful. I have also attempted the following
{
"name": "...",
"version": "1.0.0",
"description": "...",
"main": "index.js",
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"babel": {
"presets": [
"#babel/preset-react"
]
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"keywords": []
}
Im not sure what I am missing
You can use the create-react-library for creating packages for React and publishing those to NPM.
Related
I wrote a React component that I want to demonstrate with examples. The component is visible here: https://codesandbox.io/s/live-retractable-toc-for-documentation-g4zv99 . In short, the component takes the content of the HTML output and generates a dynamic local table of contents from the h1-h5 headers. It dynamically adjusts to which headers are visible as the user scrolls, disappears when it might conflict with wide tables or images (for more info, see FAQ in README.md).
A Gatsby-based example seems a reasonable choice to show the component in action. But I have a problem with getting Gatsby to work on codesandbox. The newest version of nodejs offered in the list of dependencies is 16, while the latest Gatsby requires 18. I have tried to adjust package.json to work with the available versions, as follows:
{
"name": "gatsby-minitoc",
"private": true,
"description": "",
"version": "0.1.0",
"author": "Francis Vila <fvila789#gmail.com>",
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"#fontsource/merriweather": "^4.5.14",
"#fontsource/montserrat": "^4.5.13",
"gatsby": "4.25.3",
"prismjs": "^1.29.0",
"react": "^16.9",
"react-dom": "^16.9"
},
"devDependencies": {
"prettier": "^2.8.1"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [],
"license": "0BSD",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"engines": {
"node": ">=14.15.0"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
}
}
(visible here: https://codesandbox.io/s/gatsby-minitoc-v15mu9?file=/package.json:0-1058 )
But I get an error as follows:
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The linked page does not tell me what's wrong or how to fix it...
I tried to use runkit (see here https://runkit.com/francisvila/63c52b50791d8600082b3933 ) but got a cryptic message when trying to add Gatsby dependency
Error: Cannot find module 'react'
Should we have react?
We should have every package on npm. Sometimes this error is caused by a typo in your require path, but if you think we are actually missing this package, please confirm below and we’ll do our best to fix it as soon as possible!
Not sure what I am doing wrong. I am trying to setup a monorepo with lerna & nextjs and have been following a tutorial but get stuck at this point.
My file structure looks exactly as specified in the tutorial:
lerna.json
package.json
packages
--- components (React Components)
--- package.json
--- ...
--- frontend (NEXTJS APP)
--- package.json
--- ...
It worked fine so far, but now when I try to import components in my frontend nextjs application, it gives me a Module not found Error:
./pages/index.js:4:0
Module not found: Can't resolve 'components'
My package.json in the / (root) folder:
{
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^4.0.0"
}
}
package.json in packages/frontend (NextJS App) :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"components": "0.0.0",
"next": "11.1.2",
"next-transpile-modules": "^8.0.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
package.json in the /packages/components folder:
{
"name": "components",
"version": "0.0.0",
"description": "> TODO: description",
"author": "Anton",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1",
"dev": "microbundle watch --jsx React.createElement"
},
"source": "lib/index.js",
"devDependencies": {
"microbundle": "^0.13.3"
}
}
I have been following the linked tutorial pretty much to the dot, I'm really not sure what's going on here, but then again, I am a beginner/low intermediate and would appreciate some help!
Had the same issue following the tutorial here.
The gotcha was that you have to run lerna bootstrap again from the root of the monorepo. For me this fixed it.
I have existing React Apps which are published to production web servers but I want to run them from the desktop using Electron. However, I do not want to disturb the React App package.json. I attempted to decouple an existing online tutorial by paachu on Medium but was unsuccessful. It kept failing trying to locate "main...chunk.css" and other resources needed by the React App.
With that said, I have a working React App in directory ./projx/reactApp I would like to create an Electron App in ./projx/electronApp that will build and create a packaged executable using electron-builder. The dev environment is not necessary at this time in that I only need a release package to distribute. Here is a package.json that almost works:
{
"name": "wrappedReact",
"version": "1.0.0",
"main": "./src/electron.js",
"scripts": {
"preclean": "cross-env rm -rf build",
"react-prebuild": "cross-env cp -r ../reactApp/build build",
"build-tsapp": "tsc ./src/electron.ts",
"electron-prebuild": "mv ./src/*.js ../build",
"electron-build": "npm run electron-prebuild && electron-builder",
"build": "npm run preclean && npm run electron-build",
"startdev": "concurrently \"tsc ./src/electron.ts -w\" \"cross-env
NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 &&
electron src/electron.js\"\""
},
"author": "sfanjoy",
"homepage": "./",
"electron-pack": "build --em.main=build/electron.js",
"build": {
"appId": "com.example.reactApp",
"productName": "ReactApp",
"copyright": "Copyright © 2019 sfanjoy",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "portable",
"icon": "assets/app.ico"
}
},
"dependencies": {
"#types/electron": "^1.6.10"
},
"devDependencies": {
"#types/electron": "^1.6.10",
"concurrently": "^4.1.1",
"cross-env": "^5.2.1",
"electron-builder": "^21.2.0",
"electron-is-dev": "^1.1.0",
"nodemon": "^1.19.1",
"typescript": "^3.5.2",
"wait-on": "^3.2.0"
}
}
I think the solution is with electron-builder if it would allow you to inject the ./src/electron.js into the prebuilt reactApp\dist\win-unpacked\resources\app.asar. I could then copy the reactApp/build directory, inject into the asar, and call electron-builder.
This by far (IMO) is the best starting setup (Boilerplate) I have come accross:
https://github.com/nateshmbhat/electron-react-ts-starter/
I want to create lerna monorepo which includes a few packages. But i don't want to compile every package with tsc. This means that i want to export tsx-ts files directly in package.json files' "main" section. And consume these ts files directly from main package. So i can debug what i write in chrome dev tool.
Can you help me.
This is one of my packages' package.json file:
{
"name": "w-cmp-lib",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.3.2"
}
}
I build a Node.js REST implementation using this tutorial .And now i am having problems deploying it on heoroku , local works fine .
Heroku logs :
I believe the problem is with my directory structure. The "main" key
of package.json and and the rest endpoints in index.js are not right
Next I was successfully able to deploy my app on Heroku but I am getting the error.My implementation is as follows :
EDIT : I removed the Procfile , compared to shown in following pics ,as I added the "start" key in package.json
Local :
Directory Structure - /webapp is the root directory :
I have package.json file at root directory and /server with different
version (about which i am not sure how they should be actually for my
ngClient and heroku confiurations )
Files contents of root , /webapp :
package.json
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"/myRESTApp/server/server.js"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
package.json in /myRESTApp/server:
{
"name": "web_first_package",
"version": "0.0.0",
"description": "first node package for project storm",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "6.9.x",
"npm": "3.10.x"
},
"author": "Divyanshu Jimmy",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jwt-simple": "^0.5.1",
"morgan": "^1.7.0"
}
}
Node version : 6.9.2 NPM Version : 3.10.9
Change start script to node ./myRESTApp/server/server.js.