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.
Related
this is my package.json file it's a code from a course to test my code functionality.
enter image description here
The npm run build is working by the way & I'm using vite to run the npm.
{
"name": "adopt-me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"build":"vite build",
"preview":"vite preview",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo\"Error: no test specified\"&& exit1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"vite": "^3.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
to run my react on browser in, I expecting to get a localhost number to do that
According to your screenshot:
You need to run npm run dev not npm run div
I'm making a Gatsby site, and I've intially set it up to use markdown files via gatsby-transformer-remark. I've since decided to move it over to MDX in order to have a bit more freedom in what content I can use.
I've followed this guide to migrate the project from MD to MDX, but I keep getting the following error:
Cannot find module 'D:\XXXX\XXXX\gatsby\.cache\caches\gatsby-plugin-mdx\webpack\output.js'
Require stack:
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\utils\render-html.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby\source-nodes.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby-node.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\initialize.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\services.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\commands\develop-process.js
- D:\XXXX\XXXX\gatsby\.cache\tmp-4452-lp3aICfNr8bo
I've tried:
Clearing cache and build files (gatsby clean)
Updating all packages, including Gatsby itself
Various ways to include the plugin in gatsby-config.js
Changing it all back to MD, making sure it works, and then migrating it to MDX once again.
Doing a build. Same thing happens as when running gatsby develop
Deleting package-lock.json and node_modules folder and running npm install again.
Nothing worked. This has to be something really stupid to do with NPM or Webpack but I just don't see it.
gatsby-config.js
module.exports = {
siteMetadata: {
title: "XXXX",
copyright: "XXXX"
},
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
},
},
`gatsby-transformer-remark`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
]
}
package.json
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"#mdx-js/mdx": "^1.6.22",
"#mdx-js/react": "^1.6.22",
"gatsby": "^3.1.2",
"gatsby-plugin-image": "^1.1.2",
"gatsby-plugin-mdx": "^2.1.0",
"gatsby-plugin-sharp": "^3.1.2",
"gatsby-source-filesystem": "^3.1.0",
"gatsby-transformer-remark": "^3.1.0",
"gatsby-transformer-sharp": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-in-viewport": "^1.0.0-alpha.16",
"react-reveal-text": "^0.1.1",
"react-spring": "^8.0.27",
"react-text-loop": "^2.3.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
EDIT:
I should point out that when I go that location in cache that's mentioned in the error, there really is no webpack folder, nor output.js - so it really isn't being generated when I run gatsby develop, I just can't understand why.
I've also tried making a new project by cloning the offical gatsby mdx starter template, and that is working just fine out of the box.
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.
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'
class Store {
_number = 0
increment = () => {
this._number++
}
get number() {
return String(this._number)
}
}
// All of those are defined
console.log('TEST', {action, decorate, computed, observable, observer})
decorate(Store, {
_number: observable,
increment: action,
number: computed,
})
class TestComponent extends React.Component {
static defaultProps = {
clickableComponent: 'button',
numberElement: 'div',
}
store = new Store()
render() {
const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
const {number, increment} = this.store
return <Fragment>
<ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
<NumberElement>{number}</NumberElement>
</Fragment>
}
}
export default observer(TestComponent)
In browser (react) app I get the following error:
Failed to compile
PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
In native app (react-native) I get the following runtime error:
error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root package.json:
{
"name": "monorepo-rn",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"workspaces": {
"packages": [
"packages/**"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"scripts": {
"run:web": "yarn workspace web start",
"run:native:ios": "yarn workspace nativeapp react-native run-ios",
"run:native:android": "yarn workspace nativeapp react-native run-android"
}
}
Here is the package.json of the shared package:
{
"name": "test-component",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir lib"
},
"peerDependencies": {
"mobx": "^4.x",
"mobx-react": "^5.x",
"react": "^16.x",
"react-dom": "^16.x"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"dependencies": {}
}
Here is the package.json of the webapp:
{
"name": "web",
"version": "0.1.0",
"dependencies": {
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3",
"test-component": "1.0.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewire-babel-loader": "^0.1.1",
"react-app-rewired": "^2.0.3"
}
}
And here is the package.json of the react-native app:
{
"name": "nativeapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"test-component": "1.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "16.6.3",
"react-native": "0.58.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.
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.