Import statement outside a module error

[Matheus Nobre]

SDK version: 0.1.0

Environment:

• OS (e.g. from /etc/os-release):
• Install tools: pnpm
• Others:

What happened:
When you use the package in a NextJS project and try to build it. You receive this error:

What you expected to happen:

Have you tried the latest version: yes

How to reproduce it (as minimally and precisely as possible):
Just try to build a project with this package

Logs (paste a small part showing an error (< 10 lines) or link a pastebin, gist, etc. containing more of the log file):
@bnb-chain+greenfield-chain-sdk@0.1.0/node_modules/@bnb-chain/greenfield-chain-sdk/dist/esm/index.js:1
import { createProtobufRpcClient, QueryClient, setupAuthExtension, setupAuthzExtension, setupBankExtension, setupDistributionExtension, setupFeegrantExtension, setupGovExtension, setupIbcExtension, setupMintExtension, setupSlashingExtension, setupStakingExtension, setupTxExtension, StargateClient } from '@cosmjs/stargate';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1049:15)
at Module._compile (node:internal/modules/cjs/loader:1084:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1022:19)
at require (node:internal/modules/cjs/helpers:102:18)
at 2663 (/home/ccr5/Documentos/GITs/zero2hero-bnb-hackathon/.next/server/pages/new/book.js:3093:18)
at webpack_require (/home/ccr5/Documentos/GITs/zero2hero-bnb-hackathon/.next/server/webpack-runtime.js:25:42)

Build error occurred
Error: Failed to collect page data for /new/book
at /home/ccr5/Documentos/GITs/zero2hero-bnb-hackathon/node_modules/.pnpm/next@13.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/utils.js:1150:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'

Config (you can paste only the changes you've made):

node command runtime flags:

Anything else we need to know:

[Deepanshu Gupta]

Hi there, Can you share your package.json file as well. It seems like you're missing type: "module" setting in package.json to enable imports functionality.
Please set type: "module" property in package.json and see if it works.

P.S: You can refer to this thread also once: https://stackoverflow.com/a/60225870

[Matheus Nobre]

This is my package.json

{
"name": "zero2hero",
"version": "0.1.0",
"private": true,
"license": "GPLv3",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@alch/alchemy-web3": "^1.4.6",
"@aws-sdk/client-dynamodb": "^3.316.0",
"@aws-sdk/lib-dynamodb": "^3.316.0",
"@aws-sdk/util-dynamodb": "^3.328.0",
"@bnb-chain/greenfield-chain-sdk": "^0.1.0",
"@bnb-chain/greenfield-cosmos-types": "^0.4.0",
"@cosmjs/encoding": "^0.30.1",
"@cosmjs/proto-signing": "^0.30.1",
"@cosmjs/stargate": "^0.30.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@ethersproject/signing-key": "^5.7.0",
"@metamask/eth-sig-util": "^5.1.0",
"@mui/icons-material": "^5.10.6",
"@mui/material": "^5.10.7",
"@types/react-modal": "^3.13.1",
"@types/three": "^0.141.0",
"@web3modal/ethereum": "^2.3.6",
"@web3modal/react": "^2.3.6",
"ethers": "^5.6.5",
"next": "13.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-player": "^2.12.0",
"sharp": "^0.32.1",
"tailwindcss": "^3.0.24",
"three": "^0.141.0",
"wagmi": "^0.12.13",
"web3modal": "^1.9.9"
},
"devDependencies": {
"@types/node": "17.0.25",
"@types/react": "18.0.6",
"@types/react-dom": "18.0.2",
"autoprefixer": "^10.4.7",
"eslint": "8.13.0",
"eslint-config-next": "12.1.5",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.13",
"typescript": "^5.0.0"
}
}

[Matheus Nobre]

This is my tsconfig:

{
"compilerOptions": {
"target": "ES6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/database/": ["src/data/database/"],
"@/jsonRpcProvider/": ["src/data/jsonRpcProvider/"],
"@/components/": ["src/ui/components/"],
"@/hooks/": ["src/ui/hooks/"],
"@/public/": ["src/ui/public/"],
"@/styles/": ["src/ui/styles/"],
"@/test/": ["src/ui/test/"],
"@/utils/": ["src/ui/utils/"],
"@/adapters/": ["src/ux/adapters/"],
"@/entities/": ["src/ux/entities/"],
"@/shared/": ["src/ux/shared/"],
"@/usecases/": ["src/ux/usecases/"],
}
},
"include": [
"next-env.d.ts",
"/*.ts",
"/*.tsx"
],
"exclude": ["node_modules"],
}

[Venus]

Hi there, Can you share your package.json file as well. It seems like you're missing type: "module" setting in package.json to enable imports functionality. Please set type: "module" property in package.json and see if it works.

P.S: You can refer to this thread also once: https://stackoverflow.com/a/60225870

This doesn't work for me. I ran example project with self build package and it worked.
But it always failed to import the greenfield-js-sdk from npm-repository.

[Venus]

This is my package.json

{ "name": "zero2hero", "version": "0.1.0", "private": true, "license": "GPLv3", "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@alch/alchemy-web3": "^1.4.6", "@aws-sdk/client-dynamodb": "^3.316.0", "@aws-sdk/lib-dynamodb": "^3.316.0", "@aws-sdk/util-dynamodb": "^3.328.0", "@bnb-chain/greenfield-chain-sdk": "^0.1.0", "@bnb-chain/greenfield-cosmos-types": "^0.4.0", "@cosmjs/encoding": "^0.30.1", "@cosmjs/proto-signing": "^0.30.1", "@cosmjs/stargate": "^0.30.1", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@ethersproject/signing-key": "^5.7.0", "@metamask/eth-sig-util": "^5.1.0", "@mui/icons-material": "^5.10.6", "@mui/material": "^5.10.7", "@types/react-modal": "^3.13.1", "@types/three": "^0.141.0", "@web3modal/ethereum": "^2.3.6", "@web3modal/react": "^2.3.6", "ethers": "^5.6.5", "next": "13.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-modal": "^3.16.1", "react-player": "^2.12.0", "sharp": "^0.32.1", "tailwindcss": "^3.0.24", "three": "^0.141.0", "wagmi": "^0.12.13", "web3modal": "^1.9.9" }, "devDependencies": { "@types/node": "17.0.25", "@types/react": "18.0.6", "@types/react-dom": "18.0.2", "autoprefixer": "^10.4.7", "eslint": "8.13.0", "eslint-config-next": "12.1.5", "eslint-plugin-react-hooks": "^4.6.0", "postcss": "^8.4.13", "typescript": "^5.0.0" } }

I solved this by using next-transpile-module(for next.js)

/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")(["@bnb-chain/greenfield-chain-sdk"]);
const nextConfig = withTM({
  reactStrictMode: false
});

module.exports = nextConfig

And for next.js version >= 13, try:

/** @type {import('next').NextConfig} */
const nextConfig ={
  reactStrictMode: false,
  transpilePackages: ["@bnb-chain/greenfield-chain-sdk"]
};

module.exports = nextConfig

Hope this helps you.

[Matheus Nobre]

This is my package.json
{ "name": "zero2hero", "version": "0.1.0", "private": true, "license": "GPLv3", "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@alch/alchemy-web3": "^1.4.6", "@aws-sdk/client-dynamodb": "^3.316.0", "@aws-sdk/lib-dynamodb": "^3.316.0", "@aws-sdk/util-dynamodb": "^3.328.0", "@bnb-chain/greenfield-chain-sdk": "^0.1.0", "@bnb-chain/greenfield-cosmos-types": "^0.4.0", "@cosmjs/encoding": "^0.30.1", "@cosmjs/proto-signing": "^0.30.1", "@cosmjs/stargate": "^0.30.1", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@ethersproject/signing-key": "^5.7.0", "@metamask/eth-sig-util": "^5.1.0", "@mui/icons-material": "^5.10.6", "@mui/material": "^5.10.7", "@types/react-modal": "^3.13.1", "@types/three": "^0.141.0", "@web3modal/ethereum": "^2.3.6", "@web3modal/react": "^2.3.6", "ethers": "^5.6.5", "next": "13.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-modal": "^3.16.1", "react-player": "^2.12.0", "sharp": "^0.32.1", "tailwindcss": "^3.0.24", "three": "^0.141.0", "wagmi": "^0.12.13", "web3modal": "^1.9.9" }, "devDependencies": { "@types/node": "17.0.25", "@types/react": "18.0.6", "@types/react-dom": "18.0.2", "autoprefixer": "^10.4.7", "eslint": "8.13.0", "eslint-config-next": "12.1.5", "eslint-plugin-react-hooks": "^4.6.0", "postcss": "^8.4.13", "typescript": "^5.0.0" } }

I solved this by using next-transpile-module(for next.js)

/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")(["@bnb-chain/greenfield-chain-sdk"]);
const nextConfig = withTM({
  reactStrictMode: false
});

module.exports = nextConfig

And for next.js version >= 13, try:

/** @type {import('next').NextConfig} */
const nextConfig ={
  reactStrictMode: false,
  transpilePackages: ["@bnb-chain/greenfield-chain-sdk"]
};

module.exports = nextConfig

Hope this helps you.

It works to me too. Thank you @CodeAunt .