Backward slash in webmodules path on Windows

[nojaf]

When I upgraded to 2.7 my web_modules imports contain backwards slashes. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from "@reach/router";
import { Auth0Provider, withAuthenticationRequired } from "@auth0/auth0-react";
import { ToastContainer } from "react-toastify";
import AddLocationPage from "./bin/Pages/AddLocation";
import Settings from "./bin/Pages/Settings";

becomes:

import * as  __SNOWPACK_HMR__ from '/__snowpack__/hmr.js';
import.meta.hot = __SNOWPACK_HMR__.createHotContext(import.meta.url);
import __SNOWPACK_ENV__ from '/__snowpack__/env.js';
import.meta.env = __SNOWPACK_ENV__;

import React from '\web_modules\react.js';
import ReactDOM from '\web_modules\react-dom.js';
import { Router } from "\web_modules\@reach\router.js";
import { Auth0Provider, withAuthenticationRequired } from "\web_modules\@auth0\auth0-react.js";
import { ToastContainer } from "\web_modules\react-toastify.js";
import AddLocationPage from "./bin/Pages/AddLocation.js";
import Settings from "./bin/Pages/Settings.js";

My own files have forward slashes so that seems to be ok but the web_modules ones cannot be imported by the browser.

---

@snowpack/app-scripts-react: 1.8.1 snowpack: 2.7.2 Windows 10 NodeJs: 12.13.1

[nojaf]

The problem can be resolved by tweaking createImportResolver:

change:

// Windows fix: temporarily use backslashes until fully resolved (will be transformed to forward slashes later)
        if (path.sep === '\\') {
          resolved = resolved.replace(/\//g, '\\');
        }

to

if (path.sep === '\\') {
          resolved = resolved.replace(/\//g, '/');
}

[drwpow]

Hm. So we actually changed web_modules to be relative, so we do need that line to stay because Windows has trouble resolving web modules with POSIX-style forward slashes. But it looks like some config may be preventing those paths being transformed back into relative paths with forward slashes at the very end (you should be seeing something like import React from '../../web_modules/react.js').

Do you have an existing mount:web_modules script, or something similar in your config? I’m thinking we may not be handling that scenario correctly.

[nojaf]

No, I've scaffolded a brand new project two days ago. snowpack.config.js looks like:

{
  "extends": "@snowpack/app-scripts-react",
  "plugins": [],
  "installOptions": {
    "namedExports": [
      "react"
    ]
  }
}

[RyanGuild]

Same issue here, I have been trying to port an app as an experiment. module urls are created correctly but all / 's are \'s

Template: template react typescript Version: 2.7.5 Platform: windows 7 Node: v14

[meigo]

I can confirm that:

npx create-snowpack-app new-dir --template @snowpack/app-template-svelte

_dist_/App.js

import {
    SvelteComponentDev,
    add_location,
    ...
} from "\web_modules\svelte\internal.js";

Uncaught TypeError: Failed to resolve module specifier "web_modulessvelteinternal.js". Relative references must start with either "/", "./", or "../".

[Jiongzhi]

Same issue. Snowpack: 2.7.5 Windows 10

[drwpow]

We have an existing test that checks for this thing, and runs on Windows for Node versions 10, 12, and 14. It might be missing a code path, it seems.

I’d love some help looking at the test and seeing what we can add to catch/fix this bug!

[nojaf]

Not sure if this is helpful but not all tests build on my local Windows machine:

[RyanGuild]

Is there any reason we cant throw a any path to posix path regex on the last step.

I'd be happy to write the pull request if not. I want to try the package but this is a 100% blocker on windows

[drwpow]

Not sure if this is helpful but not all tests build on my local Windows machine:

Thanks for letting me know! For some strange reason GitHub Actions was not failing. I am starting not to trust its Windows image 😅. That should be fixed in master

[drwpow]

Is there any reason we cant throw a any path to posix path regex on the last step.

Yes that is exactly what is supposed to happen. We do that in some places, but it seems that there is one code path where that isn’t happening. If you can find it, would love a PR!

[oliverne]

I have a same problem on Windows. I created my project using Snowpack 2.7.5 with @snowpack/app-template-blank template.

[meigo]

As a temporary workaround I'm running Code inside WSL2

[drwpow]

snowpack@2.7.6 was just released. It looks like this issue was closed automatically from the PR. But please give this a try and let us know if that solves the problem.

[nojaf]

I can confirm that 2.7.6 solves my problem. Many thanks for this fix.