When I read document of lerna create, it says Create a new lerna-managed package.
I came up question,what is lerna-managed package ?
After I execute lerna create, they are added some file ? when I see lerna.json,they wasn't refered. What is the difference between merely create directory.
lerna.json
{
"packages": [
"packages/*"
],
"version": "0.0.0"
}
If someone tell me exact effect of lerna create will you please let me know. Thanks
Related
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
I have problem with my project on React and Sharepoint, after i called gulp clear
my serve.json
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://thisisprivatesite/sites/trainings-team/_layouts/workbench.aspx",
"api": {
"port": 5432,
"entryPath": "node_modules/#microsoft/sp-webpart-workbench/lib/api/"
}
}
also tried npm install, deleting my node_modules
my temp folder is empty
upd: i think typescript dosent create dist folder
Any help pls?
Try running npm install to restore the original state of the project, then start the project normally.
I have a fun project made with create react app. I want to convert the same application to a browser extension. This idea forces me to make the project a mono repo. Because in both applications, I will use the same components, hooks, providers, etc.
I don't want use Lerna or Yarn workspaces. And, this will be my first monorepo. I want to get start with Turborepo. However, I couldn't imagine how to make it work in a good way.
My targeted folder structure exists below
apps/
app1/
app2/
packages/
components/
hooks/
providers/
styles/
package.json
package-lock.json
I will import monorepo dependencies from packages folder into apps exists in apps folder.
For instance;
import { useExampleHook } from '#projectname/hooks'
import { ExampleComponent } from '#projectname/components'
If you have another solution besides Turborepo, don't hesitate to let me know. NPM workspaces is an acceptable solution as well. But, turborepo has the priority due to better performance.
Thanks in advance for your time and answer
TL;DR:
You can do this by using yarn workspaces to make the project a monorepo and then add turborepo to it as a dev dependency.
Steps:
Create a yarn workspace.
Configure your repositories root package.json file from step 1 as:
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
}
Now assuming from your example, you want to import files from packages/hooks into apps/app1, do the following:
//packages/hooks/package.json
{
"name": "hooks", // This can also be "#projectname/hooks" if you prefer
"version": "1.2.3",
...
}
//apps/app1/package.json
{
"name": "app1",
"version": "2.3.4",
"dependencies": {
"hooks": "1.2.3" //This version here must be same as the one in hooks package.json
}
}
// Some js file in apps/app1/...
import { useExampleHook } from "hooks";
...
Now if you want you should be able to install Terborepo to manage your monorepo. (Haven't personally tried this step but theoretically should work)
Tips:
Go through the yarn workspace docs and tutorials.
If you want to convert an existing react project into a monorepo, first transfer all your files to a folder such as root-dir/apps/app1 and then follow from step 1 inside root-dir.
Turborepo has great explanation on how to do it, right in their docs.
In short:
Turborepo is considered to be a taskrunner. So, it is added as a development dependency to your existing project.
npm install turbo -D
The only thing you should watch out tho is the turbo tasks itself.
So, you will have to tweak your start scripts and pipelines.
I have built an application using the create-react-app version 2.0 locally. It runs, builds and works as expected. I am trying to deploy it to Zeit, using now. It works fine when I run the now command from withing the generated ./build folder (npm run build's destination).
My goal is to integrate it with GitHub so it updates the deployment on git push. Unfortunately, running now at the project's root folder doesn't work. I have a now.json file with the following contents:
{
"version": 2,
"name": "somename",
"builds": [
{
"src": "package.json",
"use": "#now/static-build"
}
],
"routes": [
{
"src": "^/static/(.*)",
"dest": "/static/$1"
},
{
"src": ".*",
"dest": "/index.html"
}
]
}
and my package.json contains the "now-build": "serve --single ./build" script.
The error
Every build attempt from the root folder results to this error:
Tries
I have tried changing the now-build to now-start and it didn't work, as it specifically needs now-build, I have tried removing the now.json altogether and it didn't work and every YouTube video I found on the issue doesn't do anything different but it works for them.
Any ideas?!
It turns out that the build command is wrong. The correct one is:
"now-build": "npm run build && mv build dist" in the package.json.
More info: https://github.com/zeit/now-examples/tree/master/create-react-app
I am using nextjs framework and as UI framework I have chosen semantic-ui accompanied with semantic-ui-react.
The main reason for me choosing semantic-ui is the theming power of the framework.
I have installed the full package of semantic-ui as it being showed here.
`
semantic.json file has the following:
{
"base": "/client/static/semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [blah blah],
"version": "2.2.10"
}
Theming is working properly on localhost.
The problem is the following: when trying to deploy usin now dependencies are being installed and semantic-ui feels like it is not there. That means there is no styling at all.
I am including semantic folder to my project (meaning, I am now gitignoring the /client/static/semantic folder).
What is the right way to deploy using Nextjs and semantic-ui?
**UPDATE:
Found where the problem comes from but still dont know how to solve it.
So the proccess goes like that when you theme your semantic-ui.
You install semantic-ui .
semantic-ui looks for the file semantic.json and knows you are theming.
Files and folder for theming are being created BUT not build. That means in order for the compoments of semantic-ui to be build it is needed to navigate to the specific semantic folder and run gulp build.
The problem is now dont know how to do this.
Any ideas?
So to close this with an answer from the comments.
In order to get pre-builds such as gulp/grunt/etc before the actual next build you have to create a script which does what you want.
Example:
// package.json
{
"scripts": {
"build": "gulp build && next build",
"start": "next start"
}
}
and just run npm run build to have your building process started.