This question already has an answer here:
SyntaxError: Unexpected token 'export' on NextJS auth integration
(1 answer)
Closed 11 months ago.
I am trying to code-along with a vercel guide: https://vercel.com/guides/nextjs-prisma-postgres. I am getting an error Unexpected token 'export' when trying to add adapter: PrismaAdapter(prisma) to [...nextauth].ts. Per the attached image - it seems to originate in the node_modules folder inside prisma_adapter.
image of error
[...nextauth].ts:
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import { PrismaAdapter } from "#next-auth/prisma-adapter";
import prisma from "../../../lib/prisma";
export default NextAuth({
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
adapter: PrismaAdapter(prisma),
secret: process.env.SECRET,
});
package.json:
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#next-auth/prisma-adapter": "^1.0.2",
"#prisma/client": "^3.11.0",
"next": "12.0.10",
"next-auth": "^4.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "8.0.0"
},
"devDependencies": {
"#types/node": "^17.0.14",
"#types/react": "17.0.38",
"prisma": "^3.11.0",
"ts-node": "^10.7.0",
"typescript": "^4.5.5"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/prisma.tsx"]
}
this is a bug in the latest #next-auth/prisma-adapter version, downgrading to 1.0.1 is the only workaround for the moment.
This issue is caused by a recent release of next-auth. The only option is to downgrade as of now as mentioned in this GitHub Issue.
Root cause of this was caused by changing the outputs to ESM.
Related
I'm developing a vue3 project with vite.
The HMR doesn't working fine in my dev enviroment.
When a vue file edited, vite handle the change and send a message thru websocket correctly
{"type":"update",
"updates":[{"type":"js-update","timestamp":1669740364450,"path":"/src/views/user/LoginView.vue","explicitImportRequired":false,"acceptedPath":"/src/views/user/LoginView.vue"}]}
but in the browser (I tried different ones) nothing happened.
Any solution?
my package.json
{
"name": "frontendq",
"private": true,
"version": "0.9.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#quasar/extras": "^1.15.5",
"axios": "^1.1.3",
"moment": "^2.29.4",
"quasar": "^2.10.2",
"vue": "^3.2.45",
"vue-i18n": "9",
"vue-recaptcha": "^2.0.3",
"vue-router": "^4.1.6",
"vue3-cookies": "^1.0.6",
"vuex": "^4.1.0"
},
"devDependencies": {
"#quasar/vite-plugin": "^1.2.3",
"#vitejs/plugin-vue": "^3.2.0",
"sass": "1.32.12",
"vite": "^3.2.4"
},
"packageManager": "yarn#3.2.4"
}
I've been dealing with this issue in a project with Vue 3, TypeScript and Vite 4. I added the next to my vite.config.ts to fix the hot reload:
server: {
watch: {
usePolling: true,
}
},
My entire vite.config.ts:
import {defineConfig} from "vite";
import vue from "#vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
watch: {
usePolling: true,
}
},
});
index.ts
import { Engine } from '#babylonjs/core/Engine/engine';
[tsl] ERROR in ~/Documents/babylon1/src/index.ts(1,24)
TS2307: Cannot find module '#babylonjs/core/Engines/engine'.
I've followed the steps on the Babylon documentation pages, and the troubleshooting notes at https://doc.babylonjs.com/features/npm_support#error-ts2307-cannot-find-module-babylonjs-or-other-modules. I've added "babylonjs" to tscong.json, but I'm still getting the "Cannot find module #babylonjs/core" error.
package.json
"devDependencies": {
"#babylonjs/core": "^4.0.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"babylonjs": "^4.0.3"
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"sourceMap": true,
"noImplicitAny": true,
"strictNullChecks": false,
"module": "es6",
"target": "es6",
"types": [
"babylonjs"
]
}
}
I did npm install just to make sure nothing is missing.
The following setup works. The #babylonjs/core/... imports resolve correctly, and webpack-dev-server builds and reloads automatically.
package.json
"devDependencies": {
"#babylonjs/core": "^4.0.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"module": "esNext",
"target": "es6",
"moduleResolution": "node"
}
}
NOTE: types: ["babylonjs"] doesn't seem to be necessary
webpack.config.js
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true
}
I've poured my time almost 4-5 hours to figure it out, but I couldn't have done with it... but fortunately, succeeded my Gatsby APP acknowledges the Google Analytics.
However, The problem occurs "No HTTP response Detected" from Google Tag Assistant Chrome Extension.
I've pasted the Google Analytics Snippets many times into HTML.js, Index.html and updated the latest version of GatsbyJs as well.
Additionally, I've tried to turn off my Adblock extension as well! but all failed...
URL
The error occurred blog
gatsby-config.js
module.exports = {
// Note: it must *not* have a trailing slash.
siteMetadata: {
title: 'SJ personal Blog',
siteUrl: `https://ollagada.github.io`
},
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "MY TRACKING ID",
// Puts tracking script in the head instead of the body
head: true,
// Setting this parameter is optional
anonymize: true,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ["/preview/**", "/do-not-track/me/too/"],
// Enables Google Optimize using your container Id
optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
// Any additional create only fields (optional)
sampleRate: 5,
siteSpeedSampleRate: 10,
},
},
{
resolve: `gatsby-plugin-gtag`,
options: {
// your google analytics tracking id
trackingId: `MY TRACKING ID`,
// Puts tracking script in the head instead of the body
head: true,
// enable ip anonymization
anonymize: true,
},
},
'gatsby-transformer-remark', {
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/pages/posts`
}
},
'gatsby-plugin-react-helmet', {
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/img/moi.jpg', // This path is relative to the root of the site.
}
},
]
Package.json
{
"name": "gatsby-starter-default",
"description": "Gatsby default starter",
"version": "1.0.0",
"author": "Kyle Mathews ",
"dependencies": {
"aos": "^2.3.4",
"child_process": "^1.0.2",
"fs": "0.0.1-security",
"gatsby": "^2.0.75",
"gatsby-plugin-google-analytics": "^2.0.8",
"gatsby-plugin-gtag": "^1.0.4",
"gatsby-plugin-manifest": "^2.0.2",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-sharp": "^2.0.5",
"gatsby-source-filesystem": "^2.0.1",
"gatsby-transformer-remark": "^2.1.17",
"gatsby-transformer-sharp": "^2.1.1",
"instafeed.js": "^1.4.1",
"net": "^1.0.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-instafeed": "^0.4.0",
"react-lines-ellipsis": "^0.13.2",
"react-mdl": "^1.11.0",
"react-spinkit": "^3.0.0",
"tls": "0.0.1",
"typed.js": "^2.0.9",
"window": "^4.2.5"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write '**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "gatsby build --prefix-paths && gh-pages -b master -d public"
},
"devDependencies": {
"gh-pages": "^2.0.0",
"prettier": "^1.14.2"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
}
}
Thank you! Lovely Day!
I am using Ionic 2:
Your system information:
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed
When I run ionic serve, I get the following error:
Typescript Error
Cannot find namespace 'firebase'.
...t/IDE/ionic-apps/theWhoZoo-chat/node_modules/angularfire2/database/database.d.ts
constructor(fbConfig: FirebaseAppConfig);
list(urlOrRef: string | firebase.database.Reference, opts?: FirebaseListFactoryOpts): FirebaseListObservable<any[]>;
object(urlOrRef: string | firebase.database.Reference, opts?: FirebaseObjectFactoryOpts): FirebaseObjectObservable<any>;
This is a new Ionic project created with ionic start ....
If anyone can suggest how I can resolve this, I would appreciate it.
I think it may be related to compatibles withing Ionic versions. The reason I say this, is because I am following this tutorial, and I guess he isn't using Ionic Framework Version: 2.0.0-rc.4. His example has an app.ts, where I split it into app.module.ts and app.component.ts as required by rc.4.
More info:
typings.json
{
"globalDependencies": {
"firebase3": "file:node_modules/angularfire2/firebase3.d.ts"
}
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"angularfire2": "^2.0.0-beta.3-0930330",
"firebase": "^3.3.0",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "theWhoZoo-chat: An Ionic project"
}
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FIREBASE_PROVIDERS, defaultFirebase, AngularFire, FirebaseAuth } from 'angularfire2';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
})]
})
export class AppModule { }
This seems to have resolved my issue.
Adding the following to app.component.ts:
import firebase from 'firebase'
...
firebase.initializeApp({
apiKey: "",
authDomain: "baseapp.com",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
});
I've created an ASP.NET 5 Empty Website project using Visual Studio 2015.
I setup a tsconfig.json file with the following:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "system",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
I've setup my package.json with the following:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8"
}
}
However, when I make this test page and try and compile I'm told the following:
Error TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.
Error TS2307 Cannot find module 'angular2/core'.
Error TS1148 Cannot compile modules unless the '--module' flag is provided.
Even though it is configured in my tsconfig.json. Any thoughts?
Anuraj led me to the answer, and the documentation as of the time I looked at it said to put it in the /scripts folder but that didn't work either.
Putting the tsconfig.json into the wwwroot folder worked. At least of the time of the versions I was using.