Why is create react app not importing a css file? - javascript

[enter image description here][1]Problem: no CSS in output.
Methods tried to fix:
renaming styles.css to styles.module.css -- fail
manual load Webpack in terminal even though it shouldn't need it with create-react-app -- fail
Tried the syntax - import styles from ./styles.module.css; - and also just import ./styles.module.css; and import styles.module.css; -- fail
So I've been googling for hours and nothing has seemed to do the trick. A link is provided with what the code. when it runs, the terminal clearly says line 4 is defined but never used as is evident by the greyed out line in visual studio code.
https://i.stack.imgur.com/X4PdW.png
https://i.stack.imgur.com/cdKYB.png
I appreciate any help. Thank you in advance

What i have seen you did was import styles from "./styles.module.css" but not used styles
As well as import "./styles.module.css" not sure this will work as well because your styles will be scoped. (This i did not test it is just assumption)
This is from create react app docs
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
If you add module in file name of styles.
Use import styles from './Button.module.css'; and then use styles to access content in file something like styles.[class-name-from-Button.module.css]
If you just have Button.css just call import './Button.css'; somewhere on top, do not add module in between Button and css

Related

Unable to import an API module into a nested component (Vue)

I've been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.
This is the simplest I could reduce the issue down to.
https://codesandbox.io/s/rough-tree-fqj7o
Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.
As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.
The things I've found that fix this are:
Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
Commenting out the TopNav component in main.js (...also not an option for us)
Importing the TopNav component in App.vue with a relative import or #/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or #/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I'd prefer the #/components shorthand and that still leaves the root cause undetermined.
I'm using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.
I've been spinning my wheels for a week trying to figure this out and just...cannot. Does anyone have any ideas for what may be happening?
It seems like a race condition in Webpack, using parallel builds, but I'm honestly not sure. I can see CreateDogsModal being pulled in from two places, starting from main.js:
'main.js'
- import 'App.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
- import 'router/index.js'
- import '#/views/Dogs/DogsCreate.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
One workaround is to remove the race by making the CreateDogsModal an async component in DogsCreate:
// DogsCreate.vue
import { defineAsyncComponent } from "vue";
import { CreateTemplate } from "#/components";
export default {
name: "DogsCreate",
components: {
CreateTemplate,
CreateDogsModal: defineAsyncComponent(() => import("#/components/CreateDogsModal.vue")),
},
};
demo

prismjs not working between different routes using vuerouter in vuejs

I've imported prism.js globally in main.js file.
Code block syntax highlighting working fine in Home components, but after routing to another page using vue-router, there is no effect.
in main.js
// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'
in my about page component...
<pre><code class="language-swift">
private func setupSubviews() {
let value = "Loading code block";
}
</code></pre>
Unable to understand what's wrong here. Is there any way I can import node_modules prismjs files globally? I thought keeping main.js will work fine, but it's not adding globally between routes...
Once you install it with npm the best approach is to import it whenever it is used in each component seperately with import Prism from 'prismjs'. Just make sure to use the Prism.highlightAll() method in the component where you're using prism after the DOM is rendered whether in mount() hook or in the updated Vuejs hook using nextTick method to make sure all the DOM is rendered before using prism. So in your case you should use it this way:
import Prism from "prismjs"
updated: function () {
this.$nextTick(function () {
Prism.highlightAll();
})
}
make sure you call highlightAll in yor components seperately and not globaly.

CSS modules importing doesn't work despite the righ compilation

I've got a problem with importing css modules to react component.
import React from 'react'
import styles from '../App.css'
const Button = () => (
... className={styles.button}...
)
export default Button;
There is no compilation error and stuff like that. Everything seems to by right, but when I run server button looks by default as with no css.
You need to use
Module css must have name App.module.css
Then import
import React from 'react';
import styles from './App.module.css';
And use className={styles.button}
The issue is probably in your webpack config - please share
In the css-loader options, ensure the modules option is set to true

Issue importing external modules from component included with react-loadable

I've a component loaded using react-loadable (5.4.0) that also loads some other local and external libraries:
import { validationAPI, docstringAPI, autocompleteAPI } from 'utils/request';
import something from './something';
import CodeMirror from 'react-codemirror';
import CM from 'codemirror';
import 'codemirror-docs-addon';
import 'codemirror-docs-addon/lib/main.css';
class MyComponent extends React.Component {
render() {
return (
<div>What I do here it doesn't matter</div>
)
}
}
export default MyComponent
And this is the defined loadable:
import React from 'react';
import Loadable from 'react-loadable';
const Loading = () => (
<div>
Loading stuff
</div>
);
const LoadableComponent = Loadable({
loader: () => import('./MyComponent'),
loading: Loading,
});
export default (props) => (
<LoadableComponent {...props} />
);
The issue I have: if the module I include asynchronously also imports local modules never imported before from my app, I get this error:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: object.
Check the render method of LoadableComponent.
in LoadableComponent
...
For example: in the code above I have this ./something imported. If this module has never been loaded before in my app I get the error above.
If I:
import the module somewhere else (as for validationAPI, which is imported with no issues)
remove the import
...the app works and I've the async behavior.
Note: If the imported stuff is used or not doesn't matters.
I also tried to move the something module somewhere else, but this seems not related to the module position or to relative import syntax.
Note also that externals libraries does not give me any issues: for example: the codemirror library is included only in that file, but it still works. Only local modules give me the issue.
The only workaround found: not import anything never imported before, but include the something module content inline in the component's file.
This is acceptable but bloat the file size a bit.
I'm not sure this is an issue with react-loadable or webpack or something else.
Any suggestion?
I'm running into the same issue as you... Did you ever figure it out?
I was able to get it to work with Loadable.Map(). But I feel I shouldn't even have to do it this way!
https://github.com/jamiebuilds/react-loadable#loading-multiple-resources

react compile error, Module not found

I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.

Categories