Unable to create storefront on Windows

[clemheld]

Bug report

I am using Windows 10 and I have tried to install / run react-storefront using several methods. All have failed me.

Describe the bug

1. I used standard windows NodeJS v12.18, NPM v6.14.4. and I ran the commands from the docs:

npm create react-storefront@^8.014.0 my-m2-app
cd my-m2-app
npm install react-storefront-magento2-connector

Thereafter I edited a .env file + edited the next.js.config file as suggested.

Thereafter I run npm start.

When I run npm start I am presented with the following error:

[nodemon] starting "node server.js"
(node:37) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
Defining routes from exportPathMap
> Using connector react-storefront/mock-connector
info  - Using external babel configuration from /app/reactstorefront/.babelrc.js
(node:37) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at /usr/local/lib/node_modules/webpack/lib/util/comparators.js:40:7
    at /usr/local/lib/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:75:37
    at SyncBailHook.eval [as call] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47168:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.seal (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55259:30)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56934:18
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55185:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.finish (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55177:28)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56931:17
    at eval (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:9:1)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:60005:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:37) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:37) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:37) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at /usr/local/lib/node_modules/webpack/lib/util/comparators.js:40:7
    at /usr/local/lib/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:75:37
    at SyncBailHook.eval [as call] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47168:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.seal (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55259:30)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56934:18
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55185:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.finish (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55177:28)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56931:17
    at eval (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:9:1)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:60005:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:37) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)

To Reproduce

Use Windows 10 with nodejs v12 installed.

So, I went and tried to create a docker image to see if I can't just run it that way. Same issue occurs.

create a Dockerfile.

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

RUN npm create react-storefront@latest --yes reactstorefront

# go into dir
WORKDIR /app/reactstorefront

RUN npm link webpack

RUN npm run dev

run these command:

docker build -t reactstorefront:latest .
docker run -p 3000:3000 reactstorefront:latest

Expected behavior

The site is supposed to start on localhost:3000 .

Screenshots

System information

• OS: Windows
• Version of React Storefront: Latest

Additional context

[clemheld]

I changed to the mock-connector in my tests + screenshots to see if I can just get it up and running.

[predosoares]

I had the same issue in Linux. Later I will trie to remove typescript of the project to see if the project keeps this type error.

I got this with the latest version and with version 8.0.0

[AlexNima]

I'm getting the exact same issue. I'm using Mac OS Big Sur 11.2 Node.js v14.15.4 Using react-storefront v8.17.4

It happens after installing webpack because it is not found.

[clemheld]

I'm getting the exact same issue. I'm using Mac OS Big Sur 11.2 Node.js v14.15.4 Using react-storefront v8.17.4

It happens after installing webpack because it is not found.

@AlexNima To resolve that issue, simply run this in the project root

npm link webpack

[AlexNima]

I'm getting the exact same issue. I'm using Mac OS Big Sur 11.2 Node.js v14.15.4 Using react-storefront v8.17.4 It happens after installing webpack because it is not found.

@AlexNima To resolve that issue, simply run this in the project root

npm link webpack

Yes! I know, I was just trying to add more detail about this issue. The app as is, does not have webpack in the dependencies so we need to install/link it. After that we get the error you mention on your first post. :)

[howdiz]

I get the same issue. npm link webpack does not resolve it

[chris--jones]

You might be using webpack 5? This seems to only work with webpack 4, I was able to get past webpack errors by installing webpack4 in the solution directory, although I don't have any version of webpack or the cli installed globally.

npm i [email protected]

[AlexNima]

You might be using webpack 5? This seems to only work with webpack 4, I was able to get past webpack errors by installing webpack4 in the solution directory, although I don't have any version of webpack or the cli installed globally.

npm i [email protected]

Confirmed, I just installed webpack 4.46.0 and I was able to run the project, thanks!