As far as I can tell, #574 may have broken the usage of CSS Modules in React-Static. I’ve upgraded to the latest version and noticed that import styles from 'Foo.scss' no longer works as expected. If you attempt to reference a class name on the styles object, it results in undefined.

Environment

1. react-static -v: 5.8.2 (first non-working release, last working release is 5.8.1)
2. node -v: 8.9.3
3. yarn --version or npm -v: 5.6.0
4. Operating system: macOS 10.13.4

Steps to Reproduce the problem

1. Go to examples/sass
2. npm i
3. npm i [email protected] (first non-working release)
4. Open static.config.js and add modules: true option on css-loader
5. Open App.js and replace import './app.scss' with import styles from './app.scss'
6. Add console.log(styles.content) below the app.scss import
7. Run npm stage
8. Notice that the console.log call results in undefined

Expected Behavior

If you did the steps outlined above on 5.8.1, it would work. You’d just need to remove the if condition surrounding ExtractTextPlugin.extract call in static.config.js (which was introduced to conform to changes in #574).

Let me know if I’m missing some trivial configuration that would allow me to use CSS Modules. Otherwise, changes in #574 need to be revisited.

/cc @lottamus

Usin the latest react-static to build with react-create command with Select a template below... firebase-auth. after npm run start this is what I got...

I know that this is a free, open-source project and I appreciate all the time and effort this has been put into by you and the collaborators. Currently react-static v16 is in beta and there is still errors that I constantly fight with (using react-static in production), some of them already fixed in PRs and while it kinda works, I find myself to work with ugly workarounds like patching react-static files by overwriting them inside the node_modules folder.

Maybe it could help to call for maintainers with publish and PR merge rights? I believe that react-static is a great solution for statical page building and there is people commiting and participating in the development, adding maintainers could help getting to v16 and future updates a lot faster.

I came across this accidently. In the past I was used to have an obfuscated version of my SPA after "npm run build".

With the latest react-static (which does not work correctly with npm run build, but it passes with yarn build, see here https://github.com/nozzle/react-static/issues/1053) there is the full source code available in user's browser. In the beginning I thought, this is just because there is somewhere a file link to the source code in a map or so and it would be only visible to me, but after deploying it to a webserver it was also available to all.

Steps to reproduce:

• react-static create
• use "blank" target
• To visualize the issue add a console.log("Hello World") in App.js, but you could also browse the source tree in developer console

render () {
    console.log("Hello World")
    return (

• run yarn build
• run `yarn serve``
• open localhost:3000 in your browser
• open developer console
• find Hello World and click the right most link to 'App.js:9'

Find your sources. Bummer

I never had this with previous react-static versions.

Since this repo relies on Node >=v7.6, adding "babel-preset-stage-3": "^6.24.1", to package.json and "stage-3" to .babelrc, should solve this. I'd be happy to make this change in Pull Request. Do I need access rights to the repo for that?

• Makes sure it's relative to the location root, not site root
• Makes sure it's resolving paths, indepedent of file system
• Makes sure it starts with a slash in case there is no directory structure

Description

Changes the resolution in react-static-plugin-source-filesystem to be cross-env compatible.

• Stop using hardcoded path separators. These are not the same across environments.
• Use path.relative for relative resolution instead of replace. This normalises paths first, so it works across environments.
• Cutoff the extension using path.basename and path.extname, which works across environments.
• Prefix with a slash if necessary (top-level pages)
• Change the comment to be correct: make relative to location root, not site root.

This works with path.resolve(...) and ./src/pages.

Changes the resolution in react-static to be cross-env compatible.

• Throw an error if a plugin resolves a windows path (it expects POSIX paths by then)
• Use join whenever dealing with real paths
• Add tests for the behaviour above

Additionally, changes the webpack.config.prod.js to use cross-env resolution for the paths that are considered external.

Changes/Tasks

• [X] Changed code

Motivation and Context

Fixes #1094 Fixes #1122 Fixes #1123

Screenshots (if appropriate):

Types of changes

• [ ] Refactoring/add tests (refactoring or adding test which isn't a fix or add a feature)
• [X] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [ ] I have updated the documentation accordingly
• [X] I have updated the CHANGELOG with a summary of my changes
• [X] My changes have tests around them

Reporting a bug?

Provide as much information as you can to reproduce the issue. If the issue is not reproducible, it can't be fixed!

Environment

Run and copy the result of:

npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers

here:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 177.36 MB / 7.52 GB
    Container: Yes
    Shell: 5.4.2 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 67.0
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-ga-donottrack: ^1.0.0 => 1.0.0 
    react-hot-loader: ^4.8.4 => 4.8.4 
    react-markdown: ^4.0.8 => 4.0.8 
    react-static: ^7.0.10 => 7.0.10 
    react-static-plugin-sass: ^7.0.10 => 7.0.10 
    react-static-plugin-typescript: ^7.0.10 => 7.0.10 
    react-syntax-highlighter: ^10.2.1 => 10.2.1 

of course include any other package versions here if relevant.

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

It's a somewhat difficult problem because it doesn't appear to be completely reproducible every time. These steps result in the problem some of the time. I have the feeling that it mostly occurs when the site is freshly loaded.

1. Visit https://vincenttunru.com
2. Click on one of the posts, e.g. "Fearless deployments"
3. Hopefully see "An error occurred loading this page's template. More information is available in the console." The console then shows: "Error: export not found" in vendors~main.

When you then navigate to a different page, the page goes completely black with the message:

An internal error occured!

Please see the console for more details.

And the console says:

Invariant Violation: "Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

It appears to be easier to reproduce when the site has not been visited for a couple of minutes...

This occurs in both Firefox and Chrome. I think it does not occur when the console is open. It also does not occur when you visit a page directly. Any pointers to other things I should investigate would be welcome.

Expected Behavior

The expected page should just be shown every time I click a link there.

Reproducible Demo

Source code of the website is here: https://gitlab.com/vincenttunru/blog

After fixing #876, I noticed that the hot reloading is having issues in all examples, even the basic one.

The hot reloading module recommends using hot(app) instead of hot(module)(app). But while this does work, it seems to reload the route component only and removes the app html (

The new plugin system is now under development and is already capable of a lot. This issue will be used to track the progress of converting each example to use as much of the plugin system as possible.

• [x] emotion - react-static-plugin-emotion
• [x] styled-components react-static-plugin-styled-components
• [x] sass - react-static-plugin-sass
• [x] preact - react-static-plugin-preact
• [ ] typescript
• [ ] google-analytics
• [ ] material-ui
• [ ] styled-jsx
• [ ] gentics-mesh
• [ ] less-antdesign
• [ ] tailwindcss

I'm noticing that fresh installs of React Static displays an empty page in develop mode ($ react-static start) and the console outputs SyntaxError: The URL 'http:/[http//localhost]:300' is invalid from SockJS. This occurs after running yarn upgrade in a previously working repo in either RS 6.3.x or 7.0.x. Seems that this is related to the 3.3.0 update of webpack-dev-server (possibly this change?).

Adding this to my project's package.json and reinstalling dependencies fixes development builds. This confirms that something is borked in an update of webpack-dev-server.

"resolutions": {
  "react-static/webpack-dev-server": "~3.1.10"
}

Environment

  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz
    Memory: 228.44 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0.2
    Safari: 12.1
  npmPackages:
    react-ga: ^2.5.7 => 2.5.7 
    react-markdown: ^4.0.6 => 4.0.6 
    react-moment: ^0.8.4 => 0.8.4 
    react-static: ^7.0.7 => 7.0.7 
    react-static-plugin-reach-router: ^7.0.0 => 7.0.0 
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0 
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0

Steps to Reproduce the problem

1. npx react-static create
2. create site and cd in
3. yarn upgrade to install latest dependencies
4. yarn start
5. navigate to http://localhost:3000
6. See broken site? Open console.

Upgrades react-static libray to Webpack 4.

Description

Changes/Tasks

• [ ] Refactored the existing webpack production config to separate out the static rendering and production bundling
• [ ] Upgraded plugins, loaders and config to webpack 4

Motivation and Context

Webpack 4 has been out for a while now. Some of the existing packages that react-static uses have been deprecated and are no longer being maintained.

Types of changes

• [x] Refactoring/add tests (refactoring or adding test which isn't a fix or add a feature)
• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [ ] My change requires a change to the documentation.
  • [ ] I have updated the documentation accordingly.
• [ ] My changes have tests around them