search

tcoopman / elm-css-webpack-loader

34 stars 13 forks source link

Cannot find module 'lodash' #6

Closed anler closed 2 years ago

anler commented 7 years ago

Hi, I tried to run the example but I got the error Cannot find module 'lodash':

image

Do you know why? Thanks!

erlandsona commented 7 years ago

Me too...

erlandsona commented 7 years ago

Just realized this is fixed by adding the noParse: /.elm$/, option to the module definition in webpack.config.js

erlandsona commented 7 years ago

That said, then we're left with the issue that I'm still stuck on... Uncaught ReferenceError: require is not defined app.js:8166

anler commented 7 years ago

Same error here @erlandsona :/

mezuzza commented 7 years ago

+1 Same error as @erlandsona.

bredikhin commented 7 years ago

FWIW, running npm i in both module root and examples folder fixes the issue.

ahstro commented 7 years ago

Anyone looking into this? For some reason, it seems to work perfectly in the example, even when I extract the example folder and install elm-css-webpack-loader as a module from npm, but I can't get it to work with my work's setup.

If I use loader: "style!css!elm-css", I get the aforementionedrequire is not definedruntime error, but if I try to use it withExtractTextPlugin`, I instead get this error during build:

    ERROR in ./elm/Stylesheets.elm
    Module build failed: Error: Cannot find module '../node_modules/css-loader/lib/css-base.js'
jiwhiz commented 7 years ago

Please take a look at my PR #12 , I upgraded the example to Elm 0.18 and Webpack 2.2.

For a more advanced example, see my elm-bootstrap-webpack-starter project.

erlandsona commented 7 years ago

@ahstro I'm having the same issue as you are now... 

    ERROR in ./elm/Stylesheets.elm
    Module build failed: Error: Cannot find module '../node_modules/css-loader/lib/css-base.js'

Have you found a fix since you posted?

erlandsona commented 7 years ago

I tried @jiwhiz's pr but I'm still getting it...

erlandsona commented 7 years ago

I found the cause! Turns out I was using a relative path in my css for prop "background" "url(images/stairs.jpg) center 27% no-repeat" and that was causing an error in the css compilation which at the top of the error read the same as the Cannot find module, probably because if the elm doesn't compile the loaders throw their own errors. That makes sense I guess?

ahstro commented 7 years ago

@erlandsona I don't have any relative path's in my CSS, I barely have any CSS at all. I think the error is related to changing path somehow. I tried hooking into css-loader here and adding a console.log(process.cwd()) before the require, and for every piece of CSS it shows / except for that generated by elm-css-webpack-loader, for which it shows /home/ahstro/path/to/package.json-directory. Don't have time to debug it further now, but hopefully someone can figure out what's happening

ahstro commented 7 years ago

Okay, I definitely haven't found out what's going on - if anything, I'm more confused than ever - but I've figured out a workaround.

First off, this doesn't seem to have anything to do with elm-css-webpack-loader. I'm getting the same error just by creating a Stylesheet.elm and including /\.elm$/ in my current CSS loading setup, without even installing any Elm related dependencies.

After some playing around, I realized that the .elm suffix, for whatever reason, broke things. A valid CSS file with .el worked, so did .e and .foo, but as soon as I changed the import to .elm, BIG RED ERROR.

My workaround is to name the file Stylesheet.elm.css instead, and just change the loader to reflect that. Seems to work flawlessly for me so far, and I've been able to apply styles to the website I'm working on, so not sure what else could go wrong.

erlandsona commented 7 years ago

For me the solution had to do with the way webpack handles, for eg: background: url(image/foo.png). Webpack will fail trying to compile "root-relative" urls.

See: https://github.com/webpack-contrib/css-loader#root