next-js starter throw error: SyntaxError: Unexpected token 'export'

[happyeric77]

Hello team, I am trying to build application through wallet-adapter. And firstly I cloned the starter example (https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/example) and had a try.

And it throw following error:

error - /Users/macbookpro4eric/Projects/blockchain/project39/node_modules/@solana/wallet-adapter-ant-design/lib/index.js:1
export * from './useWalletModal';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@solana/wallet-adapter-ant-design (/Users/macbookpro4eric/Projects/blockchain/project39/.next/server/pages/index.js:102:18)
    at __webpack_require__ (/Users/macbookpro4eric/Projects/blockchain/project39/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

And then I also ran npm run dev to check it on localhost test server and it shows following error:

I really just do following steps only:

1. clone the repository
2. npm install
3. npm run dev It will be very appreciated if anybody can give me a hint of where did I do wrong.

Please see my environment below:

1. I tried the following three node versions: v16.11.0 | v14.18.0 | v12
2. OS: MacOS 11.3.1
3. typescript version: 4.4.3
4. Others are exactly the same as https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/example

[jordaaash]

I really just do following steps only:

1. clone the repository

2. npm install

3. npm run dev
   It will be very appreciated if anybody can give me a hint of where did I do wrong.

It looks like you're missing the yarn build step described here: https://github.com/solana-labs/wallet-adapter#build-from-source

To run the example, or any of the starter projects, you want to clone the repo, run yarn install and yarn build from the base directory of the project, then run yarn start or yarn dev in the directory of the starter project you want to run.

Please comment and/or close the issue if this fixes it for you :)

[happyeric77]

@jordansexton Thanks for the reply. I tried again with yarn (version 1.22.17) with the following steps:

1. yarn install
2. yarn build
3. yarn dev It is still not working for me, unfortunately. the error below is thrown after I do "yarn build":

   
   (base) macbookpro4eric@Erics-MacBook-Pro project39 % yarn build
   yarn run v1.22.17
   $ yarn clean && next build && next export
   $ shx rm -rf .next out
   info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
   info  - Checking validity of types  
   info  - Using external babel configuration from /Users/macbookpro4eric/Projects/blockchain/project39/.babelrc.js
   info  - Creating an optimized production build  
   info  - Compiled successfully

Build error occurred /Users/macbookpro4eric/Projects/blockchain/project39/node_modules/@solana/wallet-adapter-ant-design/lib/index.js:1 export * from './useWalletModal'; ^^^^^^

SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:1001:16) at Module._compile (internal/modules/cjs/loader.js:1049:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:93:18) at Object.441 (/Users/macbookpro4eric/Projects/blockchain/project39/.next/server/pages/index.js:58:51) at webpack_require (/Users/macbookpro4eric/Projects/blockchain/project39/.next/server/webpack-runtime.js:25:42) at webpack_exec (/Users/macbookpro4eric/Projects/blockchain/project39/.next/server/pages/index.js:431:39) { type: 'SyntaxError' } error Command failed with exit code 1.

Could you give me a hint am I again missing anything?

[jordaaash]

Based on the output, it looks like you're running yarn build from a directory containing a Next.js project: yarn clean && next build && next export

Please follow https://github.com/solana-labs/wallet-adapter#build-from-source exactly.

The instructions are for building from the source. The commands must be executed from the base directory of this repository when cloned, not from your project's directory or the example package directory.

After you follow the instructions on building from source (which will build all of the packages), you then want to do this:

cd packages/starter/example

yarn dev

This will run the example project, but it depends on first having built all the other packages.

[happyeric77]

@jordansexton Thanks for the explanation. I have managed to get it work. Might I ask one more question? If I have an existing nextjs project to which I would like to adapt this library, does it mean it is neccessory do the same processes as below:

1. git clone https://github.com/solana-labs/wallet-adapter.git
2. yarn install
3. yarn build
4. Migrate my existing project into ./wallet-adapter/packages/starter/myProject
5. Get into the project folder and "yarn install"
6. yarn run dev

[jordaaash]

No, you don't need to do all that. You can just look at the example and nextjs-starter projects to see what you need to add to your existing project. Most of what you need will be installing the right things in your package.json, setting up your next.config.js file, and setting up the contexts globally as is done here: https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/nextjs-starter/package.json

[happyeric77]

You can just look at the example and nextjs-starter projects to see what you need to add to your existing project

Thanks @jordansexton , That behavior you mentioned what I expected, so I supposed that would have worked just by simply cloning all content in the "nextjs-starter" folder and run "yarn install" and "yarn dev". But it turned out throwing the error that I mentioned at the beginning of this thread. Then it is mentioned on your comment as below:

The instructions are for building from the source. The commands must be executed from the base directory of this repository when cloned ...

That is why I think I do need to build the source every time and create my nextjs project on top of it. Do I get the wrong idea?

[jordaaash]

There isn't anything special about the configuration of the starter projects. If you configure your project the same way, it will work. That's all the help I can provide on this. Good luck!

[piscespieces]

I have followed the docs twice, and I keep getting this same issue. Any updates on this?

I have not cloned this repo and build from source. Created a brand new nextjs typescript repo locally and manually installed the libs

[ju5td0m7m1nd]

@piscespieces

You need to use the transpile module in next.config.js. I ran into the same issue as you, and resolve by updating the configuration in next.config.js

See the example here https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/nextjs-starter/next.config.js

[piscespieces]

Thanks @ju5td0m7m1nd for pointing me in the right direction. I was able to bootstrap a next-app from scratch and install wallet-adapter without the need to clone this repo. I'll post here my package.json + next.config.js files as a reference for future devs encountering issues with this:

package.json dependencies:

 "dependencies": {
    "@solana/wallet-adapter-base": "^0.7.0",
    "@solana/wallet-adapter-react": "^0.13.0",
    "@solana/wallet-adapter-react-ui": "^0.6.0",
    "@solana/wallet-adapter-wallets": "^0.11.0",
    "@solana/web3.js": "^1.20.0",
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.24",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2",
    "next-transpile-modules": "^8.0.0",
    "shx": "^0.3.3",
    "typescript": "^4.4.3"
  }

next.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const withTM = require('next-transpile-modules')([
  '@blocto/sdk',
  '@project-serum/sol-wallet-adapter',
  // '@solana/wallet-adapter-angular',
  '@solana/wallet-adapter-base',
  '@solana/wallet-adapter-react',
  '@solana/wallet-adapter-wallets',
  // '@solana/wallet-adapter-ant-design',
  // '@solana/wallet-adapter-material-ui',
  '@solana/wallet-adapter-react-ui',
  '@solana/wallet-adapter-bitkeep',
  '@solana/wallet-adapter-bitpie',
  '@solana/wallet-adapter-blocto',
  '@solana/wallet-adapter-clover',
  '@solana/wallet-adapter-coin98',
  "@solana/wallet-adapter-coinhub",
  '@solana/wallet-adapter-ledger',
  '@solana/wallet-adapter-mathwallet',
  '@solana/wallet-adapter-phantom',
  '@solana/wallet-adapter-safepal',
  '@solana/wallet-adapter-slope',
  '@solana/wallet-adapter-solflare',
  '@solana/wallet-adapter-sollet',
  '@solana/wallet-adapter-solong',
  '@solana/wallet-adapter-torus',
  // '@solana/wallet-adapter-walletconnect',
]);

/** @type {import('next').NextConfig} */
module.exports = withTM({
  reactStrictMode: true,
  webpack5: true,
});

As you can see I commented out some deps in the next.config.js that I wasn't in need of and were causing problems when bootstraping the project.

[AnderUstarroz]

Same problem here, why do even need to run yarn build to develop the app? yarn build is for building a production version, this doesn't seem right.

[yenicelik]

any further progress on this? xD

[yenicelik]

I am getting a bunch of Module not found: Can't resolve 'fs' in '/Users/davidal/solbond/dapp/node_modules/@project-serum/anchor/dist/esm'