snowpack build started failing out of the blue

[austincrim-pfg]

I can't run snowpack build without getting an error since yesterday. I did not change anything about my snowpack.config or my package.json. The exception isn't always thrown in the same place, but they're always syntax errors related to either TypeScript or JSX thrown by @babel/parser. I'm totally stuck, any ideas?

Here's my snowpack.config.js:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        public: '/',
        src: '/_dist_',
    },
    plugins: [
        '@snowpack/plugin-react-refresh',
        '@snowpack/plugin-dotenv',
        '@snowpack/plugin-typescript',
        ['@snowpack/plugin-build-script', { cmd: 'postcss', input: ['.css'], output: ['.css'] }],
    ],
    extends: '@snowpack/app-scripts-react',
};

and my package.json:

{
    "name": "ui",
    "version": "0.1.0",
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build",
        "test": "jest",
        "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
        "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
    },
    "dependencies": {
        "react": "^17.0.0",
        "react-beautiful-dnd": "^13.0.0",
        "react-dom": "^17.0.0",
        "react-query": "^2.26.4",
        "uuid": "^8.3.1"
    },
    "devDependencies": {
        "@snowpack/app-scripts-react": "^1.12.6",
        "@snowpack/plugin-build-script": "^2.0.11",
        "@snowpack/plugin-dotenv": "^2.0.4",
        "@snowpack/plugin-react-refresh": "^2.3.7",
        "@snowpack/plugin-typescript": "^1.1.0",
        "@testing-library/jest-dom": "^5.11.6",
        "@testing-library/react": "^11.0.0",
        "@types/jest": "^26.0.15",
        "@types/react": "^16.9.49",
        "@types/react-beautiful-dnd": "^13.0.0",
        "@types/react-dom": "^16.9.8",
        "@types/snowpack-env": "^2.3.2",
        "autoprefixer": "^10.0.2",
        "jest": "^26.6.3",
        "msw": "^0.22.0",
        "postcss": "^8.1.8",
        "postcss-cli": "^8.3.0",
        "prettier": "^2.0.5",
        "snowpack": "^2.18.5",
        "tailwindcss": "^2.0.1",
        "typescript": "^4.0.0"
    }
}

and here's an example of the exception:

yarn run v1.22.10
warning package.json: No license field
$ snowpack build
[snowpack] ! building source files...
[snowpack] ✘ file:///Users/C097645/git/typescript-cdk/packages/ui/src/util/determineSourceAndDestination.ts
  SyntaxError: /Users/C097645/git/typescript-cdk/packages/ui/src/util/determineSourceAndDestination.ts: Unexpected token (1:12)

> 1 | import type { DropResult } from 'react-beautiful-dnd';
    |             ^
  2 | import type Column from '../types/Column';
  3 | 
  4 | export default function determineSourceandDestination(result: DropResult, columns: Column[]) {
    at Parser._raise (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:748:17)
    at Parser.raiseWithData (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:741:17)
    at Parser.raise (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:735:17)
    at Parser.unexpected (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:9101:16)
    at Parser.expectContextual (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:9067:41)
    at Parser.parseImport (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:13102:12)
    at Parser.parseStatementContent (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:11776:27)
    at Parser.parseStatement (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:11676:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:12258:25)
    at Parser.parseBlockBody (/Users/C097645/git/typescript-cdk/node_modules/@babel/parser/lib/index.js:12249:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[austincrim-pfg]

My build started working after deleting this line from my snowpack.config.js: extends: '@snowpack/app-scripts-react',.
Did something change with that package?

[patriciapavia9]

snowpack build && ./build_replace.sh

[snowpack] ! building source files...
[snowpack] ✔ build complete [2.62s]
[snowpack] ! installing dependencies...
[snowpack] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to true, as the next major version will default this option to true.
[snowpack] ✔ install complete! [44.04s]
[snowpack] ! verifying build...
[snowpack] ✔ verification complete [0.09s]
[snowpack] ! writing build to disk...
[snowpack] ! optimizing build...
Webpack errors:
./dist/state/ducks/http/requests.js 12:1047
Module parse failed: Unexpected token (12:1047)
File was processed with these loaders:

• ../node_modules/babel-loader/lib/index.js
• ../node_modules/@snowpack/plugin-webpack/plugins/import-meta-fix.js
• ../node_modules/@snowpack/plugin-webpack/plugins/proxy-import-resolve.js
  You may need an additional loader to handle the result of these loaders.
  | sortDir:'DESC',sortBy:'ID',pageNum:1,pageSize:100// Hopefully noone ever tops up more than 100 times
  | // and wants a very very old transaction to be refunded

}),initialState:[],persistData:true}),promotions:pageNum=>({func:()=>paymentService.getPromotions(pageNum),initialState:[],persistData:true}),subscriptionDetail:subscriptionId=>({func:()=>paymentService.getSubscriptionDetail(subscriptionId),initialState:{},persistData:true}),promotionInfo:id=>({func:()=>paymentService.getPromotionInfo(id),initialState:{},persistData:true}),tripStatistics:(startTime,endTime,city,thirdParty)=>({func:()=>statisticsService.getTripStatistics(startTime,endTime,city,null,thirdParty),initialState:{dayReport:[],summary:{avgDuration:0,avgDistance:0,totalTrips:0,forceEndedTrips:0,countList:[]},request:{startTime:0,endTime:0,city:null,thirdParty:null,excludeAdmin:true}},persistData:true}),tripTraces:(startTime,endTime,city)=>({func:()=>statisticsService.getTripsByRange(startTime,endTime,city),initialState:[],persistData:true}),clusteredPoints:(startTime,endTime,city,points)=>({func:getState=>{const filter={startTime:startTime,endTime:endTime,city:city,points:points,minLat:getState().restrictedBoundsPermission?.latMin,minLng:getState().restrictedBoundsPermission?.lonMin,maxLat:getState().restrictedBoundsPermission?.latMax,maxLng:getState().restrictedBoundsPermission?.lonMax};return statisticsService.getClusteredPoints(filter);}}),userStatistics:uid=>({func:()=>statisticsService.getUserStatistics(uid),initialState:{},persistData:true}),batchUserStatistics:(uids,clearPrevious=false)=>({func:async getState=>{const records={};const results=await Promise.all(uids.map(uid=>statisticsService.getUserStatistics(uid).catch(()=>null)));results.forEach((userInfo,index)=>{const userId=uids[index];records[userId]=userInfo;});const prevData=clearPrevious?{}:getState().batchUserStatistics.data;return{...prevData,...records};},initialState:{},persistData:true}),transactionStatistics:(startTime,endTime,uidFilter,thirdParty,excludeAdmin,includeBraintree)=>({func:()=>statisticsService.getTransactionStatistics(startTime,endTime,uidFilter,thirdParty,excludeAdmin,includeBraintree),initialState:{report:[],summary:{count_topups:0,amount_wallet_topups:0,amount_wallet_trip:0,amount_wallet_subscription:0,count_wallet_refund:0,amount_wallet_refund:0,count_wallet_braintree_refund:0,amount_wallet_braintree_refund:0,count_wallet_trips:0,count_coupon_trips:0,count_subscription_trips:0,count_wc_trips:0,count_ws_trips:0,count_cs_trips:0,count_wcs_trips:0,count_all_trips:0},summary_subscription_type:[],summary_topup:[],summary_money:{amount_in:0,amount_out:0},startTime:0,subscriptions:[],report_money:[]},persistData:true}),yunbaUserSession:(username,imei)=>({func:()=>userService.getYunbaUserSession(username,imei),initialState:null,persistData:true}),bikeTripsPageNumber:(pageNumber,imei)=>({func:()=>{return new Promise(resolve=>resolve(pageNumber));},initialState:0,persistData:true,onSuccessAfter:params=>{params.dispatch(sendRequest(requests.bikeTrips(imei))());}}),bikeTrips:imei=>({func:getState=>bikeService.getTripsByImei(imei,getState().bikeTripsPageNumber.data),initialState:bikeTripsEmptyState,persistData:true,showSpinner:true}),allTripsPageNumber:(pageNumber,refresh)=>({func:()=>{return new Promise(resolve=>resolve(pageNumber));},initialState:0,persistData:true,onSuccessAfter:params=>{if(refresh)params.dispatch(sendRequest(requests.allTrips())());}}),allTrips:()=>({func:getState=>bikeService.getAllTrips(getState().allTripsPageNumber.data,getState().tripsFilter),initialState:[],persistData:true,showSpinner:true}),endTrip:imei=>({func:()=>bikeService.endTrip(imei),showSpinner:true,alertId:'endTrip'}),tripInfo:id=>({func:()=>bikeService.getTripInfoById(id),initialState:APP_VALUES_AND_MESSAGES.tripInfoInitialState,showSpinner:true,onSuccessBefore:params=>{const tripInfo=params.res;const traceToUse=tripInfo.lockTrace.points.length>tripInfo.trace.points.length?tripInfo.lockTrace:tripInfo.trace;if(traceToUse.points.length){const{latMin,latMax,lonMin,lonMax}=traceToUse.boundingBox;const scale=0.001;params.dispatch(mapActions.setPendingBounds({latMin:latMin-scale,latMax:latMax+scale,lonMin:lonMin-scale,lonMax:lonMax+scale}));}},persistData:true}),tripInfoShowTrace:(trace,visible)=>({func:getState=>{const prevState=getState().tripInfoShowTrace.data;return new Promise(resolve=>resolve({...prevState,[trace]:visible}));},initialState:{phone:true,lock:true},persistData:true}),thirdParty:()=>({func:getState=>{const thirdParty=getState().user?.thirdParty;const tp=thirdParty||null;return bikeService.fetchThirdPartyBikes(tp);},initialState:{thirdPartyUser:[],thirdPartyBike:[]},onFailure:params=>{alert(params.error);},persistData:true}),unlockThirdPartyBike:(imsname,imei)=>({func:()=>bikeService.unlockThirdPartyBike(imsname,imei),initialState:{doUnlock:false,msg:'Not unlocked',model:'Bike'},persistData:true})};// If you're getting an error below this comment, the schema of your requests object is probably incorrect.
| // Automagically generate type definitions for redux state (TODO: actually use this)
| export const requestBehaviours={};// Set key of returned objects to key name of function, and also add to request behaviours for reducer to deal with
@ ./dist/state/ducks/http/reducers.js 1:125-170 2:12-29 2:119-136
@ ./dist/state/store.js
@ ./dist/state/index.js
@ ./dist/index.js

---

./dist/views/mainMap/mainMapComponent.js 14:197
Module parse failed: Unexpected token (14:197)
File was processed with these loaders:

• ../node_modules/babel-loader/lib/index.js
• ../node_modules/@snowpack/plugin-webpack/plugins/import-meta-fix.js
• ../node_modules/@snowpack/plugin-webpack/plugins/proxy-import-resolve.js
  You may need an additional loader to handle the result of these loaders.
  | this.animationFrame=requestAnimationFrame(this.tick);};map.on('load',()=>{if(map.isStyleLoaded()){onLoad();}map.on('style.load',onLoad);});}shouldComponentUpdate(nextProps){// Only update if any dependent props have changed
  | for(const d of allDependentProps){if(this.props[d]!==nextProps[d]){return true;}}return false;}componentDidUpdate(prevProps){const{selectedMarkerImei,selectedMarker,pendingBounds,compareLocations,bikeInfo}=this.props;const{map,bikePopup,compareLocationPopups}=this.mapState;// Update sources (if any dependent props have changed for that source)

for(const[name,{getSource,dependentProps}]of Object.entries(sources)){const shouldUpdate=dependentProps.some(propName=>this.props[propName]!==prevProps[propName]);if(shouldUpdate){const source=map?.getSource(name);source&&source.setData(getSource(this.props).data);}}// Show/hide selected bike popup
| if(selectedMarker&&selectedMarker.location){if(!bikePopup.isOpen()){map&&bikePopup.addTo(map);}const{longitude,latitude}=selectedMarker.location;bikePopup.setLngLat([longitude,latitude]);}else if(prevProps.selectedMarkerImei&&!selectedMarkerImei){// Removing a popup is quite expensive (~5ms) for some reason, so it should only be done when the popup is visible
| bikePopup.remove();}// Show compare location popups
@ ./dist/views/mainMap/mainMapContainer.js 1:138-181 3:331-338

[patriciapavia9]

package.json
{
"scripts": {
"start": "snowpack dev",
"build": "snowpack build && ./build_replace.sh",
"prettier-format": "prettier --write "src//*.{js,jsx,ts,tsx}"",
"prettier-lint": "prettier --check "src//.{js,jsx,ts,tsx}"",
"eslint": "eslint 'src/**/.{js,jsx,ts,tsx}'",
"eslint-fix": "eslint 'src//*.{js,jsx,ts,tsx}' --fix"
},
"dependencies": {
"@date-io/core": "^1.3.6",
"@date-io/luxon": "1.x",
"babel-loader": "^8.2.2",
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
"@mapbox/mapbox-sdk": "^0.11.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@turf/turf": "^5.1.6",
"@types/react-paginate": "^6.2.1",
"@upsetjs/venn.js": "^1.3.0",
"apexcharts": "^3.22.0",
"append-query": "^2.1.0",
"body-parser": "^1.19.0",
"change-case": "^4.1.1",
"classnames": "^2.2.6",
"d3": "^6.1.1",
"express": "^4.17.1",
"express-favicon": "^2.0.1",
"express-http-proxy": "^1.6.0",
"form-urlencoded": "^4.2.1",
"geojson": "^0.5.0",
"history": "^4.10.1",
"luxon": "^1.25.0",
"mapbox-gl": "1.12.0",
"query-string": "^6.13.1",
"react": "^17.0.1",
"react-apexcharts": "^1.3.7",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^17.0.1",
"react-paginate": "^6.5.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"serve": "^11.3.1",
"serve-favicon": "^2.5.0",
"venn.js": "^0.2.20",
"ws": "^7.3.1"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-react-jsx": "^7.12.1",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@snowpack/app-scripts-react": "^1.12.5",
"@snowpack/plugin-dotenv": "^2.0.4",
"@snowpack/plugin-typescript": "^1.0.2",
"@snowpack/plugin-webpack": "^2.0.17",
"@types/append-query": "^2.0.0",
"@types/cacheable-request": "^6.0.1",
"@types/classnames": "^2.2.10",
"@types/d3": "^5.7.2",
"@types/form-urlencoded": "^2.0.1",
"@types/lodash": "^4.14.159",
"@types/luxon": "^1.24.3",
"@types/mapbox-gl": "^1.12.0",
"@types/node": "^14.11.1",
"@types/react": "^16.9.53",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/react-select": "^3.0.19",
"@types/react-window": "^1.8.2",
"@types/snowpack-env": "^2.3.0",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"eslint": "^7.10.0",
"eslint-plugin-react": "^7.21.0",
"eslint-plugin-react-hooks": "^4.1.2",
"husky": "^4.3.0",
"lint-staged": "^10.4.0",
"prettier": "^2.1.2",
"snowpack": "^2.15.1",
"typescript": "^4.0.5"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src//*.{js,jsx,ts,tsx}": [
"yarn prettier-format",
"yarn prettier-lint"
]
}
}

[patriciapavia9]

snowpack.config.js

module.exports = {
extends: '@snowpack/app-scripts-react',
plugins: [
'@snowpack/plugin-dotenv',
'@snowpack/plugin-typescript',
[
'@snowpack/plugin-babel',
{
input: ['.js', '.mjs', '.jsx', '.ts', '.tsx'],
transformOptions: {
/* ... /
}
}
],
[
'@snowpack/plugin-webpack',
{
/ ... */
}
]
],
devOptions: {
inline: true,
port: 3000
},
buildOptions: {
baseUrl: '/airbikeconsole/',
clean: true
},
installOptions: {
polyfillNode: true
}
};

[patriciapavia9]

tsconfig.json

{
"include": ["src", "types"],
"exclude": ["node_modules"],
// "extends": "@snowpack/app-scripts-react/tsconfig.base.json",
"compilerOptions": {
"baseUrl": "./",
"isolatedModules": true,
"allowJs": true,
"checkJs": false,
"module": "esnext",
"target": "es6",
"jsx": "react",
"moduleResolution": "node",
"lib": ["ESNext", "dom"],
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"strictNullChecks": true,
"inlineSourceMap": true,
"noFallthroughCasesInSwitch": true,
"typeRoots": ["./types", "./node_modules/@types"]
}
}

[patriciapavia9]

build_replace.sh

rm -rf build/snowpack
rm -rf build/dist
rm -rf build/web_modules

[skylarrikin]

Hi @FredKSchott and @austincrim-pfg,

This seems to be happening for me too, suddenly.
Any help would be greatly appreciated...

Here's the error that I get:

Here is my package.json:

"dependencies": {
  "@tweenjs/tween.js": "^18.6.4",
  "howler": "^2.2.1",
  "jquery": "^3.5.1"
},
"browserslist": [
  ">0.75%",
  "not ie 11",
  "not UCAndroid >0",
  "not OperaMini all"
],
"devDependencies": {
  "@snowpack/plugin-dotenv": "^2.0.4",
  "@snowpack/plugin-typescript": "^1.1.0",
  "@snowpack/plugin-webpack": "^2.1.1",
  "@types/howler": "^2.2.1",
  "@types/jquery": "^3.5.4",
  "@types/snowpack-env": "^2.3.2",
  "audiosprite": "^0.7.2",
  "compression-webpack-plugin": "^3.0.0",
  "del-cli": "^3.0.1",
  "ffmpeg": "0.0.4",
  "prettier": "^2.0.5",
  "snowpack": "^2.17.1",
  "typescript": "^4.0.0"
}

And here's my 'snowpack.config.js':

const CompressionPlugin = require('compression-webpack-plugin');

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  plugins: [
    ['@snowpack/plugin-typescript'], 
    ['@snowpack/plugin-dotenv'],
    [
      '@snowpack/plugin-webpack',
      {
        sourceMap: false,
        outputPattern: {
          js: 'js/[name].js',
        },
        extendConfig: (config) => {
          // console.log("Webpack Config: ", JSON.stringify(config, null, 3));
          // Add Webpack's CompressionPlugin to compress '.js' files into '.br' (Bortli) format
          // Link to create your own server that supports Bortli compression - https://web.dev/codelab-text-compression-brotli/
          config.plugins.push( new CompressionPlugin({
            filename: '[path].br[query]',
            algorithm: 'brotliCompress',
            test: /\.(js|css|html|svg)$/,
            compressionOptions: { level: 11 },
            threshold: 10240,
            minRatio: 0.8,
            deleteOriginalAssets: false,
          }) );
          // Add Webpack's CompressionPlugin to compress '.js' files into '.gz' (GZIP) format
          // If the server on which the game is hosted doesn't support '.br' file format, 
          // it will fallback on '.gz' file format.
          config.plugins.push( new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.7,
            compressionOptions: {
              level: 9
            }
          }) );
          return config;
        },
      },
    ],
  ],
  install: [
    /* ... */
  ],
  installOptions: {
    installTypes: true,
    polyfillNode: true
  },
  devOptions: {
    /* ...  */
  },
  buildOptions: {
    baseUrl: "./",
  },
  proxy: {
    /* ... */
  },
  alias: {
    /* ... */
  },
  
};

[skylarrikin]

After fiddling for a while, I was able to resolve this issue. I am not sure if this is the right solution, but nonetheless it worked for me and hopefully might help someone in the future.
I replaced '^' with '~' in my 'devDependencies' section of package.json, deleted 'node_modules' folder and did a 'npm install' and then it seemed to work:

"devDependencies": {
  "@snowpack/plugin-dotenv": "~2.0.4",
  "@snowpack/plugin-typescript": "~1.1.0",
  "@snowpack/plugin-webpack": "~2.1.1",
  "@types/howler": "~2.2.1",
  "@types/jquery": "~3.5.4",
  "@types/snowpack-env": "~2.3.2",
  "audiosprite": "~0.7.2",
  "compression-webpack-plugin": "~3.0.0",
  "del-cli": "~3.0.1",
  "ffmpeg": "0.0.4",
  "prettier": "~2.0.5",
  "snowpack": "~2.17.1",
  "typescript": "~4.0.0"
}