I'm fairly new in Elm. It's interesting to see a functional language which allows you to develop front-end stuff. Now even if I am following the steps described here nicely, I still have problems with modules.
The code is
module Main where
import Html exposing ( Html )
import Signal
main : Signal Html.Html
main = Html.text "This should work."
|> Signal.constant
I have used elm-reactor -a='localhost' to be able to view my output. But I am getting an error, that module 'HTML' cannot be found:
I cannot find find module 'Html'.
Module 'Main' 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
(note the double "find" hehe)
The fix suggestion didn't help me. Or it could be that I'm not understanding the use of the .json file correctly.
elm-package.json:
{
"version": "1.0.0",
"summary": "testing elm",
"license": "BSD3",
"source-directories": [
".",
"./bin/"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"
}
Here is a screenshot of my file tree.
Maybe it behaves differently than how Haskell is threatening the modules.
How can I solve this - eh simple? - problem.
Or is my elm-package.json just configured incorrectly?
Update for Elm 0.17
In 0.17, the Html package has been moved to elm-lang/html. Run the following command from the terminal to install it:
elm package install elm-lang/html
You should also remove the evancz/elm-html package from elm-package.json because it no longer exists as of 0.17.
For more information about the upgrading from 0.16 to 0.17, please see the 0.17 announcement.
Original Answer for Elm 0.16
Your elm-package.json configuration is missing the evancz/elm-html package, which exposes Html. You can use elm's package manager to install dependencies rather than editing elm-package.json directly.
From the terminal, type the following:
elm package install evancz/elm-html
You will also be prompted to install a few other missing dependencies required by evancz/elm-html. Running this command will update your elm-package.json file as well as pull down the missing packages from the internet and install them in the standard elm-stuff/packages directory.
More info on the elm-package tool can be found here.
You can browse elm packages online at package.elm-lang.org. The sidebar has a Popular Packages section which contains the evancz/elm-html package mentioned here.
Related
I've written several npm library projects, and this is the way I import symbols in one JS file from another JS file, but it won't work in the script section of a svelte file:
My 'package.json' file has a name field (e.g. set to '#jdeighan/something`) and an 'exports' section with entries like "./utils": "./src/lib/utils.js". Then in any other JS file I can import symbols from utils.js with "import {somesymbol} from '#jdeighan/something/utils'. It's how to do imports from a library that you've installed with 'npm install', but it also (cleverly) works inside the project itself. But in a svelte file, this won't work - I get the error message "Failed to resolve import "#jdeighan/something/utils" from "src\routes+page.svelte". Does the file exist?". Here is what I have in my svelte file:
<script>
import {somesymbol} from '#jdeighan/something/utils';
</script>
I know that svelte has a handy $lib alias, but I'd prefer to use the npm standard mechanism, but it seems to be broken when using SvelteKit (not sure about using plain svelte)
I'd prefer to use the npm standard mechanism
This is absolutely not the standard mechanism. I have never seen people import from the current project by package name. While this is supported by Node itself, nothing else seems to support it, including e.g. the VS Code language server which will be unable to provide code navigation.
Using the name makes it less clear that the import is local and not a separate dependency and if the name were to be changed it would have to be adjusted everywhere.
I would recommend just not doing that. SvelteKit has $lib predefined as a default to provide essentially the same functionality in a convention-based way that actually works.
If you create a project with just these 3 files, then execute node foo.js in a console window, you get "Hello, World!":
package.json:
{
"name": "#jdeighan/something",
"type": "module",
"version": "1.0.0",
"exports": {
"./utils": "./utils.js"
}
}
foo.js:
import {message} from '#jdeighan/something/utils'
console.log(message);
utils.js
export let message = 'Hello, World!';
I've created an npm workspace with two packages "foo" and "bar".
Furthermore, I'm using typescript so both packages contain a src/index.ts.
During development, I want to have the "main" property of both packages to be src/index.ts.
But after building and publishing the packages the "main" entry has to point to the built dist/index.js.
How can I accomplish that or is my assumption wrong, that I can point to the typescript file during development?
But then I would have to rebuild the packages during development all the time.
I hope that's not necessary.
Thank you for your help in advance
UPDATE
To be more precise, I need to have "main" point to the Typescript file src/index.ts because otherwise, I can't reference "foo" inside of "foo" itself:
// foo/src/index.ts
import { something } from 'foo';
This error is thrown:
[vite:resolve] Failed to resolve entry for package "foo". The package may have incorrect main/module/exports specified in its package.json.
The above import only works, If "main" points to src/index.ts.
Otherwise I would have to use relative paths to the imported file of the same project, for example
// foo/src/index.ts
import { something } from './someotherfile.ts';
I found out, that vite needs the plugin vite-tsconfig-paths to find my main tsconfig.json to properly resolve the project:
// vite.config.ts
import tsconfigPaths from "vite-tsconfig-paths";
plugins: [
tsconfigPaths({
root: "../../",
}),
],
I have a Nrwl Nx repo with different apps (angular, nodejs with express) and shared libs inside.
The repo was created with the nx cli and I want to build for production one of the express apps.
nx build:production myexpressapp
The bundle I get is very nice and runs if I run it (with pm2) from where it was built (dist folder).
However, if I get it to production, the node modules are missing and the app does not start.
If I copy the node_modules folder above the one with the built dist it works as well.
But I would very much like either of:
Getting a big bundle with all the required modules inside of it?
Getting another 'vendors' bundle along my main one where all the needed modules are?
I tried using "vendorChunk":true in my production build options but nothing changes.
Any thoughts?
Looking at angular.json (or workspace.json), if your builder is #nrwl/node:build, under options, set externalDependencies to none, like so:
{
"projects": {
"api": {
"architect": {
"build": {
"builder": "#nrwl/node:build",
"options": {
"externalDependencies": "none"
...
You may experience errors like:
ERROR in ...
Module not found: Error: Can't resolve 'some-modules' in ...
Just keep installing what its complaining about, until it stops.
Reference: Nrwl Nx Node Builder
Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.
I'm new in ELM, and i want to execute this code :
import Html exposing (..)
main =
text "hola yassine"
using elm platfrom 0.16.
Now, when i call http://localhost:8000/test.elm i have this error :
I cannot find module 'Html'.
Module 'Main' 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
and when i execute the elm package install elm-lang/html 1.0.0to import it, i have this problem that depend on path :
error
Someone can help me please ?
thanks a lot.
You say you're using Elm 0.16. elm-lang/html was written from scratch for Elm 0.17, which significantly changed basic language features (abolishing signals most notably). You could try using evancz/elm-html 4.0.2 (the last version to support Elm 0.16) or you could upgrade to Elm 0.18 (as of November 2016, the latest version).