Elm cannot find Module that is in a dependancy - elm

Here is my project's elm-package.json
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"simonh1000/elm-charts": "3.1.0 <= v < 4.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
elm-charts exports a module called Chart.
In my ChartView.elm I want to import Chart
module Components.ChartView exposing ( .. )
import Chart as C exposing ( .. )
import Html exposing ( Html, div )
import Html.Attributes exposing ( id, class )
but when elm tries to compile, I get the error:
I cannot find module 'Chart'.
Module 'Components.ChartView' is trying to import it.
Potential problems could be: * Misspelled the module name * Need
to add a source directory or new dependency to elm-package.json
if I open elm repl from the project directory, I can import Chart as expected:
jon#jon-Xubuntu-VB:~/elixir/eval$ elm repl
\> import Chart
\>
any ideas why I Elm can't 'find Chart' when compiling?

Though this has been resolved in comments, no one has written this in an answer yet.
Elm will not find dependencies from nested directories: you want to run elm repl in the same directory as your elm-package.json (adjacent to the elm-stuff directory). It sounds like you mistakenly have an elm-package.json file at the top level of your app, when you wanted it in the web/elm/ directory.

Related

Jest + Vue3 + #Vueform/slider "SyntaxError: Cannot use import statement outside a module"

I'm using Jest as a test runner in a Vue 3 project that makes use of the #vueform slider plugin:
https://github.com/vueform/slider
the code in #vueform/slider/dist/slider.js:1 tiggers a "SyntaxError: Cannot use import statement outside a module" error.
I've tried adding a "transformIgnorePatterns" entry in the package.json's Jest configuraiton:
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.(vue)$": "vue3-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!#vueform/slider/)", "node_modules/(?!#vueform/)"]
}
I Also added "type": "module" to package.json
And tried changing
import SliderPrice from "#vueform/slider"
to
const SliderPrice = require("#vueform/slider")
Still getting the same error!
Any ideas how I can solve this issue? I can't test anything with Jest until this error gets sorted.
Edit:
I forgot to add this: Intially, the error message details included the entire (minimized) slider.js file. After adding "type": "module" to package.json the details now include just this line:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";
Edit 2:
My babel config is in a .babelrc file:
{
"presets": ["#babel/preset-env"]
}
Vue is the front end setup within a Laravel application, but the webpack.mix.js configuration file doesn't use babel.
Edit 3:
After a few more hours of playing around with the settings, I believe that this is Babel related:
If I delete my .babelrc file then I start getting the "SyntaxError: Cannot use import statement outside a module" error for my own .vue files. This shows that with the .babelrc file, my ES6 javascript files are being transformed to ES5.
So the Vue plugins, like #vueform/slider/ are NOT being transformed to ES5 by Babel, even though the correct path is defined in "transformIgnorePatterns"
For vue3 and 2 (I didn't test it on 2 but should work)
npm i -D #babel/preset-env babel-jest
babel.config.js
{
"presets": ["#babel/preset-env"]
}
I have had issues also with vue files. Below my configuration works ok.
npm i -D #vue/vue3-jest # or 2 if you are on second version
jest.config.js
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.[t|j]sx?$': 'babel-jest',
'^.+\\.vue$': '#vue/vue3-jest',
},
}

Go to definition not working on my project (vue & sass file) [visual-studio-code]

I am disappointed on two points by developing a Nuxt project on vscode.
On vscode my jsconfig.js is the default one :
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
It's working on vue file for autocompletion to import some components for example (with ctrl+space)
But impossible to go to definition next with cmd+click. I do not understand why and this is really annoying.
I can't post image (need 10 reputation), but here is my import on vue file (with no definition found for ...)
import PldFooter from '#/components/Footer';
Other point, I use sass files on assests folder. Compilation working well but I cannot access by cmd+click to the file from node_modules. Here is an example of import :
#import "~bulma/sass/base/helpers.sass";
==> No definition found for helpers.sass
Thank you for your help,
Ben.
Have you opened multiple folders (projects) in a window?
I'm not sure whether your issue the same as me. I got an issue "Go to Definition not working" in Visual Studio Code when I opened multiples folders (projects) and I resolved.
I have used the plugin Vetur to support the .vue file.
There are 2 ways which work well:
Open only one project in a window
You can open multiple projects in a window but the project you want to "Go to Definition" works well which must be the first project in the folder tree in the EXPLORER tab.
It seems the plugin Vetur picks up the first project in multiple projects to be the root folder.
My file tsconfig.json
{
...
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["src/*"],
}
},
"exclude": ["node_modules", "dist"]
...
}
Reference:
https://github.com/vuejs/vetur/issues/423#issuecomment-405415204
I apologize if my answer which cannot help you.
According to the Vetur setup guide:
If you are using Webpack's alias or TypeScript's path mapping to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json
For example:
└── src
├── components
│ ├── a.vue
│ └── b.vue
├── containers
│ └── index.vue
├── index.js
└── jsconfig.json
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": [
"src/components/*"
]
}
}
}
index.vue
import a from 'components/a.vue'
import b from 'components/b.vue'
It solved the problem in my case.

Elm : install specific version of a github library

I want to use v9 branch of elm-mdl library.
I added native-modules to true in my elm-package.json and added external\elm-mdl to my source-directories list.
I then added "debois/elm-mdl": "9.0.0 <= v < 10.0.0", to elm-package.json
I ran elm-install but it complains about :
▶ No solution found: Unable to satisfy the following requirements:
- `debois/elm-mdl (< 10.0.0)` required by `user-specified dependency`
- `debois/elm-mdl (>= 9.0.0)` required by `user-specified dependency`
How can i make elm-install and elm-make to pick up my cloned directory version of the library ?
Please see directory structure and elm-package.json output below :
└─ $ ▶ elm --version
0.18.0
└─ $ ▶ cat elm-package.json
{
"version": "1.0.0",
"summary": "Track your life.",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"native-modules": true,
"source-directories": [
"src",
"external/elm-mdl"
],
"exposed-modules": [],
"dependencies": {
"danyx23/elm-uuid": "2.1.0 <= v < 3.0.0",
"debois/elm-mdl": "9.0.0 <= v < 10.0.0",
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"mgold/elm-random-pcg": "4.0.2 <= v < 6.0.0",
"rtfeldman/elm-css": "9.1.0 <= v < 10.0.0",
"rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0",
"sporto/elm-dropdown": "1.3.0 <= v < 2.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
└─ $ ▶ cat external/elm-mdl/elm-package.json
{
"version": "9.1.0",
"summary": "Material Design Lite port to Elm",
"repository": "https://github.com/debois/elm-mdl.git",
"license": "Apache License, version 2.0",
"source-directories": [
"src"
...
└─ $ ▶ ls external/elm-mdl/
build_scripts CONTRIBUTING.md COPYING.md demo elm-package.json examples FAQ.md foo.md LICENSE.md Makefile MIGRATION.md PR.md README.md RELEASE.md src TEMPLATES.md TESTING.md tests USERS.md
ashish # 7567 ~/work/be_autonomous (master)
└─ $ ▶ ls
Architecture.md compile_css.sh elm-package.json elm-stuff external index.css index.html index.js run.sh src TAGS tests
Here's an answer I prepared earlier: Using local packages
In summary, remove the elm-mdl reference in your dependencies and link to the folder where the Material module is defined, ie:
"source-directories": [
-- ADD src because Material.elm is under that folder
"external/elm-mdl/src"
],
"dependencies": {
-- REMOVE LINE BELOW
"debois/elm-mdl": "9.0.0 <= v < 10.0.0",
},
It will then error for every package that elm-mdl depends on, add them locally as per the SO link I referenced above.

Simple program compiled without error gives a white page

I compiled the "Hello world" program
import Html exposing (text)
main =
text "Hello, World!"
with elm 0.17 on Windows, without compile errors:
elm make hello.elm --output index.html
When I open Chrome on index.html, I get a blank page. Chrome's console shows 2 errors in index.html :
Uncaught ReferenceError: _elm_lang$virtual_dom$VirtualDom$text is not defined
Uncaught ReferenceError: Elm is not defined
If I run the elm-reactor on that file, I also get a white page, and similar errors in the console.
Somehow, a path is missing... Here is the elm-package.json file:
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "4.0.0 <= v < 5.0.0",
"elm-lang/html": "1.0.0 <= v < 2.0.0"
},
"elm-version": "0.17.0 <= v < 0.18.0"
}
What should I do ?
I fixed it by deleting the elm-stuff subdirectory. At the next make, it reinstalls the missing packages, and everything works fine.

File Upload in Elm

How does one upload a file (image or excel) in Elm?
Can't seem to find any examples.
The answer is fine even if the native code is used. Have seen Data in Elm-Html but it appears files and blobs are not supported. What is the way around this?
I am the author of the library MisterMetaphor refers to. It's easier to use than he explains though. Take a look at how I set up elm-package.json in the example: https://github.com/simonh1000/file-reader/blob/master/example/elm-package.json - just add "native-modules": true,.
I have written a blog to support the release of the code for 0.18 and show how uploads to e.g. S3 can be done in Elm.
The official way to do it is now https://package.elm-lang.org/packages/elm/file/latest/
This is an addition that came in Elm 0.19.
Now the official Http package supports it as well. Here is an example from https://package.elm-lang.org/packages/elm/http/latest/Http#request
import File
import Http
type Msg = Uploaded (Result Http.Error ())
upload : File.File -> Cmd Msg
upload file =
Http.request
{ method = "PUT"
, headers = []
, url = "https://example.com/publish"
, body = Http.fileBody file
, expect = Http.expectWhatever Uploaded
, timeout = Nothing
, tracker = Nothing
}
The other option to handle file uploads in Elm is to
get a base64-encoded value from the FileReader into your Elm app through a port.
Then, send that base64-encoded value to your server (e.g. in a JSON body).
A tutorial can be found here https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17 (it says it's for Elm 0.17, but it works unchanged in Elm 0.18).
The downsides of this approach are
your server needs to base64-decode the files it receives which increases server load a little, and
base64-encoding increases the amount of bytes that will go over the wire (compared to a file/blob).
The upside:
no need to use a package with native code.
From the Elm Http docs: "Right now it only supports strings, but we will support blobs and files when we get an API for them in Elm."
Use a library like file-reader.
There is a set of pretty comprehensive examples, you can start with this one.
There's a caveat, though. Since this library uses some native code, you can't get it from the official package repo. So you will have to resort to manually installing it.
For this purpose, I wrote this hacky elm-package install replacement. It expects an exact-dependencies.json file in the root directory of your project. You can get this file initially from the elm-stuff directory that elm-package creates when building your project. You then add a reference to the file-reader package to the exact-dependencies.json file like this:
{
"evancz/elm-effects": "2.0.1",
"evancz/virtual-dom": "2.1.0",
"evancz/elm-http": "3.0.0",
"evancz/start-app": "2.0.2",
"evancz/elm-html": "4.0.2",
"elm-lang/core": "3.0.0",
"simonh1000/file-reader": "1.0.0"
}
You will also need to add a reference to file-reader to your elm-package.json file:
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0",
"evancz/elm-effects": "2.0.1 <= v < 3.0.0",
"evancz/elm-html": "4.0.2 <= v < 5.0.0",
"evancz/elm-http": "3.0.0 <= v < 4.0.0",
"evancz/start-app": "2.0.2 <= v < 3.0.0",
"simonh1000/file-reader": "1.0.0 <= v < 2.0.0",
},
"elm-version": "0.16.0 <= v < 0.17.0"
}
After this, you run the elm-package install replacement and hopefully it will work.