I'm building a vanilla js app and using CDN's works fine, but If I install an app like typed.js with npm, and then import it as import typed from 'typed.js' it works as it should on a local dev server.
However, once I push it and it's built on Netlify I get a console error stating:
failed to resolve module specifier "typed.js". relative references must start with either "/", "./", or "../".
I have tried changing the import in every way I can think of like 'typed' , '/typed' , '/typed.js' , 'typed.js' , 'typed.js/lib/typed.js' , typed.js/src/typed.js' etc and using require instead of import.
It ended up being a very easy fix with Netlify, I needed to change the publish directory to "dist" within the build settings.
Related
Tried to follow te set up guide for this NestedForm Stimulus component: Installation
Like so:
$ npm install stimulus-rails-nested-form --save
app/javascript/controllers/application.js
import { Application } from "#hotwired/stimulus"
import NestedForm from 'stimulus-rails-nested-form' // Added this
const application = Application.start()
application.register('nested-form', NestedForm) // Added this
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
And I'm getting:
Uncaught TypeError: Failed to resolve module specifier "stimulus-rails-nested-form". Relative references must start with either "/", "./", or "../".
I can see the package properly installed in the node_modules directory and Stimulus is getting loaded properly as I'm using it in other places of the application.
I'm on Rails 7.0.4.
Appreciate any help, cheers!
If you share a bit more about your rails setup that might help.
Your Rails app might not know about your javascripts... have a look here: https://guides.rubyonrails.org/working_with_javascript_in_rails.html
You will either need to use importmaps (in which scenario you wouldn't need npm), or you use esbuild or webpack (I would not recommend the latter).
A project I am working with is using this package: https://www.npmjs.com/package/#ethersproject/abstract-provider
within an SDK we are building..
After installation, the SDK node_modules folder contains the #ethersproject directory which contains an abstract-provider directory as well as multiple other directories, each their own namespace with separate package.json files.
We use the code in the sdk as follows:
import { Provider } from '#ethersproject/abstract-provider';
and this works fine for webpack based projects which import our SDK (such as a React app using create-react-app).
When I want to use our SDK in a project which DOESN'T use a bundler such as webpack (such as a very simple frontend pulling in our sdk with importmap as here: https://github.com/unegma/rainprotocol__verify-gating), we are getting an error:
Failed to resolve module specifier "#ethersproject/abstract-provider". Relative references must start with either "/", "./", or "../".
I'm assuming this is because our SDK doesn't know how to resolve #ethersproject/abstract-provider because abstract-provider is a submodule of #ethersproject (which isn't even a module itself).
What is the way to solve this issue? Do we need to create a decs.d.ts file in our SDK root which contains something like: declare module "#ethersproject/abstract-provider; or is there a different way to do this?
I am creating an app with Electron and Vue (using js not ts).
When I run the app using npm run electron:serve the app runs fine.
I now want to build a Windows exe so I can distribute my app. I have tried using electron-builder, electron-packager and electron-forge. Whenever I can get the build to finish, running the exe throws the cannot use import statement outside a module error (referring to the first import statement it finds, i.e. import { app, protocol, BrowserWindow } from 'electron').
I've tried adding "type":"module" to my package.json but (due a bug in Vue, according to this question), that throws Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]
I've also tried changing all my import statements to require but this doesn't work because some of the node modules I'm using use import and the error just throws for those instead.
I'm tearing my hair out over this. Where do I go from here?
UPDATE:
I have found a workaround for the Vue bug and posted my findings on the linked question. I can now add "type":"module" to my package.json.
However, I now get an error thrown when I run npm run electron:serve and from my built exe:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <my_project_root>\dist_electron\index.js
require() of ES modules is not supported.
require() of <my_project_root>\dist_electron\index.js from <my_project_root>\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
To be clear, I'm not using require in any of my source code, but the compiled(?) version does?
What's going on here?
UPDATE 2:
As requested, here is a minimal reproducible example that maintains original folder structure, configs and package.json
Although I am able to start the npm project using npm start without any issues with webpack or babel, once I run npm test, I find the following error related to testing App.js using App.test.js (where App.js imports ApolloClient):
TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'
| import ApolloClient from 'apollo-boost';
| ^
at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
at Array.forEach (<anonymous>)
at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)
Essentially, I'm confused as to why I get an error when running the test but not when starting the project.
I've tried adding in a number of babel plugins to both .babelrc and in my webpack config file:
#babel/plugin-transform-object-assign
#babel/plugin-transform-modules-commonjs
babel-plugin-transform-es2015-modules-commonjs
However, I haven't been able to resolve the issue. My thinking was that this is related to the fact that the file that fails to compile was originally CommonJS.
I was only able to find something relatively similar here, https://github.com/ReactTraining/react-router/pull/6758, but I didn't find a solution.
Is there something that I'm missing specifically related to running tests? I should also mention I've tried frameworks other than Jest and ran into the same issue.
EDIT:
I removed everything from App.test.js except the imports to isolate the issue so it just contains the following:
import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';
UPDATE:
I was able to resolve the initial error by upgrading apollo-boost from version 0.3.1 to 0.4.2. However, I now have a different error that is similarly frustrating. I am using Babel 7 and have added the plugin #babel/plugin-syntax-dynamic-import to both my .babelrc and to my webpack.config.js files. Despite this, I get the following error related to the use of a dynamic import in App.js when running the Jest to test App.test.js:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I'm not sure if there is a parsing error or something else, but I've tried numerous things that have not worked. The closest discussion I could find related to this problem is, https://github.com/facebook/jest/issues/5920, however, the proposed solutions don't work for me.
UPDATE:
One thing that I'm trying is to avoid duplication of the babel options as right now they're both in .babelrc and in the babel-loader options within webpack.config.js. From what I found online (Whats the difference when configuring webpack babel-loader vs configuring it within package.json?), the way to make webpack use the settings in .babelrc is to not specify options. However, doing so results in the same error described above showing up only this time when running npm start. I will add that the project that was originally created using create-react-app, however, in order to support multiple pages, I needed to customize webpack's configuration and so ejected from it. I'm not sure why this is so convoluted.
its probably a babel configuration issue, I'm pretty sure jest needs to be compiled to work with create-react-app...
did you specify a setup file in package.json:
"jest": {
"setupFiles": [
"/setupTests.js"
]
}
and in setupTests.js:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
It turns out that one of the components in the project's src directory had its own local package.json file even though it wasn't being used and was not installed as a local dependency in the top level package.json (instead imports were done using relative urls). For some reason, the existence of this file changed the behavior of webpack and other tools when starting and testing the project such that none of the top level configurations were used for files within directories with separate package.json files. Once I removed these local package.json files from the components sub-directory, all the prior issues were resolved. One hallmark of this problem is that compilation errors were not showing up for JavaScript files that weren't nested under an alternate package.json file.
Hopefully this is useful for anyone that encounters similar errors as I don't think the cause can be directly determined from the compiler messages alone.
I'm working on converting an existing app to using JSPM. I really appreciate using paths relative to the baseUrl so I don't have to do this ../../../../vendor/... nonsense but I did like being able to import from ./siblingModule to import from something in the same part of the hierarchy. When trying to use jspm bundle that does currently use relative imports I get
Error: ENOENT: no such file or directory, open '<project path + baseUrl>\siblingModule.js'
at Error (native)
Is there a way to configure JSPM to use relative paths for module resolution alongside baseUrl resolution?
Ideally -
module/submodule checks for any valid paths entries and then checks baseUrl/module/submodule
./module/submodule checks in currentPath/module/submodule
/module/submodule checks in baseUrl/module/submodule
As far as I can tell this isn't ambiguous, though please correct me if I'm wrong.
p.s. using jspm 0.16.45
The baseUrl is used to resolve paths.
You can configure mapping and paths in config.json, to import from these paths.
But nothing prevents you to use these kind of import:
import module from './otherModule/file.js';
If you have a problem using import, it is probably something wrong in your configuration.
See documentation: https://github.com/systemjs/systemjs/blob/master/docs/getting-started.md