I get this error when running the code from the Next JS starter walkthrough:
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.remark (C:\*******\***********\.next\server\pages\index.js:3249:18)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../lib/posts.js (C:\*******\***********\.next\server\pages\index.js:132:64)
at __webpack_require__ (C:\*******\***********\.next\server\webpack-runtime.js:25:42)
at Object../pages/index.js (C:\*******\***********\.next\server\pages\index.js:2933:68) {
code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\**********\********\node_modules\remark\index.js
require() of ES modules is not supported.
require() of C:\*******\***********\node_modules\remark\index.js from C:\*******\***********\.next\server\pages\index.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\***********\********\node_modules\remark\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\*******\***********\node_modules\remark\package.json.
Here is the file focused on in that part of the tutorial ([id].js):
import { getAllPostIds, getPostData } from '../../lib/posts'
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
return {
props: {
postData
}
}
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export default function Post({ postData }) {
return (
<html>
{postData.title}
<br />
{postData.id}
<br />
{postData.date}
<br />
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</html>
)
}
And this is the package.json file:
{
"name": "abhayrajio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"fs": "0.0.1-security",
"gray-matter": "^4.0.3",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"remark": "^14.0.1",
"remark-html": "^13.0.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.0.1"
}
}
I'm new to this and am just trying to understand how the code works. What is going wrong and what should I do to correct it?
This is the walkthrough link: https://nextjs.org/learn/basics/create-nextjs-app
You can use the previous version of remark and remark-html
"remark": "^13.0.0",
"remark-html": "^13.0.1"
I believe the transpiled code is trying to require() remark which is released as a ES Module which is not entirely supported by Next's webpack config.
It appears to be the same issue raised here https://github.com/vercel/next.js/issues/23725
They recently released a fix on their canary branch, you can try it on your project with npm install next#canary
import { remark } from "remark";
We purchased a web app written in Vue from someone and we developing to change/improve it. One thing we added was Vuetify so we can use the Vuetify elements and everything has been working great while in development mode, but when we build for production the CSS for Vuetify elements is missing.
I have searched for this online already and have already tried what everybody is suggesting without any luck.
Anybody has an idea of what could be wrong and why npm run build would be missing some of the CSS?
What's weird is that all the UI functionality for Vue elements is working perfectly, just the CSS is missing.
Please see code samples below.
main.js:
import '#fortawesome/fontawesome-free/css/all.css'
import Vue from "vue";
import App from "./App.vue";
import VueMoment from "vue-moment";
import VueAnalytics from "vue-analytics";
import VueMeta from "vue-meta";
import { library } from "#fortawesome/fontawesome-svg-core";
import {
faCoffee,
faPlusCircle,
faChartLine,
faChevronDown,
faMobile,
faEnvelope,
faClock,
faUsers,
faPaperPlane,
faCheckCircle,
faCheck,
faLeaf,
} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import axios from "axios";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';
import Vuetify from 'vuetify/lib'
library.add([
faCoffee,
faPlusCircle,
faChartLine,
faChevronDown,
faMobile,
faEnvelope,
faClock,
faUsers,
faPaperPlane,
faCheckCircle,
faCheck,
faLeaf,
]);
Vue.use(VueAnalytics, {
id: "xxx",
router,
});
Vue.use(VueMoment);
Vue.use(VueMeta);
Vue.component("font-awesome-icon", FontAwesomeIcon);
Vue.use(Vuetify)
axios.interceptors.response.use(undefined, async function (error) {
if (error.response.status === 401) {
await store.dispatch("auth/logout");
router.push("/login");
}
return Promise.reject(error);
});
// Plugins
// ...
// Sass file
require("./assets/styles/main.css");
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: (h) => h(App)
}).$mount("#app");
App.vue:
<template>
<v-app>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<style>
.text-white {
color: #fff !important;
}
.text-gray-600 {
color: #757575 !important;
}
.font-semibold, .text-gray-700 {
color: #616161 !important;
}
</style>
package.json:
{
"name": "reviewgrower-spa",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "git push dokku master"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.25",
"#fortawesome/free-solid-svg-icons": "^5.11.2",
"#fortawesome/vue-fontawesome": "^0.1.8",
"#fullhuman/postcss-purgecss": "^1.3.0",
"axios": "^0.19.0",
"chart.js": "^2.9.4",
"core-js": "^2.6.10",
"i": "^0.3.6",
"jquery": "^3.5.1",
"npm": "^6.13.0",
"tailwindcss-spinner": "^0.2.0",
"tailwindcss-toggle": "github:TowelSoftware/tailwindcss-toggle",
"url-parse": "^1.4.7",
"vue": "^2.6.10",
"vue-analytics": "^5.17.2",
"vue-chartjs": "^3.5.1",
"vue-click-outside": "^1.0.7",
"vue-clickaway": "^2.2.2",
"vue-feather-icons": "^4.22.0",
"vue-js-toggle-button": "^1.3.3",
"vue-meta": "^1.6.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.1.3",
"vue-stripe-elements-plus": "^0.2.10",
"vuetify": "^2.4.0",
"vuex": "^3.0.1",
"vuex-persist": "^2.1.1"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.2",
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"sass": "^1.32.0",
"sass-loader": "^7.1.0",
"tailwindcss": "^1.1.3",
"vue-cli-plugin-vuetify": "~2.1.0",
"vue-template-compiler": "^2.5.21",
"vuetify-loader": "^1.7.0"
}
}
It's a little tough to understand what is missing where. If you think that is just missing then please try adding css onto the HTML file from the cdn and check the working.
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
I see that you are using webpack to compile the code. So, this could be also something related to webpack configuration. In your webpack rules do you have rules for css and scss. Because vuetify files are in scss.
My webpack configuration is as below when I do these type of circus.
--webpack.config.js--
const path = require("path");
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
watch: true,
entry: {
main: 'main.js'
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.vue$/,
use: "vue-loader",
},
{
test: /\.s(c|a)ss$/,
use: [
"vue-style-loader",
"css-loader",
{
loader: "sass-loader",
// Requires sass-loader#^8.0.0
// options: {
// implementation: require('sass'),
// sassOptions: {
// fiber: require('fibers'),
// indentedSyntax: true // optional
// },
// },
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new VuetifyLoaderPlugin({
/**
* This function will be called for every tag used in each vue component
* It should return an array, the first element will be inserted into the
* components array, the second should be a corresponding import
*
* originalTag - the tag as it was originally used in the template
* kebabTag - the tag normalised to kebab-case
* camelTag - the tag normalised to PascalCase
* path - a relative path to the current .vue file
* component - a parsed representation of the current component
*/
match(originalTag, { kebabTag, camelTag, path, component }) {
if (kebabTag.startsWith("core-")) {
return [
camelTag,
`import ${camelTag} from '#/components/core/${camelTag.substring(
4
)}.vue'`,
];
}
},
}),
],
}
Check your postcss.config.js, see if it has something to do with the purgecss.
You have to config the whitelist to ignore the vuetify styles.
Here is a sample for your reference:
const autoprefixer = require("autoprefixer");
const postcssImport = require("postcss-import");
const purgecss = require("#fullhuman/postcss-purgecss");
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
let plugins = [];
if (IS_PROD) {
plugins.push(postcssImport);
plugins.push(
purgecss({
content: [
"./src/**/*.vue",
"./public/**/*.html",
`./node_modules/vuetify/src/**/*.ts`,
`./node_modules/vuetify/dist/vuetify.css`
],
defaultExtractor (content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
},
safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
whitelist: [
'container',
'row',
'spacer',
'aos-animate',
'col',
'[type=button]',
'v-application p',
],
whitelistPatterns: [
/^v-.*/,
/^col-.*/,
/^theme-.*/,
/^rounded-.*/,
/^data-aos-.*/,
/^(red|grey)--text$/,
/^text--darken-[1-4]$/,
/^text--lighten-[1-4]$/
],
whitelistPatternsChildren: [
/^post-content/,
/^v-input/,
/^swiper-.*/,
/^pswp.*/,
/^v-text-field.*/,
/^v-progress-linear/
]
})
);
}
module.exports = {
plugins:[
require('cssnano')({
preset: 'default'
}),
require('postcss-pxtorem')({
remUnit:15, //每个rem对应的px值
threeVersion:true
}),
...plugins,autoprefixer
]
}``
You are simply missing an include in your main.js (see vuetify docs):
import 'vuetify/dist/vuetify.min.css'
This will ensure that webpack includes the vuetify styles in the bundled CSS for production. This fixed the same issue for me (i.e. it worked locally but not in production).
I'm trying to use firebase emulators on my Mac to run a simple NextJS hello world program. It's literally a hello world example. I'm forwarding all host requests to a function that I wrote, as bellow:
const { join } = require('path')
const { https } = require('firebase-functions')
const { default: next } = require('next')
const isDev = process.env.NODE_ENV !== 'production'
const nextjsDistDir = require('./next.config.js').distDir
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
},
})
const nextjsHandle = nextjsServer.getRequestHandler()
exports.nextjs = https.onRequest((req, res) => {
return nextjsServer.prepare().then(() => {
nextjsHandle(req, res)
})
})
And here is how my package.json file looks like:
{
"name": "firebase-boilerplate",
"main": "server.js",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"serve": "next build && firebase emulators:start --only functions,hosting --project 123"
},
"dependencies": {
"dotenv": "^8.2.0",
"firebase": "^8.2.3",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"next": "^10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"#types/node": "^14.14.21",
"#types/react": "^17.0.0",
"typescript": "^4.1.3"
}
}
and like I said, the page I'm trying to load is like this:
import Head from 'next/head';
// import {app} from '../services/firebase';
export default function Home() {
return (
<>Hello World </>
)
}
Now, when I run this on my mac with "nom run serve", emulators boot up ok, but the moment it try to access localhost:5000/index it keeps compiling and calling my "NextJS" function and eventually leads to timeout. Occasionally though, I do get the "Hello World" output, but only after so much computation, and only occasionally. What exactly is wrong? Is fb emulator not a reliable software or not working for Mac? OR I'm missing something?
Thanks
I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:
error - ./node_modules/#chakra-ui/portal/dist/esm/portal.js
Attempted import error: 'useCallbackRef' is not exported from '#chakra-ui/hooks'.
Here's my _app.js file:
import { ChakraProvider } from "#chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#chakra-ui/react": "^1.1.3",
"#emotion/react": "^11.1.4",
"#emotion/styled": "^11.0.0",
"framer-motion": "^3.2.0",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
I've had a rummage through the prescribed portal.js node module, but there doesn't look to be anything untoward.
Any help would be greatly appreciated, thanks for your time in advance.
Set version to #chakra-ui/react": "1.1.2",
It's a bug and they are working on a fix: https://github.com/chakra-ui/chakra-ui/issues/3006
For now just revert to a lower version until the fix is through.
Same problem here, get a older chakra-ui version.
For example: "#chakra-ui/react": "1.0.4"
I'm getting the following error when deploying to Vercel:
Module not found: Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences'
I don't use the dependency fs, my package.json file looks like:
{
"name": "single",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"mysql": "^2.18.1",
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"serverless-mysql": "^1.5.4",
"sql-template-strings": "^2.2.2"
}
}
I'm pretty new to NextJS, so I'm not really sure what's going on. Any ideas?
Edit:
For context, I'm getting data from mySQL in the app, not sure if that has anything to do with the error
export async function getStaticProps() {
const db = require('./lib/db')
const escape = require('sql-template-strings')
const articles = await db.query(escape`
SELECT *
FROM articles
ORDER BY pid
`)
const var1 = JSON.parse(JSON.stringify({ articles }))
return {
props: {
var1,
},
}
}
Solved it by creating a next.config.js file and adding the following to it:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
//config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
return config
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}
I had a similar problem whilst following the next.js tutorial. To resolve this I had to also create a next.config.js file as the above answer. However I have only added the following next configurations
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
Once I had added the above next.config.js file with the contents above I was able to successfully build the solution.
source: https://newspatrak.com/javascript/cant-build-react-next-project-found-page-without-a-react-component-as-default-export-context-api-file/
Next.js tutorial link: https://nextjs.org/learn/basics/deploying-nextjs-app/deploy