Snowpack cannot import JavaScript from node_modules

Question

Snowpack cannot import JavaScript from node_modules

722 views Asked by x80486 At 13 September 2024 at 22:16

I'm currently using Snowpack to build/prepare an application. I'm trying to import a JavaScript library I installed as part of the dependencies (block) in the package.json file, but somehow Snowpack is not picking up the library.

This is (an excerpt with the relevant content of) the package.json file:

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "snowpack build",
    "preview": "snowpack dev"
  },
  "dependencies": {
    "impress.js": "1.1.0"
  },
  "devDependencies": {
    "snowpack": "3.3.7"
  },
  "engines": {
    "node": "14.x"
  }
}

The snowpack.config.js only contains these lines:

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  devOptions: {
    open: "none",
  },
  mount: {
    src: {
      url: "/",
    },
  },
};

I was expecting Snowpack to bundle the impress.js library with this HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script src="node_modules/impress.js/js/impress.min.js"></script>
    <script src="scripts/global.js" type="module"></script>
  </body>
</html>

Is there a way to configure Snowpack for such things?

Original Q&A

There are 2 answers

Aaron A. On 11 May 2021 at 19:41

If you simply want to convert the Impress module to ESM have you considered trying esinstall?

i.e.

convert.mjs:

import {install} from 'esinstall';
await install(['impress.js'], {});

node convert.mjs

and then in your HTML file:

 <script src="web_modules/impress.js"></script>

**x80486** · Accepted Answer · 2021-05-11 21:19:42

In case somebody come across something similar to this, the way I found to bundle Impress.js (and probably any other library that has/hasn't been modularized) is to just import it in the JavaScript file (notice the type="module" in the HTML script tag):

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script src="scripts/global.js" type="module"></script>
  </body>
</html>

import "impress.js";

impress(); // ...bootstraps/initializes Impress.js

TechQA.

Snowpack cannot import JavaScript from node_modules

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in IMPRESS.JS

Related Questions in SNOWPACK

Popular Questions

Popular Tags

Trending Questions