I was making my portfolio with NextJs and testing live how it looks in production, anyway, everything was perfect until I make a component with grid images, the Vercel terminal shows an error, and then searched for the solution. The code doesn't shows any warnings or something like that.
I have to change the command build to CI='' npm run build, but now my project is okay with a new URL and my component with the images doesn't show, just 1 image is in the site. I don't know why, but now in the terminal, it shows me :
[10:07:12.718] Cloning github.com/LucianoCerullo77/portfoliov2 (Branch: main, Commit: ab73db1)
[10:07:12.723] Skipping build cache since Vercel CLI used --force option
[10:07:13.125] Cloning completed: 407.165ms
[10:07:13.532] Running "vercel build"
[10:07:14.022] Vercel CLI 28.8.0
[10:07:14.319] Installing dependencies...
[10:07:22.608]
[10:07:22.608] added 288 packages in 8s
[10:07:22.608]
[10:07:22.608] 98 packages are looking for funding
[10:07:22.609] run `npm fund` for details
[10:07:22.625] Detected Next.js version: 13.0.6
[10:07:22.627] Running "CI='' npm run build"
[10:07:22.923]
[10:07:22.924] > portfoliov2#0.1.0 build
[10:07:22.924] > next build
[10:07:22.924]
[10:07:23.364] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[10:07:23.365] This information is used to shape Next.js' roadmap and prioritize features.
[10:07:23.365] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[10:07:23.365] https://nextjs.org/telemetry
[10:07:23.365]
[10:07:23.491] info - Linting and checking validity of types...
[10:07:23.868] error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
[10:07:23.875] info - Creating an optimized production build...
[10:07:23.919] info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
[10:07:24.425] info - Using external babel configuration from /vercel/path0/.babelrc
[10:07:28.276] Failed to compile.
[10:07:28.277]
[10:07:28.277] ./components/Projects/index.jsx
[10:07:28.277] Module not found: Can't resolve '../../public/projects/Fennex.png' in '/vercel/path0/components/Projects'
[10:07:28.277]
[10:07:28.277] Import trace for requested module:
[10:07:28.278] ./components/Projects/index.jsx
[10:07:28.278]
[10:07:28.278] ./components/Projects/index.jsx
[10:07:28.278] Module not found: Can't resolve '../../public/projects/Olivia.png' in '/vercel/path0/components/Projects'
[10:07:28.278]
[10:07:28.278] Import trace for requested module:
[10:07:28.278] ./components/Projects/index.jsx
[10:07:28.278]
[10:07:28.278]
[10:07:28.278] > Build failed because of webpack errors
[10:07:28.310] Error: Command "CI='' npm run build" exited with 1
I need help, I don't know how to fix it.
Related
I'm trying to add i18n to my project but it cannot find module '#vue/cli-shared-utils'. I'm following the instructions on https://kazupon.github.io/vue-i18n/installation.html
But when I run
npm init vue#latest
cd project
npm install
npm run lint
vue add vuetify
vue add i18n
This error occurs. I'm not sure what I'm doing wrong since these are the instructions
📦 Installing vue-cli-plugin-i18n...
up to date, audited 366 packages in 1s
93 packages are looking for funding
run `npm fund` for details
3 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
✔ Successfully installed plugin: vue-cli-plugin-i18n
ERROR Error: Cannot find module '#vue/cli-shared-utils'
Require stack:
- /home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js
- /home/lalo/WebstormProjects/project/package.json
Error: Cannot find module '#vue/cli-shared-utils'
Require stack:
- /home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js
- /home/lalo/WebstormProjects/project/package.json
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Function.resolve (node:internal/modules/cjs/helpers:109:19)
at module.exports (/home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js:4:38)
at invoke (/usr/local/lib/node_modules/#vue/cli/lib/invoke.js:74:25)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
(I don't know if it's important but I'm using typescript when configuring vue)
Goal: Create a CRA TypeScript app with Yarn.
I run yarn create react-app my-app --template typescript on my terminal. Then I encounter the ff. error message:
yarn create v1.22.10
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
error create-strapi-app#3.6.3: The engine "node" is incompatible with this module. Expected version ">=10.16.0 <=14.x.x". Got "16.14.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
And it's super weird and confusing because I'm not trying to create a Strapi project. I check yarn-error.log and I see these lines after the Error Stack Trace:
npm manifest:
{
"dependencies": {
"create-strapi-app": "^3.6.3"
}
}
yarn manifest:
No manifest
So I'm thinking either CRA requires CSA, or somehow my local NPM is configured to always require CSA. I very much doubt the former, so I'm betting it's the latter. (Please correct me if I'm wrong.) Either way, any ideas how I may resolve this?
I have successfully created a Nuxt.js project with this configuration using the CLI:
Project name: test
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: None
Linting tools: None
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)
Development tools: jsconfig.json
Version control system: Git
The developement server runs properly with npm run dev.
npm run build also runs without errors and tells me that:
Ready to run nuxt generate
But the execution of nuxt generate leads to the error Command 'nuxt' not found. This is strange because nuxt seems to be installed when I execute npm nuxt list.
I first reinstalled just nuxt and then all dependencies after deleting the node_modules/ folder, but the error remains the same. If I just run npm run start it tells me
Nuxt Fatal Error
Error: Output directory `dist/` does not exists, please use
`nuxt generate` before `nuxt start` for static target.
This is strange again because the .nuxt/dist/ folder exists.
Does anyone have an idea what is going wrong?
I have solved the problem. For me it works if I run npm run generate instead of nuxt generate.
Here is the replication repo:
https://github.com/stomvi/nextjs-postinstall-build
Just run:
npm i -g git+ssh://git#github.com:stomvi/nextjs-postinstall-build.git
I am using next.js as a local web server as a part of a cli tool. I would like to build the next.js server after the tool is installed, so I put next build in the postinstall script in the package.json. The installation failed with an "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file." error.
Using
- next.js v9.0.4
- npm 6.9.0
The error shows that there might not be a jsx file loader for this. Local npm link works fine.
Failed to compile.
./pages/logs/[page].js 11:4
Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| return (
> <Layout>
| <div className="card filter-container">
| <div className="card-header">
> Build error occurred
Error: > Build failed because of webpack errors
How could I make this work? Currently I just commit the .next dir into the repo.
I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.