Having trouble importing script

[jskrt]

I'm trying to use frosted-glass in a project I am working on but I am having trouble loading the script. I am using GatsbyJS to set up my project and loading the script through React Helmet in my index.js file. I installed the frosted-glass package as described in the README. It is sitting in node_modules but somehow I am running into this error:

GET http://localhost:8000/node_modules/frosted-glass/dist/frostedglass.js 404 (Not Found)

Here is what my React Helmet code looks like:

const Layout = ({ children, data }) => (
  <div>
    <Helmet>
      <title>{data.site.siteMetadata.title}</title>
      <meta name='description' content='Sample'/>
      <meta name='keywords' content='sample, something' />
      <meta name='viewport' content='width=device-width, initial-scale=1'/>
      <script src="/node_modules/frosted-glass/dist/frostedglass.js" type="text/javascript" />
    </Helmet>
    <div>
      {children()}
    </div>
  </div>
)

If I just write src="node_modules/frosted-glass/dist/frostedglass.js", it still gives me the same error but this time, looks inside http://localhost:8000/about/ or whatever the current page is.

I tried to use require as well, removing the script tag in React Helmet:

const FrostedGlass = require('frosted-glass/dist/frostedglass.js');

but I get the following error:

GET http://localhost:8000/frostedglass/frostedglass.pxrm46tt.js 404 (Not Found)

I'm not sure if this is happening because of Gatsby or not. Any ideas?

[libertyswift]

Yes, I have the same error when connecting script via webpack import 'frosted-glass'
This works only if you connect a script via <script src='https://unpkg.com/frosted-glass/dist/frostedglass.js'></script>

[jskrt]

It's still not finding the resource. I went to the example CodePen and forked it and it isn't finding the resource in the forked pen either.

[jskrt]

@adriancarriger any ideas?

[adriancarriger]

Hi @jskrt, it sounds like you may be using Webpack. If so, you'd probably like the NPM module @stencil/webpack (here's a quick tutorial).

Another quick option would be to add the import script directly to your index.html like this.

Let me know how it goes 👍