Anyone know if this is the standard source-map for cross-builder/react now? Devtools is showing what the jsx is compiled into, not the actual jsx from the file. I've tried changing the devtool:'source-map' settings in the webpack config but not luck. This is straight out of the Crossbuilder project.
Editor:
Found my issue. The sourcemap from above was done using 'eval' from webpack devtool option. Changing it to 'source-map' fixed it.
Related
I recently start using tailwind CSS in my react app. Tailwind work when I use its class in elements. But Intellisense plugins doesn't suggest classes when I start typing.
I see other people have same problem and saw the solution others explain but after all I can't fix this.
Alos it doesn't work on html files to when I create a .html file
I used tilwind installation document on https://tailwindcss.com/docs/guides/create-react-app to install tailwind.
I play around with some setting and configuration that others said like:
I added these lines to the setting.json file setting.json file
"tailwindCSS.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html",
"plaintext": "html"
},
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
And also use "npx tailwindcss-cli#latest init" command to create tailwind.config.js file
tailwind.config.js file
But after all it still doesn't work and I don't know what else I should do.
If someone could give me a hand with this problem. Thanks
Try adding this to vscode setting.json:
"editor.quickSuggestions": { "strings": true }
That worked for me as mine seemed to have issues with auto suggestions while typing in strings.
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
I'm building a react app but when I import a .css file, the vscode doesn't show the file in the intellisense.
I'm not sure if this is a problem with vs code or something in my webpack config.
If you think that the webpack config file is important for this problem, I can post it on the question.
Edit:
When I add a .js or .jsx file, it appears normally, but .css files don't
I don't use any extensions for the paths.
VS Code doesn't support path completion for all file types. But you should get this going with the Path Autocomplete extension.
christian-kohler.path-intellisense do works great for suggesting path completion with .css
Just disable the built-in path auto-complete function in settings
{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }
Use Path Intellisense Extension in vs code
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
I see a static folder in chrome dev tools for my site which has a js subfolder that shows all my react components. I was under the impression that only the minified/webpack output file would be delivered to chrome.
You can set devtool: 'none' or if you're using webpack 4, you can try using --production flag (which effectively does the same thing) to disable sourcemaps. The legible code that you see is due to sourcemaps - your actual code is not being served.
I've created a Github repo that has all the source code related to this question. I'm able to load build/index.html in the browser after running npm install. However, when I view the sources tab in Chrome, I don't see the source maps associated with the .tsx files.
Here's a screenshot of what I see:
I've added sourceMap: true in my tsconfig.json as well as debug: true and devtool: "source-map" in my webpack.config.json. Any thoughts on what I'm missing here?
EDIT:
This might be a silly question, but do you have to use webpack-dev-server in order to see the sourcemaps?
Your tsconfig.json might be well.
Try in your webpack.config.js either devtool: "inline-source-map" or remove the two options od debug and devtool complete.
In my case I don't need them.
I had to add a filepath for the sourcemap file. Take a look at the output part of this webpack.config.js:
https://github.com/nwinger/reactreduxtodo/blob/master/webpack.config.js