I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I need some guidance. I am experiencing an issue where webpack throws an error that it can not find a module . I was trying to add a require statement of a package(included as dependency). I got it working in another project where I don't need webpack. The code looks basically as follows:
context.subscriptions.push(
vscode.commands.registerCommand("vstodo.helloWorld", () => {
vscode.window.showInformationMessage(
"test"
);
const sfdx = require('sfdx-node');
sfdx.auth.web.login({
setdefaultdevhubusername: true,
setalias: 'HubOrg'
})
.then(() => {
// Display confirmation of source push
console.log('Source pushed to scratch org');
});
}));
My webpack config can be found here
I uploaded a simplified version of the repository here Repository
containing all the configuration files for rollup and webpack.
If I leave out the part starting at the require statement everything works again.
Any help on how to tackle this would be much appreciated, thanks
The vscode extension page has a short troubleshooting guide about this: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies.
They suggest the following solutions:
Try to make the dependency static so that it can be bundled.
Exclude that dependency via the externals configuration. Also make sure that those JavaScript files aren't excluded from the packaged extension, using a negated glob pattern in .vscodeignore, for example !node_modules/mySpecialModule.
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
I'm updating an older Webpack2 project to Webpack4 and switching the tests over to Jest but have a seemingly simple problem with a couple of the webpack related bits.
Specifically, the project structure for the troublesome bits look like this:
src
- constants
- index.js
- config
- base.js
- test.js
- dev.js
- dist.js
During testing, the classes under test use import config from 'config' so issue number one is allowing them to find the right config file. With Webpack2 this is subbed in by webpack itself, but obviously not during Jest tests.
I can resolve this by hard coding the specific test config into the moduleNameMapper in the jest config in package.json like so:
"jest": {
"moduleNameMapper": {
"^config$": "<rootDir>/src/config/test.js"
}
}
This appears to work.
The second part of my issue is allowing Jest to find named exports src/constants/index.js using syntax like import { SOME_CONST } from 'constants'.
When I try to use moduleNameMapper I get back undefined from anything that uses the constants and I believe this is because moduleNameMapper is largely used to mock out dependencies rather than supply them.
With this in mind I think I need to use modulePaths or moduleDirectories to allow the constants to be located.
I've tried the following configurations (not simultaneously) without any luck:
"modulePaths": [
"<rootDir>/src/constants",
"src/constants"
],
"moduleDirectories": [
"node_modules",
"src",
"src/constants",
"/src/constants"
"/src/constants/",
"./src/constants"
],
What should the correct config be for Jest to locate my constants?
If it's any help I'm trying to mimic this Webpack2 config in Jest
resolve: {
alias: {
constants: `${this.srcPathAbsolute}/constants/`
}
}
I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
# multi ./src/js/app.js ./dist/app.bundle.js
Then i tried to change the mode
webpack --mode development
it shows :
ERROR in Entry module not found: Error: Can't resolve './src'
Resolved
Spent a lot of time to find out the solution.
Solution: Add index.js file into src folder.
That's it!.. solved :)
During Research, I found some facts about webpack 4 :
webpack 4 doesn’t need a configuration file by default!
webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!
Met this problem when deploying on now.sh
Solution: Use Default Behavior
Move entry point to src/index.js.
This leverage webpack#4 default value for entry:
By default its value is ./src/index.js, but you can specify a
different (or multiple entry points) by configuring the entry property
in the webpack configuration.
Solution: Be Specific
As #Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:
context: __dirname + '/src',
entry: './index.js',
webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development
This worked for me. I had the same trouble, it is because of a new version of webpack
webpack version 4.46.0
Perhaps someone gets stuck during migration from webpack 4 to 5.
in case of multiple webpack config files and if anyone uses merge:
Say webpack.common.js relies on some variables passed from cli eg:
module.export = (env) => {
const {myCustomVar} = env;
return {
// some common webpack config that uses myCustomVar
}
}
When you require common config in say webpack.prod.js:
const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');
const getProdConfig = () => {....}
module.exports = (env) => {
return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};
I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.
See https://webpack.js.org/api/cli/
Version of webpack was 4.44.1
Other solutions didn't work. I solved this by adding this to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //this
},
Then npm run build and it works. At first i've tried with npx webpack. Would love to know why it works.
Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"
As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file
For Rails 6 application this steps worked for me:
1) bundle exec rails webpacker:install
system will reinstall webpacker but will rewrite few files:
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
2) Return configs to initial state:
git checkout config/webpack/environment.js
git checkout config/webpacker.yml
package.json and yarn.lock you can leave as they are
Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-
output: {
path: path.resolve(__dirname, './src'), //src instead of dist
publicPath: '/src/', //src instead of dist
filename: 'main.js' //main.js instead of build.js
}
...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.
So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.
So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.
I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)