npm run build errors

[mbrzuzy]

This issue is for the following packages:

[ x ] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-devdocs
[ ] upward-js
[ ] upward-spec

This issue is a:

[ x ] Bug
[ ] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version	2.3.0
Operating System + version	Windows 10
node.js version (node -v)	10.14.1
npm version (npm -v)	6.4.1

Description

Following Venia Storefront setup guide using git bash on windows 10. npm run build fails with errors:

ERROR in ../peregrine/src/Page/Page.js 10:12
Module parse failed: Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
|
|         return (
>             <RouteConsumer>
|                 {context => <MagentoRouteHandler {...props} {...context} />}
|             </RouteConsumer>
 @ ../peregrine/src/Page/index.js 1:0-33 1:0-33
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/Router/MagentoRouteHandler.js 12:21
Module parse failed: Unexpected token (12:21)
You may need an appropriate loader to handle this file type.
|
| export default class MagentoRouteHandler extends Component {
>     static propTypes = {
|         apiBase: string.isRequired,
|         children: func,
 @ ../peregrine/src/Router/index.js 1:0-71 1:0-71
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/util/simplePersistence.js 25:15
Module parse failed: Unexpected token (25:15)
You may need an appropriate loader to handle this file type.
|
| export default class BrowserPersistence {
>     static KEY = 'M2_VENIA_BROWSER_PERSISTENCE';
|     constructor() {
|         this.storage = new NamespacedLocalStorage(
 @ ../peregrine/src/util/index.js 1:0-68 1:0-68
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/List/items.js 39:21
Module parse failed: Unexpected token (39:21)
You may need an appropriate loader to handle this file type.
|
| class Items extends Component {
>     static propTypes = {
|         getItemKey: PropTypes.func.isRequired,
|         items: iterable.isRequired,
 @ ../peregrine/src/List/index.js 2:0-43 2:0-43
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/ContainerChild/ContainerChild.js 5:21
Module parse failed: Unexpected token (5:21)
You may need an appropriate loader to handle this file type.
|
| export default class ContainerChild extends Component {
>     static propTypes = {
|         id: string.isRequired,
|         render: func.isRequired
 @ ../peregrine/src/ContainerChild/index.js 1:0-43 1:0-43
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/Price/Price.js 6:21
Module parse failed: Unexpected token (6:21)
You may need an appropriate loader to handle this file type.
|
| export default class Price extends PureComponent {
>     static propTypes = {
|         value: number.isRequired,
|         currencyCode: string.isRequired,
 @ ../peregrine/src/Price/index.js 1:0-34 1:0-34
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/List/item.js 7:21
Module parse failed: Unexpected token (7:21)
You may need an appropriate loader to handle this file type.
|
| class Item extends Component {
>     static propTypes = {
|         classes: PropTypes.shape({
|             root: PropTypes.string
 @ ../peregrine/src/List/index.js 3:0-41 3:0-41
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/Router/Router.js 8:21
Module parse failed: Unexpected token (8:21)
You may need an appropriate loader to handle this file type.
|
| export default class MagentoRouter extends Component {
>     static propTypes = {
|         apiBase: string.isRequired,
|         routerProps: object,
 @ ../peregrine/src/Router/index.js 2:0-6:18 2:0-6:18 2:0-6:18 2:0-6:18
 @ ../peregrine/src/index.js
 @ ./src/index.js

ERROR in ../peregrine/src/List/list.js 9:21
Module parse failed: Unexpected token (9:21)
You may need an appropriate loader to handle this file type.
|
| class List extends Component {
>     static propTypes = {
|         classes: PropTypes.shape({
|             root: PropTypes.string
 @ ../peregrine/src/List/index.js 1:0-33 1:0-33
 @ ../peregrine/src/index.js
 @ ./src/index.js

lerna ERR! npm run build -s exited 2 in '@magento/venia-concept'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @magento/[email protected] build: `npx lerna run --stream build -- -s`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @magento/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Expected result:

Successful build without errors.

Has anyone ran into this? Looking for some guidance.

[vitalics]

@mbrzuzy currently, we do not have any guidelines for windows 10, since magento2 officially support *nix systems. You can try to use bash on windows instead.

[472756921]

I also encountered this problem. How to fix it ?
win 7, node v 10.14.2 , npm v 6.4.1

[dmtrkad]

@sharkySharks , Could you please have a look on it and update within actual status ?

[etinin]

Webpack doesn't account for the \ slash on Windows.
Here's the fix:

diff --git a/packages/venia-concept/webpack.config.js b/packages/venia-concept/webpack.config.js
index 969542c..da96be6 100644
--- a/packages/venia-concept/webpack.config.js
+++ b/packages/venia-concept/webpack.config.js
@@ -70,7 +70,7 @@ module.exports = async function(env) {
                 {
                     include: [
                         themePaths.src,
-                        /peregrine\/src\//,
+                        /(peregrine\/src\/|peregrine\\src\\)/,
                         babelEnvDeps.include()
                     ],
                     test: /\.(mjs|js)$/,

[472756921]

Webpack doesn't account for the \ slash on Windows.
Here's the fix:

diff --git a/packages/venia-concept/webpack.config.js b/packages/venia-concept/webpack.config.js
index 969542c..da96be6 100644
--- a/packages/venia-concept/webpack.config.js
+++ b/packages/venia-concept/webpack.config.js
@@ -70,7 +70,7 @@ module.exports = async function(env) {
                 {
                     include: [
                         themePaths.src,
-                        /peregrine\/src\//,
+                        /(peregrine\/src\/|peregrine\\src\\)/,
                         babelEnvDeps.include()
                     ],
                     test: /\.(mjs|js)$/,

I have a path parsing error after using it.
Module not found: Error: Can't resolve 'srcRootComponentsProductindex.js' in 'D:\pwa-studio\packages\venia-concept'

[472756921]

I tried it on Ubuntu， it's success.
There are some unknown errors in the windows system.

[awilcoxa]

This issue is dependent on work being done by @sharkySharks to add support for Windows.

[sharkySharks]

Work in progress for docker container being tracked under #734
Having a docker environment to run PWA Studio under should resolve a number of issues related to development on Windows.

[awilcoxa]

Closing issue as docker improvements have been delivered in #734 if these errors are still occurring please re-open issue.

[DeepShah2511]

I am also facing this issue while runing yarn run build command in Magento PWA setup.

below is the screeshoot please checke and re-open this issue.