Skip to content
This repository has been archived by the owner on May 28, 2021. It is now read-only.

fallbackLoader option has been deprecated - replace with "fallback" #55

Closed
swyxio opened this issue Jun 4, 2017 · 2 comments
Closed

Comments

@swyxio
Copy link
Contributor

swyxio commented Jun 4, 2017

ice-services branch
when i do npm run build off a fresh install i am now getting these two issues:

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"

this causes a bunch of scary red errors like:

ERROR in ./~/css-loader?{"modules":true}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./client/scss/frontend.scss
Module not found: Error: Can't resolve '~images/frontend-background.jpg' in '/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/client/scss'
 @ ./~/css-loader?{"modules":true}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./client/scss/frontend.scss 7:386-428 7:1282-1324
 @ ./client/scss/frontend.scss
 @ ./client/frontend/main.js
 @ multi ./client/frontend/main.js

ERROR in ./client/scss/frontend.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '~images/frontend-background.jpg' in '/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/client/scss'
    at factoryCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/webpack/lib/Compilation.js:260:39)
    at factory (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/webpack/lib/NormalModuleFactory.js:247:20)
    at resolver (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/webpack/lib/NormalModuleFactory.js:65:21)
    at asyncLib.parallel (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/webpack/lib/NormalModuleFactory.js:138:21)
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:3824:9
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:460:16
    at iteratorCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:1032:13)
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:944:16
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:3821:13
    at apply (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:21:25)
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/async/dist/async.js:56:12
    at resolvers.normal.resolve (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/webpack/lib/NormalModuleFactory.js:130:23)
    at onResolved (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/tapable/lib/Tapable.js:283:15
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

ERROR in /Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/extract-text-webpack-plugin/loader.js??ref--7-0!/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/style-loader/index.js!/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/css-loader/index.js??ref--7-2!/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/postcss-loader/index.js!/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/node_modules/sass-loader/lib/loader.js!/Users/swyx/Desktop/webdev/vemb/vue-express-mongo-boilerplate/client/scss/frontend.scss doesn't export content

the solution may be to switch "loader" to "use" but im not sure. still trying to investigate. i am not sure if this has to do with my other compile issue where I see

ERROR in ./client/app/core/App.vue
Module build failed: Error: 

Vue packages version mismatch:

- vue@2.2.6
- vue-template-compiler@https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.2.6.tgz

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

which looks like a nonsensical error

@swyxio
Copy link
Contributor Author

swyxio commented Jun 4, 2017

based on this angular/angular-cli#4778

I have found that replacing background-image: url('~images/frontend-background.jpg'); with background-image: url('../images/frontend-background.jpg'); eliminates this particular error, however my npm start is still not rendering correctly (after a fresh npm run build) so i suspect there is some deeper issue going on here.

@icebob
Copy link
Owner

icebob commented Jun 5, 2017

I fixed it in 70c4f7d
The URL of images is correct. The problem was the css modules.

Please update your fork swyxio#3

@icebob icebob closed this as completed Jun 5, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants