Problem with RootMostResolve in webpack-typescript aurelia skeleton

[don-bluelinegrid]

@niieani

Bazyli,

I am trying to use your dependency plugin, to resolve this issue:

https://github.com/aurelia/webpack-plugin/issues/44#issuecomment-282843031

I am getting these errors after adding the RootMostResolve plugin:

[at-loader] Checking finished with 4 errors
[at-loader] node_modules/webpack-dependency-suite/plugins/root-most-resolve-plugin.ts:1:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:6:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:7:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:210:93 
    Property 'request' does not exist on type 'SimpleDependencyClass'. 

Do you have any advice?

I'm attaching my webpack config, which is a very slightly modified version of the webpack-typescript skeleton config.

Thanks, Don

/// <reference path="./node_modules/@types/node/index.d.ts" />
/**
 * To learn more about how to use Easy Webpack
 * Take a look at the README here: https://github.com/easy-webpack/core
 **/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '@easy-webpack/core';
import * as path from 'path';

import * as envProd from '@easy-webpack/config-env-production';
import * as envDev from '@easy-webpack/config-env-development';
import * as aurelia from '@easy-webpack/config-aurelia';
import * as typescript from '@easy-webpack/config-typescript';
import * as regenerator from '@easy-webpack/config-global-regenerator';

import * as html from '@easy-webpack/config-html';
import * as css from '@easy-webpack/config-css';
import * as fontAndImages from '@easy-webpack/config-fonts-and-images';
import * as globalBluebird from '@easy-webpack/config-global-bluebird';
import * as globalJquery from '@easy-webpack/config-global-jquery';
import * as generateIndexHtml from '@easy-webpack/config-generate-index-html';
import * as commonChunksOptimize from '@easy-webpack/config-common-chunks-simple';
import * as copyFiles from '@easy-webpack/config-copy-files';
import * as uglify from '@easy-webpack/config-uglify';
import * as generateCoverage from '@easy-webpack/config-test-coverage-istanbul';
import { RewriteModuleSubdirectoryPlugin, RootMostResolvePlugin, MappedModuleIdsPlugin, ConventionInvalidatePlugin, CommentLoaderOptions, ConventionOptions, HtmlRequireOptions, ListBasedRequireOptions, AddLoadersMethod } from 'webpack-dependency-suite';

const ENV: 'development' | 'production' | 'qa' = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');
console.log('========== BUILDING FOR ENV - ' +  process.env.NODE_ENV + ' ==========');

const webpack = require('webpack');

//Determine if running locally in webpack-dev-server.
let args = JSON.parse(process.env.npm_config_argv);
let argv = Object.keys(args.cooked).map(function(key) {
 return args.cooked[key]}
);
const LOCAL = argv.indexOf('webpack-dev-server') >= 0;

// basic configuration:
const title = 'GridCommand';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractCustomCSS = new ExtractTextPlugin('style.[chunkhash].css');

const coreBundles = {
  bootstrap: [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal',
    'aurelia-pal-browser',
    'bluebird'
  ],
  // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
  aurelia: [
    'aurelia-bootstrapper-webpack',
    'aurelia-binding',
    'aurelia-dependency-injection',
    'aurelia-event-aggregator',
    'aurelia-framework',
    'aurelia-history',
    'aurelia-history-browser',
    'aurelia-loader',
    'aurelia-loader-webpack',
    'aurelia-logging',
    'aurelia-logging-console',
    'aurelia-metadata',
    'aurelia-pal',
    'aurelia-pal-browser',
    'aurelia-path',
    'aurelia-polyfills',
    'aurelia-route-recognizer',
    'aurelia-router',
    'aurelia-task-queue',
    'aurelia-templating',
    'aurelia-templating-binding',
    'aurelia-templating-router',
    'aurelia-templating-resources'
  ]
}

/**
 * Main Webpack Configuration
 */

// Use CSS source mapping only for DEV/QA.
let sourcemap = ENV === 'production'?'':'?sourceMap';
// The base/common config.
let config = generateConfig(
  {
    entry: {
      'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */],
      'aurelia-bootstrap': coreBundles.bootstrap,
      'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
    },
    // Proxy config for the webpack devServer to use our special API proxying scheme.
    devServer: {
      proxy: {
        '/blgapi/**': {
          target: 'https://scig-dev.bluelinegrid.com',
          pathRewrite: {'^/blgapi' : ''},
          secure: true,
          changeOrigin: true,
          logLevel: 'info'
        }
      }
    },    
    output: {
      path: outDir,
    },
    module: {
      rules: [
        {
          test: /main.ts$/,
          loader: 'string-replace-loader',
          query: {
            search: '%RUNTIME_ENVIRONMENT%',
            replace: ENV,
            flags: 'ig'
          }
        },
        // Stylus loader.
        {
          test: /\.styl$/, loader: ExtractTextPlugin.extract(['css-loader'+sourcemap, 'stylus-loader?resolve url'])
        },
        // SASS loader.
        {
          test: /\.(scss|css)$/i, exclude: [srcDir+'/libs/'], loader: ExtractCustomCSS.extract(['css-loader'+sourcemap,'sass-loader'+sourcemap])
        },
{
   test: /favicon.ico$/,
   exclude: /node_modules/,
   loader:'file-loader?name=[name].[hash].[ext]&context=.'
}      
      ]
    },
    resolve: {
      plugins: [
      // removes duplicate submodules if the required SemVer is satisfied
      // preferring local ones (closest to rootDir)
      // useful especially when using linked modules
      new RootMostResolvePlugin(rootDir, true)

      ]
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        test: /\.styl$/,
        stylus: {
          // You can have multiple stylus configs with other names and use them 
          // with `stylus-loader?config=otherConfig`. 
          default: {
            use: [require('nib')()],
          }
        },
      }),
      ExtractCustomCSS
    ]    
  },

  /**
   * Don't be afraid, you can put bits of standard Webpack configuration here
   * (or at the end, after the last parameter, so it won't get overwritten by the presets)
   * Because that's all easy-webpack configs are - snippets of premade, maintained configuration parts!
   * 
   * For Webpack docs, see: https://webpack.js.org/configuration/
   */
  // Use JS source mapping only for DEV/QA.
  ENV === 'qa' || ENV === 'development' ? 
    envDev(ENV !== 'qa' ? {} : {devtool: 'inline-source-map'}) :
    envProd({}),

  aurelia({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),
  typescript(ENV !== 'qa' ? {} : { options: { doTypeCheck: false, sourceMap: false, inlineSourceMap: true, inlineSources: true } }),
  html(),
  // css({ filename: 'styles.css', allChunks: true, sourceMap: false }),
  fontAndImages(),
  globalBluebird(),
  globalJquery(),
  // Transpile to ES5-compatible JS output.  (Remove if not supporting IE11.)
  regenerator(),

  generateIndexHtml({minify: ENV === 'production'/*, overrideOptions:{favicon: 'favicon.ico'}*/}),

  commonChunksOptimize({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'}),
  copyFiles({patterns: 
    [
      {context: './src/config', from: '**/**.json', to: 'config'},
  {context: './src/locales', from: '**/**.json', to: 'locales'},
      {from: './favicon.ico', to: 'favicon.ico' }
    ]
  }),
/* ENV === 'test' */
/*generateCoverage({ options: { esModules: true } })*/

  ENV === 'production' ?
    uglify({debug: false, mangle: { except: ['cb', '__webpack_require__'] }}) : {}
);

module.exports = stripMetadata(config);

[niieani]

Your code seems to be requiring .ts source files instead of .js modules from within 'node_modules'. Not sure what's causing that, but my best guess is ts-node.

[don-bluelinegrid]

@niieani

I understand why you may say that, based on the error I pasted. However, if that was the case, then the entire webpack-typescript skeleton couldn't work, right? But, it does work, and it uses the .js files in the /node_modules directory.

If I remove the Resolve plugin, then things work. So, it does seem specific to using the plugin with the typescript-webpack skeleton, which is what introduced ts-node. Have you tested with that? Again, my project is directly based on the latest webpack-typescript skeleton, with minimal changes.

Thanks, Don

[don-bluelinegrid]

@niieani

Also, it is not "your code" (mine) that is requiring the .ts source files -

[at-loader] node_modules/webpack-dependency-suite/plugins/root-most-resolve-plugin.ts:1:1 

• it is the [at-loader] that is doing this. This is aurelia-typescript-loader I think, right?

[niieani]

No, at-loader is the default name of the awesome-typescript-loader. Seems it's trying to validate too much. Try adding exclude: ["node_modules"] to your tsconfig.json.

[don-bluelinegrid]

@niieani

Again, just to clarify - I've not previously had any issue with typescript loading or ts-node. Only now, when I try to use this dependency plugin. So, what is making it seem that all of the node-modules needs to be excluded, when this has never previously been a problem?

Don

[niieani]

Hi @don-bluelinegrid. Sorry for the late reply. Please check out the new aurelia webpack plugin, which does not require this set of plugins.