zalmoxisus / mobx-remotedev

MobX DevTools extension
MIT License
327 stars 40 forks source link

Build errors in Ionic project #48

Closed bmcharg closed 4 years ago

bmcharg commented 5 years ago

I've recently updated some of the dependencies in my project (an Ionic / TypeScript app) and am now receiving compilation errors from mobx-remotedev.

[18:07:14]  Error: ./node_modules/mobx-remotedev/src/spy.js Module parse failed: Unexpected token (79:30) You may need 
            an appropriate loader to handle this file type. | if (change.arguments && change.arguments.length) 
            action.arguments = change.arguments; | if (!onlyActions[objName]) { | schedule(objName, { ...action, type: 
            `┏ ${action.type}` }); | send(); | schedule(objName, { ...action, type: `┗ ${action.type}` }); @ 
            ./node_modules/mobx-remotedev/src/dev.js 2:0-24 @ ./node_modules/mobx-remotedev/src/index.js @ 
            ./src/stores/content-director-store.ts @ ./src/app/app.module.ts @ ./src/app/main.ts 
Error: ./node_modules/mobx-remotedev/src/spy.js
Module parse failed: Unexpected token (79:30)
You may need an appropriate loader to handle this file type.
|         if (change.arguments && change.arguments.length) action.arguments = change.arguments;
|         if (!onlyActions[objName]) {
|           schedule(objName, { ...action, type: `┏ ${action.type}` });
|           send();
|           schedule(objName, { ...action, type: `┗ ${action.type}` });
 @ ./node_modules/mobx-remotedev/src/dev.js 2:0-24
 @ ./node_modules/mobx-remotedev/src/index.js
 @ ./src/stores/content-director-store.ts
 @ ./src/app/app.module.ts
 @ ./src/app/main.ts
    at new BuildError (node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
    at emitRecords.err (node_modules/webpack/lib/Compiler.js:265:13)
    at Compiler.emitRecords (node_modules/webpack/lib/Compiler.js:371:38)
    at emitAssets.err (node_modules/webpack/lib/Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (node_modules/webpack/lib/Compiler.js:364:12)
    at next (node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (node_modules/webpack/lib/Compiler.js:361:9)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

I presume I need to update my webpack loader, but I'm not sure what is required in order to get version 0.3.6 building.

Here is the associated package.json

{
  "name": "MyApp",
  "version": "1.0.5",
  "buildNumber": "69",
  "author": "Me",
  "homepage": "http://mysite.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@capacitor/android": "^1.2.1",
    "@capacitor/cli": "^1.2.1",
    "@capacitor/core": "^1.2.1",
    "@capacitor/ios": "^1.2.1",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/native-audio": "^4.20.0",
    "@ionic-native/screen-orientation": "^4.20.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/sqlite": "^4.20.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic/storage": "2.2.0",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-sqlite-storage": "^2.4.0",
    "date-fns": "^1.29.0",
    "es6-promise-plugin": "^4.2.2",
    "gsap": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "mobx": "^5.6.0",
    "mobx-angular": "^3.0.1",
    "mobx-remotedev": "^0.3.6",
    "ngx-date-fns": "^2.0.2",
    "rxjs": "5.5.11",
    "sharp": "^0.22.1",
    "sw-toolbox": "3.6.0",
    "three": "^0.99.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "@types/hammerjs": "^2.0.36",
    "@types/lodash": "^4.14.117",
    "archiver": "^3.0.0",
    "cheerio": "^1.0.0-rc.3",
    "colors": "^1.3.2",
    "mac-open": "^0.1.3",
    "source-map-explorer": "^1.6.0",
    "stats.js": "^0.17.0",
    "typescript": "2.9.0-rc",
    "yargs": "^12.0.2"
  },
  "description": "Ny app"
}

and webpack.config.js

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/
 */

 var path = require('path');
 var webpack = require('webpack');
 var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
 const Dotenv = require('dotenv-webpack');

 var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
 var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

 var optimizedProdLoaders = [
   {
     test: /\.json$/,
     loader: 'json-loader'
   },
   {
     test: /\.js$/,
     loader: [
       {
         loader: process.env.IONIC_CACHE_LOADER
       },

       {
         loader: '@angular-devkit/build-optimizer/webpack-loader',
         options: {
           sourceMap: true
         }
       },
     ]
   },
   {
     test: /\.ts$/,
     loader: [
       {
         loader: process.env.IONIC_CACHE_LOADER
       },

       {
         loader: '@angular-devkit/build-optimizer/webpack-loader',
         options: {
           sourceMap: true
         }
       },

       {
         loader: process.env.IONIC_WEBPACK_LOADER
       }
     ]
   }
 ];

 function getProdLoaders() {
   if (process.env.IONIC_OPTIMIZE_JS === 'true') {
     return optimizedProdLoaders;
   }
   return devConfig.module.loaders;
 }

 var devConfig = {
   entry: process.env.IONIC_APP_ENTRY_POINT,
   output: {
     path: '{{BUILD}}',
     publicPath: 'build/',
     filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: process.env.IONIC_SOURCE_MAP_TYPE,

   resolve: {
     extensions: ['.ts', '.js', '.json'],
     modules: [path.resolve('node_modules')]
   },

   module: {
     loaders: [
       {
         test: /\.json$/,
         loader: 'json-loader'
       },
       {
         test: /\.ts$/,
         loader: process.env.IONIC_WEBPACK_LOADER
       }
     ]
   },

   plugins: [
     new Dotenv({
       path: '.env.dev', // load this now instead of the ones in '.env'
       systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
       silent: true // hide any errors
     }),
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
     ionicWebpackFactory.getCommonChunksPlugin()
   ],

   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {
     fs: 'empty',
     net: 'empty',
     tls: 'empty'
   }
 };

 var prodConfig = {
   entry: process.env.IONIC_APP_ENTRY_POINT,
   output: {
     path: '{{BUILD}}',
     publicPath: 'build/',
     filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: process.env.IONIC_SOURCE_MAP_TYPE,

   resolve: {
     extensions: ['.ts', '.js', '.json'],
     modules: [path.resolve('node_modules')]
   },

   module: {
     loaders: getProdLoaders()
   },

   plugins: [
     new Dotenv({
       path: '.env.prod', // load this now instead of the ones in '.env'
       systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
       silent: true // hide any errors
     }),
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
     ionicWebpackFactory.getCommonChunksPlugin(),
     new ModuleConcatPlugin(),
     new PurifyPlugin()
   ],

   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {
     fs: 'empty',
     net: 'empty',
     tls: 'empty'
   }
 };

 module.exports = {
   dev: devConfig,
   prod: prodConfig
 }