If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).
I believe I followed every single step mentioned in the documentation but can't seem to get images load with 'next start' script.
Next.config.js
images: {
domains: [
'dev.mydomain.com',
'qa.mydomain.com',
'stg.mydomain.com',
'mydomain.com',
],
},
I have images in public/assets/images directory. These are .png files
In my React component that is used on one of the pages, I have
import Image from 'next/image';
import homeIntroImg from '../../../public/assets/images/homeIntro.png';
.....
<Image
src={homeIntroImg}
alt="Home Introduction"
placeholder="blur"
/>
As mentioned in docs, I have installed 'sharp' and added environment variable. /usr/src/app is the working directory path in docker.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "NEXT_SHARP_PATH=/usr/src/app/node_modules/sharp next start ",
Dockerfile
FROM base-image-node-16.0:latest AS runner
WORKDIR /usr/src/app
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1
USER 2020
COPY --chown=2020:2020 . /usr/src/app
EXPOSE 3000
CMD [ "npm", "run", "start" ]
On local when i try to build docker container,
I get
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
but images load fine.
When the same docker image is deployed to cluster, the initial load time is almost 10-15 sec. This wasn't happening like this when I run the app using 'node server.js'. I wanted to use 'next start' as recommended to get optimization benefits but now I question if it is worth to use 'next start' if it takes 10-15 sec for load.
images do not load and fail with 503 service unavailable error.
I see the 'Sharp' warning and right after that 'npm' crashes
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
Killed
Am I missing anything? Any help is greatly appreciated.
Update 1 : Updated the latest working solution to #Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
Parsing error: Cannot find module 'next/babel'
Require stack:
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\config-array-factory.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.
In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.
TL;DR - see this answer which points to this blog. This fixed it for me.
Some Details
For example, if I have:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
But then I get the same error you're experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.
If that's the case for you as well, then what you need (as described in the links above) is to:
Create a workspace config
Specify folders where you need ESLint to run
You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
Note: You don't need to create extra .babelrc file
In your NextJS Project you have this file , named .eslintrc.json,
In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note: If you only replace with
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.
For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.
{
"extends": ["next/core-web-vitals", "prettier"]
}
In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.
{
"eslint.packageManager": "pnpm"
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p and search for ESLint: Restart ESLint Server.
It worked for me by just adding prettier in .eslintrc file.
{
"extends": ["next", "prettier"]
}
Try updating the .eslintrc.json file to
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already
npm install eslint-plugin-prettier#latest --save-dev
Don't have to include .babelrc file as it will replace Nextjs SWC compiler
S
I had this same problem - Close the IDE and reopen it with the project folder !!
My Problem
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.
My Solution
add this into the ESLint config file:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.
Upgrade React version to latest
Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.
To upgrade you can run the following command:
npm install react#latest react-dom#latest
Or using yarn:
yarn add react#latest react-dom#latest
Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:
npm install next#latest
or
yarn add next#latest
Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.
Add prettier to your project
yarn add --dev eslint-config-prettier
Update your eslint config as follows
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.
ctrl + shift + p
TypeScript: Restart TS server
Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO
In my project, i just run yarn add #babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
it works, and npm run lint works fine too.
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue's gone.
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.
I recently updated my Meteor based website from 1.3 to 1.8, while including a Let's Encrypt SSL. When I attempt to add new users after being deployed using MUP, the UI for adding users collapses down to three strobing bars but never completes. When I attempt to run the page in another browser it gives me a 502 Bad Gateway error. This 502 error goes away when I refresh the original page attempting to create the account.
I built around using the 'turn key' accounts as provided. It works great while testing locally on my home computer.
This is all the install packages including the default after removing insecure and :
meteor-base#1.4.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
mongo#1.6.2 # The database Meteor supports right now
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.5.3 # CSS minifier run for production mode
standard-minifier-js#2.4.1 # JS minifier run for production mode
es5-shim#4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.12.4 # Enable ECMAScript2015+ syntax in app code
shell-server#0.4.0 # Server-side component of the `meteor shell` command
alexwine:bootstrap-4
oauth
iron:router
accounts-ui
accounts-password
accounts-facebook
accounts-google
session
underscore
facebook-config-ui
google-config-ui
And this is running stock accounts, there is no special code. I have set up the sign in for username and email in the client facing side of the JavaScript file:
Accounts.ui.config({
passwordSignupFields: "USERNAME_AND_EMAIL"
});
What is really frustrating is that my site works fine when ran on my local machine for testing, adding and updating users as necessary, but gets bogged down when deployed for some reason.
I'm so lost I don't even know know what would be causing it to hang like this so badly. Any help is greatly appreciated!
Edit: Adding package.json
{
"name": "DMachineWordBank",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "^7.3.4",
"bcrypt": "^3.0.6",
"meteor-node-stubs": "^0.4.1",
"popper.js": "^1.15.0"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
}
}
if you remove bcrpt and ignore the following message does it fix production?
Note: you are using a pure-JavaScript implementation of bcrypt.
While this implementation will work correctly, it is known to be
(STDERR) approximately three times slower than the native implementation.
In order to use the native implementation instead, run
meteor npm install --save bcrypt
in the root directory of your application.
I am getting started with meteor and react. This is what I have done:
meteor create simple-react
meteor add kadira:flow-router
meteor add kadira:react-layout
mkdir client server lib
mkdir client/components
touch client/head.html
touch lib/routes.jsx
In routes.jsx, I have added the home page route:
FlowRouter.route("/", {
name: "Home",
action(params) {
ReactLayout.render(Home);
}
});
In home.jsx, I have created a simple Home component.
In the browser console, I am getting an error: Unable to find "/".
If I convert the routes.jsx to route.js, then the routes work. But, I am getting the error: Not able to find the Home component in the browser log.
For some reason, the JSX is not being recognized by Meteor and not getting compiled to JS.
I have all the required packages - ecmascript, jsx, react, react-runtime.
Though I added kadira:react-layout, I had to explictly add react to the packages list. Adding react to the packages list fixed it.