'Cannot use import statement outside a module' followed by 'Uncaught TypeError: Failed to resolve module specifier'

Question

I am using a node server with express to use Portis SDK. The project structure looks like this :

├── app.js (entry) ├── node_modules ├── package.json ├── package-lock.json ├── public (static files) │   └── portis.js └── views (templates and rendering) ├── home.html └── layouts

package.json

{ "name": "src", "version": "1.0.0", "description": "YYYYY", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "XXXXX", "license": "ISC", "dependencies": { "@portis/web3": "^2.0.0-beta.59", "body-parser": "^1.19.0", "cors": "^2.8.5", "express": "^4.17.1", "express-handlebars": "^5.2.0", "pm2": "^4.5.0", "web3": "^1.3.0" }, "devDependencies": { "@babel/core": "7.2.0", "@types/web3": "1.0.18", "parcel-bundler": "^1.6.1", "nodemon": "^2.0.6" } }

in one of my templates (home.html),

<script src="/public/portis.js"></script>

and portis.js is the same as this CodeSandBox.

When that template is served, I am getting an error:

Uncaught SyntaxError: Cannot use import statement outside a module (portis.js:1)

from searching SO results to solve it, when I change home.html and adding module type to the script:

<script type="module" src="/public/portis.js"></script>

(while type="module" is not used in codesanbox I copied from and it runs perfectly on that)

but it results in another error:

Uncaught TypeError: Failed to resolve module specifier "@portis/web3". Relative references must start with either "/", "./", or "../".

(If I remove import "@portis/web3" then it gives the same error on the next import line)

I have tried most of the relevant solutions which I found on SO but it doesn't seem to work

Try putting ... type="text/javascript" in your script tag

Amaarockz
– Amaarockz

2020-11-26 22:23:41 +00:00
Commented Nov 26, 2020 at 22:23 — Amaarockz
– Amaarockz, Commented Nov 26, 2020 at 22:23

Guerric P · Accepted Answer · 2020-11-26 22:25:04Z

1

Check that portis.js is packaged as ESM (contains export clauses), then use import Portis from './public/portis.js';

answered Nov 26, 2020 at 22:25

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

hack3r-0m Over a year ago

can you elaborate on how to check if it's packaged as ESM?it works with node on that sandbox and I am trying to replicate it

Guerric P Over a year ago

Just check if there are export clauses inside, and that it doesn't import anything. By the way the sandbox you are referring to is a frontend that has a build process with ParcelJS (and you dont seem to have one)

hack3r-0m Over a year ago

I am trying to use that index.js(as portis.js) in my template, yeah I have not implemented ParcelJS, is there any way I could you that source code logic without ParcelJS?

Guerric P Over a year ago

It's not advised at all. I presume you are trying to use a file that has imports? You should use a build process in order to create a bundle with portis and all of its dependencies. Bundling tools also feature very interesting things like tree-shaking and minification. As an alternative, don't use ES modules, and add the UMD packaged file to your web app (it creates a global Portis object)

Guerric P Over a year ago

Indeed, that works in Node.js, or in browser applications built with Node.js, but not directly in the browser.

|

Parikshith Kedilaya M · Accepted Answer · 2020-11-26 22:21:59Z

1

Replace your import statements with

const Portis = require("@portis/web3"); const Web3 = require("web3");

answered Nov 26, 2020 at 22:21

Parikshith Kedilaya M

2311 silver badge8 bronze badges

1 Comment

hack3r-0m Over a year ago

Uncaught ReferenceError: require is not defined at portis.js:3 (anonymous) @ portis.js:3

Collectives™ on Stack Overflow

'Cannot use import statement outside a module' followed by 'Uncaught TypeError: Failed to resolve module specifier'

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related