Build errors in Ionic project
bmcharg opened this issue · comments
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
}