Here is a question.
I'm trying to merge some of my packages into a monorepo. I'm using yarn and it's workspaces-experimental feature. So the repository folder structure looks like:
.
node_modules
packages
myapp1
myapp2
myreactapp1
Now, one of the goals is to simplify testing. I want to run jest in the root dir so that it runs unit tests for all the packages. And it works for myapp1 and myapp2 above which are node.js apps. However, myreactapp1 is build with create-react-app (no eject) and uses ES6 features (like import) and also jsdom rendering. The tests work fine if I run them from myreactapp1 dir with yarn test which pipes the code through babel (if I understand well). But the root jest failes on the first import statement.
How can I do it ?
P.S. I tried to install babel-jest but seems that it cannot be lauched directly from the console (windows).
It seems that CRA does not yet work properly with Yarn Workspaces. A workaround is suggested in the comments.
Anyway, to make jest work, you need to have babel-jest (as you said) and also a .babelrc file in the root folder:
{
"presets": ["es2015", "react"]
}
Related
I installed tailwindcss inside of my Next.js application. This was the error message that I received
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
This is how I installed the Next.js application:
npx create-next-app -e with-tailwindcss ./
These are the dependencies I installed:
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.
Solution
Remove .bablerc file and components folder along with js files in pages folder.
More details
This is strange because if you look at the repository of Next.js example with-tailwindcss. It doesn't have those. Not sure how that happened. We can elaborate more in the comments.
Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.
The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.
For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.
So your steps would be:
Step 1:
without typescript:
npx create-next-app ./
or with typescript:
npx create-next-app --ts ./
Step 2:
Docs to install tailwind with next.js:
https://tailwindcss.com/docs/guides/nextjs
I implemented my react project as monorepo using yarn workspace.
I would like to ask for advice on whether it is common or better to place packages (eslint, prettier, jest, rtl, etc.).
These packages are common to all workspaces and can be configured in advance at the beginning of the project.
So, packages related to prettier or eslint are placed in the root workspace, and jest and rtl are also added to the root's package.json, not each workspace's package.json.
However, as yarn workspace has a command to add packages to all workspaces, I wonder if adding common packages to root workspace in monorepo is correct.
I have executed this command npm run eject and I got several new files appeared in my React project but I don't see these two files, "webpack.config.dev.js" and "webpack.config.prod.js" .
What is wrong in my project?
Nothing is wrong with your project, Its just the way create-react-app works
You wont see webpack.config.dev.js and webpack.config.prod.js because those are not embedded in react-scripts, instead you will find the webpack configuration in config/webpack.config.js
When you run npm run eject
that script will move all the webpack & webpackDevServer configuration from react-scripts to the App Root giving you all the webpack configuration and related files and scripts
I'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript.
I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application w/o TypeScript isn't an option.
Here's what i've tried so far:
First Attempt
Following this guide in order to get it to work.
When closely following the guide (although react-intl-cra is deprecated) the language files will generate properly.
However if you create the app using create-react-app react-intl-example --typescript and change the script to
"extract:messages": "react-intl-cra 'src/**/*.{js,jsx,ts,tsx}' -o 'src/i18n/messages/messages.json'"
it will break with a compiler error.
Second Attempt
Since react-intl-cra was refering to a react-app-rewired solution, I've tried adding it alongside customize-cra and babel-plugin-react-intl to a freshly generated CRA (using TS). However no luck there as well and after some short period of research I found that it's officially not supported.
Third attempt:
Adding extract-react-intl-messages to my project and running:
$ npx extract-messages -l=en,ja -o app/translations -d en --flat false 'src/**/!(*.test).tsx'
failed with an error as well.
I ran out of ideas, hence I came here to ask. From what I've seen TypeScript has been well advertised in the last couple of years and I don't think I have to justify that React is still pretty hyped. Moreover I can't imagine, that i18n is an uncommon concern in application development.
However I wasn't able to find any up-to-date guide or anything useful on npmjs.com.
TL;DR;
What I need:
Extract messages from defineMessages from react-intl into json files
Must work in a CRA using --typescript
Should not utilize npm run eject
What I've tried:
react-intl-cra
react-app-rewired + customize-cra + babel-plugin-react-intl
extract-react-intl-messages
It's explained here: https://github.com/akameco/extract-react-intl-messages#typescript
Basically you need to
npm install --save-dev #babel/core #babel/preset-typescript #babel/preset-react
and add
#babel/preset-typescript
to your .babelrc:
{
"presets": [
"#babel/preset-react",
"#babel/preset-typescript"
],
}
Then you can run
npm run extract-messages 'src/**/*.[jt]sx'
I have written some react components.
I have a folder of ES6 files with multiple files :
components/A.js
components/Button.js
I wan't to import them like this in my futur project.
import A from 'bootstrap-styled/components/A';
I would like to create a npm package.
I need to export them in ES5 format using the SAME directory structure.
I don't wan't a single output file.
Is there any existing program that can do that ?
You need to have Babel installed in you project (I assume that it is already installed because without it you would not be able to run your ES6 in the browser. So I omit all the settings of Babel, just make sure that you have babel-cli in your project).
So all you need is:
babel components --out-dir dist
It will compile all your files from components to dist.
Than you can publish it to NPM with
"main": "dist"
in your package.json
If you are looking for automatisation of this process try this boilerplate project -
react-cdk.
It'll do the exactly you asking: compile ES6 to ES5 every time you run npm publish