We need to support IE11 with our app.
When building it with react-scripts build the backticks in template literals won't be transpiled, which of course doesn't work for IE.
The error appears in the chunks/vendor js file - not sure if that changes anything.
Is there any way to add some config with webpack plugins in react-scripts? We're on 2.1.5.
Ejecting from npm isn't an option.
So we just found out that it indeed was an error in a npm module.
Now we made a PR for it.
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 created my app with create-react-app.
Then installed styled-components. After that I wanted my classnames to be readable, and for that I had to do npm run eject and add babel configuration according to this instruction..
After that I did npm start and everything works, but in each component file on the first line I see following error: image here. But my app still works. No errors in the console.
How and where should I specify these env variables?
Thanks.
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'
How do i can copy webpack files to work in a project?
The folders contain JS modules (scripts) with comments.
Thanks.
If you are using react js with cli means(create-react-app) than you no need to copy webpack. Just use npm eject
if you are using CDN than try this one
I assume you are using create-react-app(CRA).
as far as i know you must eject from CRA to access webpack config in your project use either npm eject or yarn eject.
This way you can't use migration script to upgrade your CRA any more.
Also you could use React-app-rewired without ejecting.
I installed messageformat from npm for use in my angular-boostrap project in conjunction with angular-translate.
If I simply add messageformat v0.3.1 via CDN, everything works as expected. But I would like to use messageformat installed from npm. The trouble is, I have no idea how. None of the scripts in the messageformat npm package looks anything like the one on CDN. I am wondering if I need to build it or something? But then again, the documentation on npm for messageformat does not mention anything apart from "npm install...".
What am I missing?
[Edit]
There is both a bin and a lib folder in the project. Both contain messageformat.js, but none of them are working, and they look nothing like the one from CDN. If I include node_modules/messageformat/lib/messageformat.js I get a "module is not defined" error. If I include node_modules/messageformat/bin/messageformat.js I get "invalid or unexpected token" ... Therefore I suspect there is a step missing to get a script like the one from CDN
you need to add the files instead of cdn :
<script src="path/to/node_module/messageformat/messageformat.js"></script>
It turns out that version 0.3.1 of the npm package did not include a UMD version of the script, but since then version 1.0.0 is out, and a script ready for use in browsers now ships with the npm package.
https://github.com/messageformat/messageformat.js/issues/157