Code Monkey home page Code Monkey logo

Comments (13)

klazuka avatar klazuka commented on June 14, 2024 1

Ok. So the mistake I made was thinking that List.map would be used in all programs, which is generally true but not for toy programs. I will find a better symbol to use for the version check.

Thanks for your help identifying the issue.

from elm-hot.

psb avatar psb commented on June 14, 2024

@pdamoc I'm getting the same issue with webpack (via elm-hot-webpack-loader). I've not tried 1.1.0

Edit:
I've just realised that the 1.1.0 is with regards to elm-hot. I have just tried the previous two versions of elm-hot-webpack-loader and I still have the same issue. I also get an npm warning: [email protected] requires a peer of elm-webpack-loader@^5.0.0 even though I have installed version 6.0.0.

from elm-hot.

klazuka avatar klazuka commented on June 14, 2024

Thanks for the report. I wasn’t aware of the parcel integration. I’ll check it out.

from elm-hot.

klazuka avatar klazuka commented on June 14, 2024

@pdamoc I just cloned elm-parcel-example and gave it a try. I had a bunch of problems getting some of the transitive node dependencies installed (deasync), but once I got that going, I was able to run parcel in watch node fine (npx parcel src/index.html) and hot reloading worked flawlessly. I don't see any errors in the console.

Can you post more details about your configuration (node, parcel, OS, Elm compiler version)?

from elm-hot.

klazuka avatar klazuka commented on June 14, 2024

@psb the webpack loader integration works for me. Can you provide more details about your configuration (node, webpack, elm-webpack-loader, OS, Elm compiler version)?

from elm-hot.

klazuka avatar klazuka commented on June 14, 2024

@pdamoc I was mistaken: it was doing a full page reload.

I don't use Parcel: can you please tell me what command you mean by running it in "watch mode"? It seems like when I use parcel watch, it doesn't actually run a web server.

from elm-hot.

pdamoc avatar pdamoc commented on June 14, 2024

@klazuka sorry for not being careful when reporting the error. Please do the following:

  1. Download the https://github.com/benthepoet/elm-parcel-example
  2. run npm install parcel-bundler
  3. run npx parcel src/index.html

you should see in the console that elm-hot is being installed automatically.

  1. go to http://localhost:1234/

This sequence of commands ensures that you are running a parcel version that integrates elm-hot and that elm-hot is at its latest version.

from elm-hot.

pdamoc avatar pdamoc commented on June 14, 2024

if you go through the steps above you will have "elm-hot": "^1.1.1", in the package.json.

If you change that to "elm-hot": "1.1.0", and npm install, you should see the app working. You might need to delete the dist folder but I guess that changing something in the elm file just to trigger a recompilation might have the same effect.

from elm-hot.

psb avatar psb commented on June 14, 2024

@klazuka
My package.json:
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"popper.js": "^1.15.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^2.1.1",
"elm": "^0.19.0-no-deps",
"elm-hot-webpack-loader": "^1.1.1",
"elm-webpack-loader": "^6.0.0",
"file-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "4.4.0",
"webpack-cli": "^3.3.5",
"webpack-combine-loaders": "^2.0.4"
}
}

I was trying to integrate it with a Phoenix application (on macOS High Sierra (10.13.6) and using Firefox Developer Edition). My webpack.config.js is the same as the example app, but it also fails if I remove the devser part and pass in --hot to webpack via the Phoenix app setup.

Maybe there is something wrong with my setup (I'm still learning Elixir and Phoenix).

I've decided not to use Elm as I need to do more native mobile development; therefore, I'm in no rush for a fix. However, let me know if you want me to try anything or need more information.

from elm-hot.

klazuka avatar klazuka commented on June 14, 2024

@pdamoc thanks for the detailed instructions. I followed those steps and saw "installing elm-hot", and when I run the example app, HMR is working fine (I modified the example to be a simple counter using Browser.sandbox). I don't see any errors in the console.

Is there anything else that might be different between our two environments? The change from version 1.1.0 to 1.1.1 of elm-hot was very small, but now that I look at it, it does assume that List.map exists in the generated code. Is it possible that your app doesn't have that?

from elm-hot.

pdamoc avatar pdamoc commented on June 14, 2024

The example I linked does not have List.map so, if that is working for you, the rest should work too. The project where I tripped on the issue did not have List.map either (it was a playground for some view code).

I'm on OS X 10.14.6, node 10.13.0 installed with asdf.

from elm-hot.

psb avatar psb commented on June 14, 2024

@klazuka I no longer get any errors with the elm-hot-loader-plugin after actually writing some proper Elm code using the Browser.sandbox. Before I was just writing some minimal code without setting it up properly. Sorry, it was my mistake.

from elm-hot.

pdamoc avatar pdamoc commented on June 14, 2024

I can confirm that a Browser.sandbox is enough to get rid of this error.

Adding a List.map to the file also fixes it.

for example changing

main = Html.text "Hello"

to

main = Html.div [] (List.map Html.text ["Hello"])

from elm-hot.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.