Repository navigation
"You may need an appropriate loader to handle this file type." error with today's build #402
Description
I pulled this morning and copied all of my code in and moved the trivial bits around. This is my build output from npm run build:dev :
> webpack --progress --profile --colors --display-error-details --display-cached
19614ms build modules
28ms seal
44ms optimize
38ms hashing
48ms create chunk assets
2ms additional chunk assets
4563ms optimize chunk assets
3133ms optimize assets
49ms emit
Hash: 2d2986e14868251e51ee
Version: webpack 1.12.14
Time: 27582ms
Asset Size Chunks Chunk Names
assets/fonts/fontawesome-webfont.eot 70.8 kB [emitted]
polyfills.bundle.js 430 kB 0 [emitted] polyfills
polyfills.map 317 kB 0 [emitted] polyfills
main.map 2.51 MB 1 [emitted] main
assets/css/font-awesome.min.css 27.5 kB [emitted]
assets/fonts/FontAwesome.otf 110 kB [emitted]
main.bundle.js 1.57 MB 1 [emitted] main
assets/fonts/fontawesome-webfont.svg 366 kB [emitted]
assets/fonts/fontawesome-webfont.ttf 142 kB [emitted]
assets/fonts/fontawesome-webfont.woff 83.6 kB [emitted]
assets/fonts/fontawesome-webfont.woff2 66.6 kB [emitted]
index.html 2.45 kB [emitted]
+ 303 hidden modules
ERROR in ./~/angular2-jwt/angular2-jwt.ts
Module parse failed: /Users/JARVIS/src/proj/ui/node_modules/angular2-jwt/angular2-jwt.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {Injectable, Injector} from 'angular2/core';
| import {Http, HTTP_PROVIDERS, Headers, BaseRequestOptions, Request, RequestOptions, RequestOptionsArgs, RequestMethod, Response} from 'angular2/http';
| import {Observable} from 'rxjs/Observable';
@ ./src/app/components/dashboards/dashboards.ts 13:21-57
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
My webpack.config.js
resolve: {
// ensure loader extensions match
extensions: helpers.prepend(['.ts','.js','.json','.css','.html', '.scss'], '.async') // ensure .async.ts etc also works
},
module: {
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader', exclude: [ helpers.root('node_modules/rxjs') ] }
],
loaders: [
// Support Angular 2 async routes via .async.ts
{ test: /\.async\.ts$/, loaders: ['es6-promise-loader', 'ts-loader'], exclude: [ /\.(spec|e2e)\.ts$/ ] },
// Support for .ts files.
{ test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [ /\.(spec|e2e)\.ts$/, helpers.root('node_modules') ] },
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader', exclude: [ helpers.root('node_modules') ] },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader', exclude: [ helpers.root('node_modules') ] },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader', exclude: [ helpers.root('src/index.html'), helpers.root('node_modules') ] },
{ test: /\.scss$/, exclude: [helpers.root('node_modules')], loaders: ['raw-loader','sass-loader?outputStyle=compressed&sourceComments=false'] },
// if you add a loader include the resolve file extension above
]
},My package.json with just the ADDITIONAL items:
"dependencies": {
...
"angular2-jwt": "^0.1.7",
"bootstrap": "^3.3.6",
...
},
"devDependencies": {
...
"node-sass": "^3.4.2",
...
"sass-loader": "^3.1.2",
...
},
Activity
dweitz43 commentedon Mar 9, 2016
+1 i saw this last night after updating, but in my case it was for a .css file i was trying to inject into the App component's styles metadata from node_modules, and i fixed it temporarily by removing node_modules from the css loader's exclude array.
I say temporarily because I feel like that is not the optimal solution to solve the issue in my case, but I am not versed in webpack quite enough to know how to correctly inject external css from node_modules into the App component.
jkyoutsey commentedon Mar 9, 2016
@dweitz43 I can agree. Removing node_modules from the exclude does allow the build to work. Probably not a production solution though.
dweitz43 commentedon Mar 9, 2016
indeed, i definitely don't believe it is a production solution. However, I spend most of my time right now in dev and have yet to attempt to build for prod.
i would love more insight on a possible recent change that was made that could have caused my prior setup to break in this way, it would be a great learning experience to try to fix
cschroeter commentedon Mar 9, 2016
Check this #399 for more information
msegers commentedon Mar 10, 2016
I have my own npm package which is a set of ts and d.ts files. Excluding the node_modules works for now, I guess in such a situation you can add the include property for certain packages you use.