working with gatsby v3 - scripts are still broken

gatsby-config.js

@@ -17,17 +17,24 @@ module.exports = {
   },
   plugins: [
     'gatsby-theme-material-ui',
-    'gatsby-plugin-typescript',
     {
       resolve: 'gatsby-plugin-postcss',
       options: {
+        cssLoaderOptions: {
+          esModule: true,
+          modules: {
+            namedExport: true,
+          },
+        },
         postCssPlugins: [
           autoprefixer,
           postcssNested,
           postcssPresetEnv,
         ],
       },
     },
+    'gatsby-plugin-typescript',
+    'gatsby-plugin-dts-css-modules',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-netlify',
     'gatsby-plugin-resolve-src',

gatsby-node.js

@@ -1,7 +1,7 @@
 exports.onCreateWebpackConfig = function({ actions, plugins }) {
   actions.setWebpackConfig({
     resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
     },
     plugins: [
       plugins.provide({

package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
-    "@react-pdf/renderer": "^1.6.12",
+    "@react-pdf/renderer": "^2.0.19",
     "@tippyjs/react": "^4.2.0",
     "@types/classnames": "^2.2.11",
     "@types/react": "^17.0.0",
@@ -37,20 +37,20 @@
     "clsx": "^1.1.1",
     "eslint": "^7.17.0",
     "eslint-config-vectron": "^3.0.0",
-    "framer-motion": "^3.2.2-rc.1",
-    "gatsby": "^2.31.1",
-    "gatsby-plugin-fullstory": "^2.8.0",
+    "framer-motion": "^4.1.17",
+    "gatsby": "^3.14.0",
+    "gatsby-plugin-fullstory": "^3.14.0",
     "gatsby-plugin-gtag": "^1.0.13",
-    "gatsby-plugin-manifest": "^2.10.0",
-    "gatsby-plugin-netlify": "^2.9.0",
-    "gatsby-plugin-offline": "^3.8.0",
-    "gatsby-plugin-postcss": "3.6.0",
-    "gatsby-plugin-react-helmet": "^3.8.0",
+    "gatsby-plugin-manifest": "^3.14.0",
+    "gatsby-plugin-netlify": "^3.14.0",
+    "gatsby-plugin-offline": "^4.14.0",
+    "gatsby-plugin-postcss": "4.14.0",
+    "gatsby-plugin-react-helmet": "^4.14.0",
     "gatsby-plugin-resolve-src": "^2.1.0",
-    "gatsby-plugin-typescript": "^2.10.0",
-    "gatsby-theme-material-ui": "^1.0.13",
+    "gatsby-plugin-typescript": "^3.14.0",
+    "gatsby-theme-material-ui": "^2.0.1",
     "git-rev-sync": "^3.0.1",
-    "globby": "^11.0.2",
+    "globby": "^12.0.2",
     "js-beautify": "^1.13.0",
     "module-alias": "^2.2.1",
     "nodemon": "^2.0.7",
@@ -64,13 +64,13 @@
     "react-icons": "^4.1.0",
     "react-qr-svg": "^2.3.0",
     "react-toggle": "^4.0.2",
-    "recharts": "^1.8.5",
+    "recharts": "^2.1.4",
     "stylelint": "^13.8.0",
     "stylelint-config-rational-order": "^0.1.1",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^22.0.0",
     "tippy.js": "^6.2.7",
-    "ts-node": "^9.1.1",
-    "typescript": "~4.1.3",
+    "ts-node": "^10.2.1",
+    "typescript": "~4.4.3",
     "typescript-plugin-css-modules": "^3.1.0",
     "utility-types": "^3.10.0",
     "vcards-js": "^2.10.0"
@@ -84,5 +84,8 @@
   },
   "_moduleDirectories": [
     "src"
-  ]
+  ],
+  "dependencies": {
+    "gatsby-plugin-dts-css-modules": "^2.1.1"
+  }
 }

src/components/AllSkills/AllSkills.module.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const headerContent: string;
+export const root: string;

src/components/AllSkills/AllSkills.tsx

@@ -10,7 +10,7 @@ import { ISkill } from 'data/Skill'
 import SkillsList from './SkillsList'
 
 import 'components/ToggleDarkMode.css'
-import styles from './AllSkills.module.css'
+import * as styles from './AllSkills.module.css'
 
 type ISortKey = 'yearsOfExperience' | 'strength'
 

src/components/AllSkills/ExperienceRating.module.css.d.ts

@@ -0,0 +1,2 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;

src/components/AllSkills/ExperienceRating.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import { ISkill } from 'data/Skill'
 
-import styles from './ExperienceRating.module.css'
+import * as styles from './ExperienceRating.module.css'
 
 type TProps = any & Pick<ISkill, 'yearsOfExperience' | 'name'>
 

src/components/AllSkills/Skill.module.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const rating: string;
+export const nameLink: string;
+export const ratings: string;
+export const strengthRating: string;
+export const stale: string;

src/components/AllSkills/Skill.tsx

@@ -9,7 +9,7 @@ import { ISkill } from 'data/Skill'
 import ExperienceRating from './ExperienceRating'
 import StrengthRating from './StrengthRating'
 
-import styles from './Skill.module.css'
+import * as styles from './Skill.module.css'
 
 type TProps = {
   skill: ISkill
@@ -57,7 +57,7 @@ export const Skill: React.FC<TProps> = (props: TProps) => {
     <ExperienceRating
       yearsOfExperience={yearsOfExperience}
       name={name}
-      className={clsx(styles.rating, styles.experienceRating)}
+      className={clsx(styles.rating)}
     />
   )
   const $strengthRating = density !== 'sparse' && (

src/components/AllSkills/SkillsList.module.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const skillsContainer: string;
+export const heading: string;

src/components/AllSkills/SkillsList.tsx

@@ -9,7 +9,7 @@ import SkillGroups from 'data/SkillGroups'
 import Empty from './Empty'
 import Skill from './Skill'
 
-import styles from './SkillsList.module.css'
+import * as styles from './SkillsList.module.css'
 
 interface TProps {
   skills: ISkill[]

src/components/AllSkills/StrengthRating.module.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const rating: string;

src/components/AllSkills/StrengthRating.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import { ISkill } from 'data/Skill'
 
-import styles from './StrengthRating.module.css'
+import * as styles from './StrengthRating.module.css'
 
 type TProps = Pick<ISkill, 'strength' | 'name'> & React.HTMLProps<HTMLDivElement>
 

src/components/Footer.module.css.d.ts

@@ -0,0 +1,5 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const dim: string;
+export const ghLink: string;
+export const resumeLink: string;

src/components/Footer.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 
 import useSiteMetadata from 'hooks/useSiteMetadata'
 
-import styles from './Footer.module.css'
+import * as styles from './Footer.module.css'
 
 export const Footer: React.FC = () => {
   const {
@@ -36,7 +36,7 @@ export const Footer: React.FC = () => {
         style={{ width: 64 }}
         value="https://alampros.com"
         cellClassPrefix="qr"
-        className={clsx(styles.qr, 'no-screen')}
+        className={clsx('no-screen')}
       />
     </footer>
   )

src/components/Header.module.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const contact: string;
+export const rowOne: string;
+export const rowTwo: string;
+export const objective: string;
+export const actions: string;
+export const shadow: string;

src/components/Header.tsx

@@ -7,7 +7,7 @@ import Address from 'components/Address'
 import Objective from 'components/Objective'
 import { IResumeMetadata } from 'data/ResumeMetadata'
 
-import styles from './Header.module.css'
+import * as styles from './Header.module.css'
 
 declare global {
   interface Window {

src/components/Job/Company.module.css.d.ts

@@ -0,0 +1,5 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const at: string;
+export const separator: string;
+export const name: string;

src/components/Job/Company.tsx

@@ -5,7 +5,7 @@ import Address from 'components/Address'
 import { ICompany } from 'data/Company'
 import { IJobDescriptor } from 'data/Job'
 
-import styles from './Company.module.css'
+import * as styles from './Company.module.css'
 
 type JobParts = Pick<IJobDescriptor, 'department'>
 
@@ -31,7 +31,6 @@ export const Company: React.FC<TProps> = (props: TProps) => {
       {department && (
         <>
           <span
-            className={styles.department}
             aria-label="Department"
           >
             {department}

src/components/Job/Job.module.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const company: string;
+export const dateRange: string;
+export const desc: string;
+export const projects: string;
+export const project: string;
+export const flexWrapper: string;
+export const figure: string;
+export const skillSetsVis: string;
+export const skills: string;

src/components/Job/Job.tsx

@@ -14,7 +14,7 @@ import { FilteredProjectsIndicator } from './FilteredProjectsIndicator'
 import JobSkills from './JobSkills'
 import Project from './Project'
 
-import styles from './Job.module.css'
+import * as styles from './Job.module.css'
 
 type TProps = {
   job: IJobDescriptor

src/components/Job/JobSkill.module.css.d.ts

@@ -0,0 +1,5 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const tip: string;
+export const fig: string;
+export const inner: string;

src/components/Job/JobSkill.tsx

@@ -8,7 +8,7 @@ import { IJobSkill } from 'data/Skill'
 
 import 'tippy.js/dist/tippy.css'
 import 'tippy.js/themes/light-border.css'
-import styles from './JobSkill.module.css'
+import * as styles from './JobSkill.module.css'
 
 type TProps = IJobSkill & React.HTMLProps<HTMLElement>
 

src/components/Job/JobSkills.module.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const skill: string;
+export const root: string;

src/components/Job/JobSkills.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import JobSkill from 'components/Job/JobSkill'
 import { IJobSkill } from 'data/Skill'
 
-import styles from './JobSkills.module.css'
+import * as styles from './JobSkills.module.css'
 
 type TProps = {
   skills: IJobSkill[]

src/components/Job/Project.tsx

@@ -7,7 +7,7 @@ import { IProject } from 'data/Project'
 import JobSkill from './JobSkill'
 import ProjectSkillsetsVis from './ProjectSkillsetsVis'
 
-import styles from './Job.module.css'
+import * as styles from './Job.module.css'
 
 type TProps = {
   project: IProject
@@ -51,7 +51,7 @@ export const Project: React.FC<TProps> = (props: TProps) => {
   }, [density, project])
   const desc = density === 'sparse' ? description : descriptionDetail || description
   const $description = desc && (
-    <div className={styles.description}>{desc}</div>
+    <div className={styles.desc}>{desc}</div>
   )
   const $skillsFigure = ($skills || $skillSets)
     ? (

src/components/Job/ProjectSkillsetsVis.module.css.d.ts

@@ -0,0 +1,2 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;

src/components/Job/ProjectSkillsetsVis.tsx

@@ -13,7 +13,7 @@ import {
 
 import { IProject } from 'data/Project'
 
-import styles from './ProjectSkillsetsVis.module.css'
+import * as styles from './ProjectSkillsetsVis.module.css'
 
 type TProps = {
   project: IProject

src/components/SectionHeader.module.css.d.ts

@@ -0,0 +1,2 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;

src/components/SectionHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTheme } from '@material-ui/core'
 import clsx from 'clsx'
 
-import styles from './SectionHeader.module.css'
+import * as styles from './SectionHeader.module.css'
 
 type TProps = React.PropsWithChildren<{
   title: React.ReactNode

src/components/TinyPie.module.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
+export const root: string;
+export const part: string;

src/components/TinyPie.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, Ref, SVGAttributes } from 'react'
 import clsx from 'clsx'
 
-import styles from './TinyPie.module.css'
+import * as styles from './TinyPie.module.css'
 
 export type TProps = {
   value: number

src/components/Toolbar.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import DensitySelect from './DensitySelect'
 import ToggleDarkMode from './ToggleDarkMode'
 
-import styles from './Toolbar.module.css'
+import * as styles from './Toolbar.module.css'
 
 type TProps = GridProps
 

tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "moduleResolution": "node",
     "target": "esnext",
-    "jsx": "react",
     "lib": ["dom", "es2015", "es2017"],
+    "module": "ESNext",
+    "jsx": "react",
     "types": ["node"],
     "allowJs": true,
     "strict": true,