When I try running npm run build for a new webpack build I get
You have installed webpack-cli and webpack-command together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.
I think I installed them globally. I tried, deleting them, webpack, deleating node clearing cache but I keep getting the same result.
Using webpack 4
{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
I think the message was quite clear so just run npm uninstall "webpack-command" to remove webpack-command (b/c "webpack-cli" has newer version)
Related
I am just starting to learn next.js. I installed create-next-app tried starting a development server without changing any code provided by boilerplate. I get this error
./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js
I am just starting with nextjs so I do not have any other information besides this and I have not changed any code
commands I used
npx create-next-app next_js_list
cd next_js_list
npm run dev
This is the package.json I have
{
"name": "next_js_list",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.1"
}
}
Same for me, looks like an error with the new next.js version 11.1.1, just go back to 11.1.0, and will be ok, a fix will be coming shortly
I have a project that already was deployed on Vercel. Since last week Im working on improve the layout with the goal of finish a MVP of this project. So, I changed my usage of auth0, using the package to nextjs #auth0/nextjs-auth0. I ran
npm install #auth0/nextjs-auth0
and I have on my package.json
{
"name": "MAmanager",
"version": "1.0.0",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",
"dayjs": "^1.9.5",
"formik": "^2.1.5",
"next": "^10.2.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"swr": "^0.5.6",
"yup": "^0.29.3"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
}
The usages on my pages are
import { UserProvider } from '#auth0/nextjs-auth0'
import { useUser } from '#auth0/nextjs-auth0'
import { withPageAuthRequired } from '#auth0/nextjs-auth0'
And when I deploy my branch on Vercel I get this error
08:57:49.989 Failed to compile.
08:57:49.990 ModuleNotFoundError: Module not found: Error: Can't resolve '#auth0/nextjs-auth0' in '/vercel/path0/pages'
08:57:49.990 > Build error occurred
08:57:49.991 Error: > Build failed because of webpack errors
08:57:49.991 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
08:57:49.991 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
08:57:50.020 error Command failed with exit code 1.
I have seen errors like that caused by casing discrepancies but I don't understanding what is happening here. I appreciate any help.
After see other examples I just edited manually the package.json.
After run npm install #auth0/nextjs-auth0 the package was automatically added "#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",.
I just edit to
"#auth0/nextjs-auth0": "^1.3.1"
and worked on deployment.
Note: The way the package was installed worked on dev in localhost but broke only on the deployment.
try making a custom build script for your deployment as a temporary workaround:
npm install && npm i #auth0/nextjs-auth0#1.3.1 && npm run build
This can be added under the deployment settings tab using a custom build command for production. Running the specific targeted package version install after npm i should override the problematic version being installed in prod
Currently exploring webpack different tools associated with it. Now I am using Babel for transpiling ES6 code into ES5 code. I came accross the need for a .babelrc file which holds the configurations for Babel. However, on the website of Babel I also saw that you could also place these configurations into the package.json file. Like this:
Package.json File:
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0"
},
"babel": {
"presets": [
"env"
]
}
}
Now when I run npm run dev Babel also works and the code gets transpiled succesfully.
How does Babel know to access the package.json file? Does it first look for an .babelrc file and then if this is not present does it automatically look for its configurations in the package.json? How does Webpack interact with both Babel and the package.json file to produce this result?
For anyone who is interested it was on the official website:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
I am trying to get started with Next.js, yet I receive the following error:
Module build failed: Error: Cannot find module 'react-hot-loader/babel' from '/home/ugurkaya/Desktop'
The following is my package.json:
"name": "hello-next",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^6.0.4-canary.6",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-hot-loader": "next"
}
I added the react-hot-loader dependency manually when I get this error, yet it did not solve. Looking forward your helps!
I fixed this issue by just
npm install react-hot-loader --save-dev
This issue is generate because react not find react-hot-loader in dev dependancy
You can solve this problem you just need to install react-hot-loader as dev dependancy
npm install react-hot-loader --save-dev
I am using ember-cli to setup my new emberjs application. While I was able to successfully install jade, it does not appear to be rendering .jade templates added to the /app directory?
Thoughts? Current package.json:
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9",
"broccoli-sass": "^0.1.4",
"broccoli-csso": "^0.2.0",
"broccoli-jade": "^0.2.0"
}
}
There is a rather small template in the /app folder named error.jade with the following code:
doctype html
head
title
|Error!
body
p
strong
|Error!
When I run ember serve or ember build it never gets compiled. Everything else is the standard setup in ember cli. I ran npm install --save broccoli-jade to install it. Here is an example repo I setup for this issue embercli-emberjs-test. Ideally I would like to compile both handlebars and jade templates.
Thoughts? github issue
try running
bower install
in your app root. Some times the post-install routine does not execute automatically.