Firstly, I am loving vite!
However, I am having a problem when importing my CSS file from a JS file.
The CSS file looks like this;
#tailwindcss base;
#tailwindcss components;
#tailwindcss utilities;
The error;
[vite]: Rollup failed to resolve import "about-page-globals.css" from "src/ux-about.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to 'build.rollupOptions.external'
I'm Vite in a shopify theme development project. What I want to achieve are two files, a JS and a CSS that get bundled and outputted to /dist directory.
I'm looking to use Vite across all future projects so I really want to get a good grasp of how to set it up.
Any pointers are much appreciated 🙏🏽
Related
How can I run scripts that import css modules?
I'm writing a typescript migration script that I'd like to run via ts-node. Ideally, my codebase would be organized such that the script's dependencies never touch React components, but that's not the case. The script ultimately imports React components and thus css modules, so ts-node fails because it doesn't understand css modules:
RenderableInline.tsx(4,20): error TS2307: Cannot find module './styles/RenderableInline.module.scss' or its corresponding type declarations.
Only webpack understands how to build css modules, since I've configured it via a css-loader.
The only precedent for this I've found is jest, which has some configuration option for mocking out css modules so it can import these files without error: https://jestjs.io/docs/webpack.
How can I run a typescript script that has dependencies on css modules? Is there someway to do this via ts-node? Or does webpack have some script running feature?
Add a global .d.ts file that provides direction on how .css files should be handled.
Such as src/global.d.ts with the following contents:
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
May also be helpful to add the typescript-plugin-css-modules plugin. Note though that this only helps during development using VSCode but has no effect during compilation.
While I generally got this working, I am still facing problems to get this to work correctly with ts-node-dev - probably related to ts-node not loading these type files by default Missing Types. Unfortunately even using the --files directive, I couldn't get this to work.
I have a two-year-old AngularJs 1.x project, which is built with Gulp for development and Grunt for production (don't ask me why; I don't know either).
The build process is basically:
Compile all scss files into one css file
Merge all JS files into one JS file. We are not using any import mechanism. Each file is basically one of AngularJs' controller, component, service or filter. Something like this:
angular.module("myApp").controller("myCtrl", function() {//...});
Merge all html templates into one JS file. Each template is hardcoded with $templateCache.
Moving assets like images and fonts into the build folder.
Moving third-party libraries into the build folder.
Now I want to switch to webpack for this project. I want to incrementally modernize this project, but the first step would be just building it with webpack with a similar process like the above. I would like to keep the code base as much the same as possible. I don't want to add import for all the JS files yet. There are too many. I would also like to add a babel-loader.
I have some basic concepts about webpack, but never really customized the configuration myself.
Would anyone please give me some pointers? Like which loaders/plugins would I need, etc.? Thanks!
My process to do such a transition was gradual, I had a similar Grunt configuration.
These are my notes & steps in-order to transition to Webpack stack.
The longest step was to refactor the code so it will use ES6 imports/exports (yeah, I know you have said that it is not a phase that you wanna make, but it is important to avoid hacks).
At the end each file looks like that:
//my-component.js
class MyComponentController { ... }
export const MyComponent = {
bindings: {...},
controller: MyComponentController,
template: `...`
}
//main.js
import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);
In order not going over all the files and change them, we renamed all js files and added a suffix of .not_module.js.
Those files were the old untouched files.
We added grunt-webpack as a step to the old build system (based on Grunt).
It processed via Webpack all the new files (those that are without .not_module.js suffix).
That step produced only one bundle that contains all the files there were converted already, that file we have added to concat step.
One by one, each converted file gradually moved from being processed by Grunt tasks to be processed by Webpack.
You can take as a reference that webpack.config.
Good luck.
I am working on a project which is used typescript, vue and webpack together. I have created some components and i can use them by importing. However i have different js files in another root folder like site.js, ruler.js, color.js, speech.js, drware.js and etc. Schema is like below
+|dist
----build.js
+|src
----index.ts
+|main
----Header.vue
----Footer.vue
----Body.vue
+|lib
----site.js
----ruler.js
----drawer.js
----color.js
webpack config is getting index.ts from src folder which is shown above. When I don't use some functions (like jquery plugins or some special funciton) everything is fine. But when i use a functon from site.js webpack fives error like cannot resolve "ruler" from site.js
I have tried to concat by giving second entry in webpack.config.js but it didn' solve my problem. I wonder how to to resolve external js files in vue or ts files using webpack. I alson tried
require(""../src/site.js)
but it didn't work too.
Edit : If i concat the js files manually and give it as script source on html it works without problem but i cannot merge all files like or i don't want to use "gulp" to concat them
Have you tried including a script-loader into your webpack's configuration?
Webpack is a bundler, not a script loader itself. I would recommend you to follow webpack's official instructions to add a script loader.
Good luck!
I will try to be concise, I must work on a Reactjs project for school project, my task is to take a existing html/css theme and and put it in React components.
But I have a problem since the start, I used CreateReactApp for a clean start and import index.css of the theme.
Create a basic form base on the theme and have this error. (She disapear when I delete index.css)
Error I see
Failed to compile
./src/css/index.css
Module not found: Can't resolve '../images/category-1-bg.jpg' in
'C:\Users\50031\Documents\React-Project-master\src\css'
Structure of the project is that
Structure project
Thanks so much, I already check for an answer but I suck as hell in code and understand nothing.... Sorry
Your images directory is not inside css directory and that is what the error says. This is because somewhere in your index.css you have not assigned correct path for the images. Assign correct paths to the images in your index.css and the app should compile.
Install css-loader so that it will include the image during build time.
While there is a lot of questions and documentation on SystemJS, I still don't understand the import syntax.
Specifically, why can typescript not find ng-boostrap.js using this code:
import { createPlatform } from '../../node_modules/#ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap',
which is directly importing the file, but this code works:
import {createPlatform } from './node_modules/#angular/core/bundles/core.umd.js';
where my map in systemjs.config.js contains the line:
'#angular/core': 'npm:#angular/core/bundles/core.umd.js'.
Why I can not import directly from node_modules using systemJS?
Note: Though the solution below works, some of the information is incorrect. Please see discussion below in comments.
First of all, TypeScript doesn't know anything about JS files. It knows how to produce them, but doesn't know how to compile against them. So I am not sure how you actually got
import {createPlatform } from './node_modules/#angular/core/bundles/core.umd.js';
to compile in your TypeScript code.
We are able to do
import {createPlatform } from '#angular/core';
in TypeScript, because TypeScript is already looking in the node_modules. And #angular/core, if you look inside your node_module, has the directory #angular/core, with an index.d.ts file. This is the file that our TypeScript code compiles against, not the JS file. The JS file (the one in the above first code snippet) is only used at runtime. TypeScript should know nothing about that file.
Using the second snippet above, when the TypeScript is compiled to JS, it looks like
var createPlatform = require('#angular/core').createPlatform;
As runtime, SystemJS see's this, then looks at the map configuration, and maps the #angular/core to the absolute file location, and is able to load that file
'#angular/core': 'npm:#angular/core/bundles/core.umd.js'
This is the pattern that you should follow with the ng-bootstrap. Use the import that points to the TypeScript definition file, so that it can compile
import { ... } from '#ng-bootstrap/ng-bootstrap';
If you look in the node_modules/#ng-bootstrap/ng-bootstrap directory, you should see the index.d.ts file. This is what TypeScript will use to compile against. When it is compiled to JS, it is compiled the following
var something = require('#ng-bootstrap/ng-bootstrap').something;
And in the SystemJS config, we need to map #ng-bootstrap/ng-bootstrap to the absolute path of the module file, otherwise SystemJS won't know how to resolve it.
'#ng-bootstrap/ng-bootstrap': 'npm:#ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
One of the key take-aways from this, is to understand the difference between compile-time and runtime. Compile type is TypeScript, which doesn't know anything about JS files, as those are runtime files. SystemJS is the one that needs to know about the runtime (JS) files.