`need an appropriate loader` error after running `next build` in postinstall script - npm

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.

Related

Vercel deployment Error: Command "CI='' npm run build" exited with 1

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.

Nuxt: Command 'nuxt' not found - Output directory `dist/` does not exists

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.

npm cannot install some packages globally and locally?

I'm developing some JavaScript application with VSCode editor, and it says cannot find ESlint package. So i tried install it locally on app directory and globally, but both methods are failed. It gives following error(log file) and stops installation.
silly fetchPackageMetaData error for emoji-regex#^7.0.1 Unexpected end of JSON input while parsing near '...gex-7.0.1.tgz","fileC'
i tried to install package that causes the error and it also get failed, i cleared cache of npm with npm cache clean --force and re-install eslint package. And it worked.

Failed to Compile After Installing Vuetify with Vue CLI 3

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.

npm run build command error

I'm trying to use install Amazon cognito Identity SDK for JavaScript by using NPM and Web-pack. Once it is done, I wanted to build the application bundle using 'npm run build'.
But it displays the following error
'Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "dist" is not an absolute path!'
How can I correct this?