Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Dynamic imports in modules fail under certain conditions. #3094

Open
4 tasks done
WilsontheWolf opened this issue Apr 5, 2021 · 3 comments
Open
4 tasks done

Comments

@WilsontheWolf
Copy link

WilsontheWolf commented Apr 5, 2021

Bug Report Quick Checklist

  • I am on the latest version of Snowpack & all plugins.
  • I use package manager yarn
  • I run Snowpack on OS Linux (Ubuntu 20.04.2 LTS)
  • I run Snowpack on Node.js v12+ v14.10.1

Describe the bug

When a module dynamically imports a file relative to itself it fails. This is due to the fact that all modules are stored in one dir.
I'm using a module that lazy loads its components. As such it dynamically imports them as a relative import.
The script importing is @skyra/discord-components-react/dist/index.js. Snowpack loads this as @skyra.discord-components-react.dist.index.es.v2.0.3-alpha.0.js. However, when it imports the module it does ./module which normally is @skyra/discord-components-react/dist/module. However, due to the way snowpack loads, it is not in its sub-dir. As such ./module resolves to snowpack pkg dir instead of the @skyra/discord-components-react/dist/. The solution to this would be to allow snowpack to load it in the traditional module sense. Would this be an option to load my module with the dir structure it will?

To Reproduce

We can't fix bugs that we can't see for ourselves. Issues often need to be closed if this section is skipped.

I set up a minimal repo if you just want to clone that https://github.com/WilsontheWolf/import-bug

  1. Create a project (I used) yarn create snowpack-app import-bug --template @snowpack/app-template-react --use-yarn
  2. Add the modules giving you issues (in my case @skyra/discord-components-core @skyra/discord-components-react Alpha builds) yarn add @skyra/discord-components-core@alpha @skyra/discord-components-react@alpha
  3. Edit the app.js to add the import and use it
import React from 'react';
import {
    DiscordMessage,
    DiscordMessages
} from '@skyra/discord-components-react';

function App() {
    return (
        <DiscordMessages>
            <DiscordMessage>
                Test
            </DiscordMessage>
        </DiscordMessages>
    );
}

export default App;
  1. See error!

Expected behaviour

It should import properly

Anything else?

Related to my discussion #2927.

The repo for the module is https://github.com/skyra-project/discord-components if you need it.

@vivianeasley
Copy link

I believe I'm having the same issue. Recently upgraded to snowpack 3.3.0 and use-sound stopped working. The use-sound module tries to lazy load howler and I get this issue when I yarn start:
Cannot find module ''howler'' from /frontend/app/node_modules/use-sound/dist/use-sound.esm.js

This was working fine until the upgrade from 3.1.0, which I had to move away from because I was having issues with this bug:
#2948

@mklasinc
Copy link

mklasinc commented Jun 7, 2021

I believe I'm having the same issue. Recently upgraded to snowpack 3.3.0 and use-sound stopped working. The use-sound module tries to lazy load howler and I get this issue when I yarn start:
Cannot find module ''howler'' from /frontend/app/node_modules/use-sound/dist/use-sound.esm.js

This was working fine until the upgrade from 3.1.0, which I had to move away from because I was having issues with this bug:
#2948

I'm having the same issue, I believe this is quite an urgent bug since it completely breaks dev/prod builds.

@eudinnou
Copy link

Think this bug is similar: #3370

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants