title: 'Cannot use import statement outside a module' followed by 'Uncaught TypeError: Failed to resolve module specifier'
body: <p>I am using a node server with express to use <a href="https://docs.portis.io/" rel="nofollow noreferrer">Portis SDK</a>. The project structure looks like this :</p>
  <pre><code>├── app.js (entry)
  ├── node_modules
  ├── package.json
  ├── package-lock.json
  ├── public (static files)
  │   └── portis.js
  └── views (templates and rendering)
      ├── home.html
      └── layouts
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;src&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;YYYYY&quot;,
    &quot;main&quot;: &quot;app.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;author&quot;: &quot;XXXXX&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;@portis/web3&quot;: &quot;^2.0.0-beta.59&quot;,
      &quot;body-parser&quot;: &quot;^1.19.0&quot;,
      &quot;cors&quot;: &quot;^2.8.5&quot;,
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;express-handlebars&quot;: &quot;^5.2.0&quot;,
      &quot;pm2&quot;: &quot;^4.5.0&quot;,
      &quot;web3&quot;: &quot;^1.3.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;7.2.0&quot;,
      &quot;@types/web3&quot;: &quot;1.0.18&quot;,
      &quot;parcel-bundler&quot;: &quot;^1.6.1&quot;,
      &quot;nodemon&quot;: &quot;^2.0.6&quot;
    }
  }
  </code></pre>
  <p>in one of my templates (<code>home.html</code>),</p>
  <pre><code>&lt;script src=&quot;/public/portis.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>and <code>portis.js</code> is the same as <a href="https://codesandbox.io/s/portis-login-logout-production-xbqj1?file=/src/index.js" rel="nofollow noreferrer">this CodeSandBox</a>.</p>
  <p>When that template is served, I am getting an error:</p>
  <pre><code>Uncaught SyntaxError: Cannot use import statement outside a module (portis.js:1)
  </code></pre>
  <p>from searching SO results to solve it, when I change <code>home.html</code> and adding module type to the script:</p>
  <pre><code>&lt;script type=&quot;module&quot; src=&quot;/public/portis.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>(while <code>type=&quot;module&quot;</code> is not used in codesanbox I copied from and it runs perfectly on that)</p>
  <p>but it results in another error:</p>
  <pre><code>Uncaught TypeError: Failed to resolve module specifier &quot;@portis/web3&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;.
  </code></pre>
  <p>(If I remove <code>import &quot;@portis/web3&quot;</code> then it gives the same error on the next import line)</p>
  <p>I have tried most of the relevant solutions which I found on SO but it doesn't seem to work</p>