build-fe-prod fails to build

[hristijankiko]

Hi,

I am trying to setup nucleus but it seems like it is not able to build the front-end because it is missing a css loader. Is there something I could be doing wrong?

This is the output from yarn run build-fe-prod

ERROR in ./~/@atlaskit/css-reset/dist/bundle.css
Module parse failed: C:\Users\Chris.Gjorgjievski\src\wsp\nucleus\node_modules\@atlaskit\css-reset\dist\bundle.css Unexpected token (17:9)
You may need an appropriate loader to handle this file type.
| pre,
| form,
| fieldset {
|   margin: 0;
|   padding: 0;
 @ ./public/index.tsx 10:0-46
 @ multi ./public/index.tsx

ERROR in ./~/highlight.js/styles/vs.css
Module parse failed: C:\Users\Chris.Gjorgjievski\src\wsp\nucleus\node_modules\highlight.js\styles\vs.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|
| */
| .hljs {
|   display: block;
|   overflow-x: auto;
 @ ./public/components/AppPage.tsx 63:0-37
 @ ./public/App.tsx
 @ ./public/index.tsx
 @ multi ./public/index.tsx

[MarshallOfSound]

@hristijankiko You probably need to cleanly reset your node modules folder rm -rf node_modules && yarn 👍

[hristijankiko]

@MarshallOfSound I just tried that but it did not fix the problem. Do you have any idea of what else could be causing it? I am on Windows btw.

[MarshallOfSound]

@hristijankiko My guess is something in our webpack.loaders.js or webpack.config.js doesn't play nice with windows path separators. If you can figure out what it is and PR a fix that'd be great, but we only really support *nix systems here (our main deployment target is a docker image) so I'm gonna close this out as a windows specific issue.

[hristijankiko]

@MarshallOfSound I found the problem. The exclude regex skips the file if there is a /src/ in the path. So if you have your nucleus project in a directory such as /something/src/nucleus/ it will basically exclude all css files in the project.

test: /\.css$/,
    exclude: /[/\\]src[/\\]/,
    loaders: [
      'style-loader?sourceMap',
      'css-loader',
    ],

This might be able to be improved by making the regex match /src/ directories in the assets folders with the regex [/\\](node_modules|bower_components|public_out)[/\\].*[/\\]src[/\\]. I could also remove the /src/ from the path to my project directory to fix this for me.

Let me know if you want me to create a PR.

[leofidus]

@hristijankiko It would be great if you could make a PR for this. Be sure to sign the CLA before submitting the PR. @MarshallOfSound only uses the Docker version, so don't expect much initiative from him. But he will merge PRs for other platforms.