webpack5#1111

.dockerignore

@@ -16,8 +16,7 @@
 
 # Third-party dependency files.
 !package.json
-!yarn.lock
-!.yarnrc
+!package-lock.json
 !requirements.txt
 
 # Config

.gitignore

@@ -118,13 +118,14 @@ share/
 pyvenv.cfg
 
 
-# Don't check in package-lock, as it will conflict with yarn.lock and break the heroku build
-package-lock.json
 
 # Docker environment config
 docker_environment_init.sh
 
 .envrc
 
 # Exclude Makefiles
-Makefile
+Makefile
+
+# Exclude files create at runtime - by webpack and storybook
+common/static/

.pre-commit-config.yaml

@@ -1,5 +1,5 @@
 default_language_version:
-    python: python3.8
+    python: python3.10
 repos:
 -   repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.3.0

Dockerfile

@@ -21,29 +21,27 @@ ENV PYTHONUNBUFFERED 1
 RUN mkdir /code
 WORKDIR /code
 
-RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN apt-get update && apt-get install -y libgdal-dev
 
 # Install and set up nvm
 RUN mkdir /.nvm
 ENV NVM_DIR /.nvm
-ENV NODE_VERSION 12.16.0
+ENV NODE_VERSION 16.20.1
 RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.35.0/install.sh | bash \
     && . $NVM_DIR/nvm.sh \
     && nvm install $NODE_VERSION \
     && nvm alias default $NODE_VERSION \
     && nvm use default
 
-# Install pip and yarn depedencies before copying directory to Docker image.
+# Install pip and npm depedencies before copying directory to Docker image.
 COPY requirements.txt /code/requirements.txt
 RUN pip install -r requirements.txt
 
-# Copy files needed for yarn install.
-COPY package.json yarn.lock /code/
-RUN yarn config set ignore-engines true
-RUN yarn --frozen-lockfile --link-duplicates --ignore-scripts
-# Permission issue with node-sass https://github.com/sass/node-sass/issues/1579
-RUN npm rebuild node-sass
+# Copy files needed for npm install.
+COPY package.json /code/
+COPY package-lock.json /code/
+
+RUN npm install --ignore-scripts -frozen-lockfile --link-duplicates
 # Copy folders and files whitelisted by .dockerignore.
 COPY . /code/
 

civictechprojects/templates/new_index.html

@@ -13,7 +13,6 @@
     <meta name="og:url" content="{{ canonical_url }}" />
     <meta name="image" property="og:image" content="{{ og_image }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="/static/js/runtime.bundle.js" defer></script>
     <script src="/static/js/main.bundle.js" defer></script>
     <script src="/static/js/vendors.bundle.js" defer></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">

common/components/mount-components.js

@@ -12,7 +12,7 @@ import SignUpErrorAdapter from "./componentsBySection/signUp/SignUpErrorAdapter.
 
 // TODO: Figure out a better way to prevent react console error where it's
 // expecting node Environment variables
-global.process = {
+window.process = {
   env: {
     NODE_ENV: "production",
   },

democracylab/templates/base.html

@@ -11,7 +11,8 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     <script src="https://use.fontawesome.com/21e87da3a9.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
-    <script src="/static/js/bundle.js" defer></script>
+    <script src="/static/js/main.bundle.js" defer></script>
+    <script src="/static/js/vendors.bundle.js" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js" defer></script>
     {% block extra_head %} {% endblock extra_head %}
 </head>