Bug during building (could be limited to people who tried the npm link)

[emettely]

Cannot build npm run build:component from webpack-npm-publish:

Context

I can’t build in my original repo using webpack BUT if I cp -R repo new-repo and run the same exact command it works… which means the error its outputting (see bottom) is nonsense. Webpack is invoked from the project directory. Here is the command I run: https://github.com/bbc/digital-paper-edit-storybook/blob/4b560deb5559126f1cd8ad79465cfa7cdd617345/package.json#L9

From here on I'll describe the original repository as "A". The same repository with a different name will be described "B".

Working scenarios

• cloned dir B
• copied dir B
• other people who hasn't run npm link? (assumption)

Not working scenarios

• building A
• rename A to B
• delete A, rename B to A
• master / other branches

Things I've done

• [x] same version of npm / node on separate build executions
• [x] Cleared my npm cache and verified it
• [x] rm -rf node_modules && rm -f package-lock.json a million times
• [x] also cleared my global npm deps

npm list -g --depth=0
/usr/local/lib
├── @bbc/generator-newslabs-api@1.0.0 -> /Users/okunoe01/workspace/generator-newslabs-api
├── mocha@6.1.4
├── npm@6.9.0
└── yo@2.0.6

• [x] checked diff, no difference
• [x] checked file size, no difference
• [x] restarted iterm
• [x] restarted laptop
• [x] not running out of resources (memory etc)
• [x] filename doesn't have any unicode strangeness
• [x] tried running with yarn, same problem.

Initially I thought npm link went funny, but I have no more linked modules due to removing all the global node modules. I also removed digital-paper-edit-client in case a softlink file was surviving.

Additional Info

What I see in A:

$ webpack --config webpack.config.js
Hash: 3a8a1e677f226afb9df5
Version: webpack 4.40.2
Time: 505ms
Built at: 19/09/2019 14:24:01
 18 assets
Entrypoint Breadcrumb = Breadcrumb.js Breadcrumb.js.map
Entrypoint CustomAlert = CustomAlert.js CustomAlert.js.map
Entrypoint FormModal = FormModal.js FormModal.js.map
Entrypoint ItemForm = ItemForm.js ItemForm.js.map
Entrypoint List = List.js List.js.map
Entrypoint SearchBar = SearchBar.js SearchBar.js.map
Entrypoint PreviewCanvas = PreviewCanvas.js PreviewCanvas.js.map
Entrypoint ProgrammeScriptContainer = ProgrammeScriptContainer.js ProgrammeScriptContainer.js.map
Entrypoint SimpleCard = SimpleCard.js SimpleCard.js.map
   9 modules

ERROR in ./packages/components/Breadcrumb/index.js 11:8
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (item.link) {
|       return (
>         <LinkContainer key={ item.name } to={ item.link }>
|           <Breadcrumb.Item>{item.name}</Breadcrumb.Item>
|         </LinkContainer>

ERROR in ./packages/components/FormModal/index.js 12:47
Module parse failed: Unexpected token (12:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const [ showModal, toggleShowModal ] = useState(props.showModal);
|
>   const form = (props.type === 'transcript') ? <TranscriptForm { ...props }/> : <ItemForm { ...props }/>;
|
|   return (

ERROR in ./packages/components/CustomAlert/index.js 14:27
Module parse failed: Unexpected token (14:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   const setAlertHeading = () => {
>     return props.heading ? <Alert.Heading>{props.heading}</Alert.Heading> : null;
|   };
|

ERROR in ./packages/components/ProgrammeScriptContainer/index.js 17:4
Module parse failed: Unexpected token (17:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   const SortableList = SortableContainer(({ children }) =>
>     <ul style={ { listStyle: 'none', padding: '0px' } }>
|       {children}
|     </ul>

ERROR in ./packages/components/List/SearchBar/index.js 22:4
Module parse failed: Unexpected token (22:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <InputGroup className="mb-3">
|       <InputGroup.Prepend
|         onClick={ () => setToggleShowInput(!toggleSearchInput) }

ERROR in ./packages/components/ItemForm/index.js 34:4
Module parse failed: Unexpected token (34:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   return (
|
>     <Form noValidate
|       validated={ isValidated }
|       onSubmit={ handleSubmit }

ERROR in ./packages/components/SimpleCard/index.js 35:4
Module parse failed: Unexpected token (35:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <Card style={ { width: '100%', marginBottom: '1em' } }>
|       <Card.Body>
|         <Row>

ERROR in ./packages/components/List/index.js 44:8
Module parse failed: Unexpected token (44:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (item.display && item.status) {
|       return (
>         <TranscriptCard
|           { ...item }
|           handleEdit={ props.handleEdit(item.id) }

ERROR in ./packages/components/PreviewCanvas/index.js 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <VideoContextPreview
|       canvasRef={ canvasRef }
|       playlist={ props.playlist }
error Command failed with exit code 2.

What I see in B:

$ webpack --config webpack.config.js
Hash: 28ea7a6699e1e881b887
Version: webpack 4.40.2
Time: 11104ms
Built at: 19/09/2019 14:48:04
 18 assets
Entrypoint Breadcrumb = Breadcrumb.js Breadcrumb.js.map
Entrypoint CustomAlert = CustomAlert.js CustomAlert.js.map
Entrypoint FormModal = FormModal.js FormModal.js.map
Entrypoint ItemForm = ItemForm.js ItemForm.js.map
Entrypoint List = List.js List.js.map
Entrypoint SearchBar = SearchBar.js SearchBar.js.map
Entrypoint PreviewCanvas = PreviewCanvas.js PreviewCanvas.js.map
Entrypoint ProgrammeScriptContainer = ProgrammeScriptContainer.js ProgrammeScriptContainer.js.map
Entrypoint SimpleCard = SimpleCard.js SimpleCard.js.map
  [0] external {"commonjs":"react","commonjs2":"react","amd":"React","root":"React"} 42 bytes {0} {1} {2} {3} {4} {5} {6} {7} {8} [built]
 [13] (webpack)/buildin/global.js 472 bytes {0} {2} {4} {5} {6} {7} {8} [built]
 [17] external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"ReactDOM","root":"ReactDOM"} 42 bytes {1} {2} {3} {4} {6} [built]
 [76] ./node_modules/react-router-dom/esm/react-router-dom.js + 6 modules 66.8 KiB {0} {4} {8} [built]
      |    7 modules
[100] ./node_modules/react-bootstrap/node_modules/react-transition-group/esm/Transition.js + 2 modules 16.4 KiB {1} {2} {3} {4} [built]
      |    3 modules
[101] ./node_modules/@restart/hooks/esm/useEventCallback.js + 1 modules 831 bytes {1} {2} {3} {4} [built]
      |    2 modules
[139] (webpack)/buildin/module.js 497 bytes {2} [built]
[238] ./node_modules/uncontrollable/esm/index.js + 3 modules 9.48 KiB {1} {4} [built]
      |    4 modules
[485] ./node_modules/common-tags/es/index.js + 48 modules 80.6 KiB {2} [built]
      |    49 modules
[486] ./packages/components/ProgrammeScriptContainer/index.js + 26 modules 65.2 KiB {6} [built]
      |    27 modules
[487] ./packages/components/PreviewCanvas/index.js + 5 modules 7.42 KiB {5} [built]
      |    6 modules
[488] ./packages/components/FormModal/index.js + 1 modules 7.21 KiB {2} [built]
      |    2 modules
[489] ./packages/components/List/index.js + 1 modules 6.4 KiB {4} [built]
      |    2 modules
[490] ./node_modules/@storybook/client-api/node_modules/is-plain-object/index.js + 1 modules 1.08 KiB {2} [built]
      |    2 modules
    + 477 hidden modules

ERROR in ./node_modules/bootstrap-css-only/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
> :root {
|   --blue: #007bff;
|   --indigo: #6610f2;
 @ ./packages/components/SimpleCard/index.js 1:386-431
error Command failed with exit code 2.

[emettely]

Managed to get NPM Link to work in the firebase version of DPE - https://github.com/bbc/digital-paper-edit-firebase/blob/master/docs/guides/npm-link.md. The bug still is a mystery though.