search

kriasoft / isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
https://reactstarter.com
MIT License
1.27k stars 144 forks source link

Error "Cannot resolve module" and "Unexpected token ." #54

Closed manhhailua closed 8 years ago

manhhailua commented 8 years ago

I'm using React-Starter-Kit and trying to integrate with AdminLTE. When I imported a css from AdminLTE I got this error.

If I change the background url from url(blue.png) to url("./blue.png"), the error "Cannot resolve module" will disappear but the error "Unexpected token ." still exist.

webpack built 706e73eda3d2e1bd0af7 in 6548ms
Child
    Time: 6548ms

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[name]_[local]_[hash:base64:3]","minimize":false}!./~/postcss-loader?pack=default!./~/admin-lte/plugins/iCheck/square/blue.css
    Module not found: Error: Cannot resolve module 'blue.png' in /home/nginx/domains/vps.manhhailua.com/public/node_modules/admin-lte/plugins/iCheck/square
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[name]_[local]_[hash:base64:3]","minimize":false}!./~/postcss-loader?pack=default!./~/admin-lte/plugins/iCheck/square/blue.css 6:342-361

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[name]_[local]_[hash:base64:3]","minimize":false}!./~/postcss-loader?pack=default!./~/admin-lte/plugins/iCheck/square/blue.css
    Module not found: Error: Cannot resolve module 'blue@2x.png' in /home/nginx/domains/vps.manhhailua.com/public/node_modules/admin-lte/plugins/iCheck/square
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[name]_[local]_[hash:base64:3]","minimize":false}!./~/postcss-loader?pack=default!./~/admin-lte/plugins/iCheck/square/blue.css 6:1768-1790
Child
    Time: 5675ms
            Asset    Size  Chunks             Chunk Names
        server.js  190 kB       0  [emitted]  main
    server.js.map  184 kB       0  [emitted]  main
webpack: bundle is now VALID.
/home/nginx/domains/vps.manhhailua.com/public/node_modules/admin-lte/plugins/iCheck/square/blue.css:3
.icheckbox_square-blue,
^
SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.module.exports.Object.defineProperty.value (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/external "admin-lte/plugins/iCheck/square/blue.css":1:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap f9baa6a0523f95e79945:19:1)
    at Object.<anonymous> (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/login/Login.js:16:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap f9baa6a0523f95e79945:19:1)
    at Object.module.exports.Object.defineProperty.value (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/login/index.js:11:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap f9baa6a0523f95e79945:19:1)
    at Object.module.exports.Object.defineProperty.value (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/routes/index.js:16:1)
    at __webpack_require__ (/home/nginx/domains/vps.manhhailua.com/public/build/webpack:/webpack/bootstrap f9baa6a0523f95e79945:19:1)
/home/nginx/domains/vps.manhhailua.com/public/tools/runServer.js:71
        throw new Error(`Server terminated unexpectedly with code: ${ code } signal: ${ signal }`);
        ^

Error: Server terminated unexpectedly with code: 1 signal: null
    at ChildProcess.server.once (/home/nginx/domains/vps.manhhailua.com/public/tools/runServer.js:53:15)
    at ChildProcess.g (events.js:286:16)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
vishwanatharondekar commented 8 years ago

Bumping this up

frenzzy commented 8 years ago

How to reproduce? What should I do with my RSK files to see the same error locally?

manhhailua commented 8 years ago

@frenzzy : please try @import a css file from inside a npm package to a component css file.

vishwanatharondekar commented 8 years ago

Addition to above. @import CSS file which include url('./') with relative path to images in the same or relative directory.

vishwanatharondekar commented 8 years ago

A straightforward example is I am trying to include https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css in my css using @import

Inside home.css

@import '../../../node_modules/slick-carousel/slick/slick-theme.css';

The CSS resolution works fine. slick-carousel is npm package name for above CSS.

Any CSS rule inside using url() is not working and tries to resolve it with respect to current module ie home in this case.

ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css
    Module not found: Error: Cannot resolve 'file' or 'directory' ./ajax-loader.gif in /Users/vishwanatha/react-starter-kit-5/src/routes/home
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css 6:3012-3040

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/slick.eot in /Users/vishwanatha/react-starter-kit-5/src/routes/home
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css 6:3204-3232 6:3257-3285

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/slick.woff in /Users/vishwanatha/react-starter-kit-5/src/routes/home
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css 6:3335-3364

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/slick.ttf in /Users/vishwanatha/react-starter-kit-5/src/routes/home
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css 6:3394-3422

    ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/slick.svg in /Users/vishwanatha/react-starter-kit-5/src/routes/home
     @ ./~/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]","minimize":false}!./~/postcss-loader?pack=default!./src/routes/home/Home.css 6:3456-3484
frenzzy commented 8 years ago

This issue does not related to isomorphic-style-loader, please see: https://github.com/kriasoft/react-starter-kit/pull/920

vishwanatharondekar commented 8 years ago

Great turnaround time. Didn't expect a resolution today being Sunday, or maybe I am in different time zone. Checked that branch. Works fine. Thanks for great work.