Comments (4)
Enabling "type": "module" in package.json
resolves this warning.
from vite_ruby.
Sorry if this is a silly question, my JS environment managing knowledge is pretty basic... @jon-codes are you saying that's a change to vite-ruby that is required (vite-ruby's own package.json?), or this is something I just put in my own package.json? Can you provide an example of how to enable "type": "module" in package.json
? Thanks!
from vite_ruby.
Sure @jrochkind, you can enable it in your own package.json
.
The "type"
key is a Node.js-specific option, which you can find documented here. Using the "module"
value will cause Node.js to interpret Javascript files as ECMAScript modules (ESM) rather than CommonJS modules (CJS).
Here's an example from my vite-ruby
project:
// package.json
{
"type": "module",
"scripts": {
"format": "prettier --check .",
"format:fix": "prettier --write .",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@hotwired/turbo-rails": "^8.0.2"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^5.0.0",
"@types/node": "^20.11.19",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-plugin-simple-import-sort": "^12.0.0",
"postcss": "^8.4.35",
"postcss-nesting": "^12.0.2",
"prettier": "^3.2.5",
"vite": "^5.1.3",
"vite-plugin-rails": "^0.5.0"
},
"engines": {
"node": "20.11.1",
"npm": ">=10"
},
"os": [
"linux",
"darwin"
]
}
I'm using a .js
file extension for the Vite config. If using .ts
the compiler may create CJS modules by default rather than ESM modules.
// vite.config.js
/* esbuild-env node */
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import RailsPlugin from "vite-plugin-rails";
// ESM modules do not have `__filename` and `__dirname` constants, unlike CJS modules.
// See: https://nodejs.org/api/esm.html#differences-between-es-modules-and-commonjs
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
export default defineConfig({
plugins: [RailsPlugin()],
resolve: {
alias: {
"@vendor": resolve(__dirname, "vendor"),
"@fonts": resolve(__dirname, "assets/fonts"),
"@icons": resolve(__dirname, "assets/icons"),
"@images": resolve(__dirname, "assets/images"),
"@stylesheets": resolve(__dirname, "assets/stylesheets"),
},
},
});
from vite_ruby.
Thank you for that explanation! I will have to go through it more slowly and try things out.
I'm using a .js file extension for the Vite config. If using .ts the compiler may create CJS modules by default rather than ESM modules.
vite-ruby generator right now creates vite.config.ts
Do you think this needs/should be changed? I think the file does not actually use anything that's non-JS typescript or anything like that? Not sure why it has had .ts
from the start. @ElMassimo ?
It looks like possibly the generated file needs to be different too, per your comments on __filename
and __dirname
? I am not a maintainer, but I wonder if you want to submit a PR, as you understand what's up?
from vite_ruby.
Related Issues (20)
- Automatic refresh for SSR server HOT 1
- Some assets are randomly missing after deployment with Capistrano HOT 1
- yarn 3 Missing Executable
- How do I turn off the Inter-roman and Inter-italic fonts?
- Configurable option for location of vite.config.ts HOT 2
- Update rack-proxy to at least 0.7.5 HOT 2
- resolve_entries is slow when using vite_javascript_tag for very large and complex tsx react/relay files HOT 2
- `An import map is added after module script load was triggered` in console. HOT 4
- Fail to load styles from js files when it conflicts with stylesheet tag
- Support new default manifest location in Vite v5 HOT 9
- plugin_legacy is not working as expected
- Allow `.` as a valid option for `sourceCodeDir`
- 'conflicting chdir during another chdir block' calling vite_asset_path
- Can't find SVG file in manifest after upgrade to 3.5.0 HOT 2
- Disabling cssCodeSplit breaks CSS file location used by tag helper in Rails HOT 1
- vite-rails live demo on Heroku is broken HOT 2
- clean command not detecting versions properly HOT 1
- Calling `bin/vite ssr` just exits with no errors
- vite_hanami in hanami 2.1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite_ruby.