Open saracunn opened 4 years ago
saracunn
commented
4 years ago Another question: do i need Saas to do the codelabs 101 demo? is it necessary to do this for the lab npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader sass extract-loader file-loader
Nitrodist
commented
4 years ago Yup. This is disappointing.
Nitrodist
commented
4 years ago The fix is to use node 12.18.2 @saracunn
ridays2001
commented
4 years ago Okie. This happened to me too. It just refuses to work on windows. I had to install the starter code on my wsl just to use it. It doesn't work on latest node version. It works on lts/erbium though.
yukmar
commented
4 years ago i follow instruction from here: https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md and a little bit adjusting it with tutorial config and the current webpack config like postcss-loader and sass-loader. if u wanna use autoprefixer u need install the latest postcss
here my configuration for postcss-loader and sass-loader
{ loader: 'postcss-loader', options: { postcssOptions: { plugins: ['autoprefixer'] } } }, { loader: 'sass-loader', options: { implementation: require('dart-sass'), webpackImporter: false, sassOptions: { includePaths: ['./node_modules'], fiber: require('fibers') }, }, },
it works on node v14.4.0 and material-components-web v7.0.0 no need to downgrade it
raoulcapello
commented
4 years ago The fix is to use node 12.18.2 @saracunn
This did not fix it for me unfortunately, tried with v12.18.2, v12.19.0 (LTS) and v14.13.0 (latest stable).
Edit:
However, this solution did work - switching to the latest stable version 10 with nvm:
nvm i v10.22.1
Which is the same as:
nvm i lts/dubnium
blue928
commented
3 years ago This is happening to me as well. None of the solutions above have worked.
I have a 64 bit Chromebook running Debian Buster. Buster ships with a max version nodejs of 10x. I immediately started getting errors following the tutorial, and running "npm audit fix" threw pages of errors related to outdated, depreciated, or unsupported packages (fsevents, for example - a MAC OSX only package) and ultimately didn't fix the problem. So I followed directions such as this to update node to the latest version: https://linuxize.com/post/how-to-install-node-js-on-debian-10/
The homepage for the tutorial says "If you were unable to run npm install or npm start successfully, stop and troubleshoot your developer environment."
I get it, I'm responsible for my environment.
But it seems to me that the real issue here is the tutorial.
Note: I chose "beginner" when the tutorial asked me what my web development background experience was, which includes no experience using nodejs and npm.
Suggestions to fix:
(1) If it's the case that we need to use NVM to install a specific legacy environment, can you not update the instructions to reflect how to install it that way? (As of this writing, nodejs itself and the package dependencies are out of date with major version increases for all since the tutorial was created.)
(2) update the tutorial to support the most current versions of nodejs and dependencies
(3) provide more detailed instructions on how to install, troubleshoot, and update the environment. This seems more convoluted, but ultimately for new-comers this would be very educational in how to more deeply understand how nodejs works, especially when installing legacy applications. Although, I think this would be a great opportunity to have version or platform specific instructions.
(4) Even through the 101 tutorial page seems ineffective, I noticed that the github home page has 0 instructions. It would be great if you could have install instructions added there that reflect nuances as the project is updated.
In any case "troubleshooting my development environment" has led me here, and after almost two days of tinkering, I cannot get past this error:
> npm start
> mdc-101-web@0.0.0 start /home/myname/MDC/material-components-web-codelabs/mdc-101/starter
> webpack-dev-server --progress
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/bluepresley/MDC/material-components-web-codelabs/mdc-101/starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/home/bluepresley/MDC/material-components-web-codelabs/mdc-101/starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/bluepresley/MDC/material-components-web-codelabs/mdc-101/starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mdc-101-web@0.0.0 start: `webpack-dev-server --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mdc-101-web@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/bluepresley/.npm/_logs/2021-01-05T15_19_00_642Z-debug.logGiven the error above, "the internet" suggests installing webpack-cli resolves the problem. It does not. Here is a dump of my install modules where you can see it's installed:
npm list --depth=0
mdc-101-web@0.0.0 /home/bluepresley/MDC/material-components-web-codelabs/mdc-101/starter
├── UNMET PEER DEPENDENCY @babel/core@^7.0.0
├── babel-core@6.26.3
├── babel-loader@8.2.2
├── babel-preset-env@1.7.0
├── chokidar@3.4.3
├── css-loader@5.0.1
├── dart-sass@1.25.0
├── extract-loader@5.1.0
├── fibers@5.0.0
├── file-loader@6.2.0
├── ini@2.0.0
├── minimist@1.2.5
├── sass-loader@10.1.0
├── webpack@5.11.1
├── webpack-cli@4.3.1
└── webpack-dev-server@3.11.1
npm ERR! peer dep missing: @babel/core@^7.0.0, required by babel-loader@8.2.2Notice now I'm getting error unmet peer dependency. So I take this approach:
npm uninstall babel-core npm install babel-core@latest npm update
When I run NPM List again, babel-core is still at 6x. Running npm install babel-core@7 throws the following error:
npm install babel-core@7 npm ERR! code ETARGET npm ERR! notarget No matching version found for babel-core@7. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.
Running ncu -u says that all major versions are up to date.
In any case, wepback-cli is installed, and I cannot get any further than this.
Please advise. Thanks!
rsaureraccesso
commented
3 years ago @blue928 - thank you for writing this. It's exactly where I'm at and feeling with my third run at setting it up with the same result (after following the listed "fixes").
rsaureraccesso
commented
3 years ago I'm not sure if this will be of any help but for the better part of a week I've been trying to set up the MDC-101 Web tutorial on a 64 bit Win 10 machine and was met with constant frustration and errors until I finally was able to get the Shrine demo to load. Unfortunately I resorted to the shotgun approach on day three so my "solution" isn't as presentable as I'd like.
In a nutshell I individually updated all of the modules to their latest versions:
"devDependencies": { "@babel/core": "^7.12.13", "@babel/preset-env": "^7.12.16", "@webpack-cli/init": "^1.1.3", "@webpack-cli/serve": "^1.3.0", "babel-core": "^6.22.1", "babel-loader": "^8.2.2", "babel-preset-env": "^1.7.0", "chokidar": "^3.5.1", "css-loader": "^5.0.2", "dart-sass": "^1.25.0", "extract-loader": "^5.1.0", "fibers": "^5.0.0", "file-loader": "^6.2.0", "sass": "^1.32.7", "sass-loader": "^11.0.1", "webpack": "^5.21.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" },
and then changed
"scripts": { "start": "webpack-dev-server --progress" },
to
"scripts": { "start": "webpack serve --progress" },
and in the config, the sass-loader needed to be tweaked as well from
{ loader: 'sass-loader', options: { includePaths: ['./node_modules'], implementation: require('dart-sass'), fiber: require('fibers'), } },
to this
{ loader: 'sass-loader', options: { implementation: require('dart-sass'), sassOptions: { includePaths: ['./node_modules'], fiber: require("fibers"), }, } },
I just have to say that from my perspective the tutorials could use some updates and clearer troubleshooting docs. It would go a long way.
vijaynyaya
commented
2 years ago It has been a long day for me to get this working on three systems. Here are the package.json dependencies and webpack.config.js file that worked for me. Plus, Use node v12.18.2:
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"autoprefixer": "^10.4.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.3",
"babel-preset-env": "^1.7.0",
"css-loader": "^6.5.1",
"dart-sass": "^1.25.0",
"extract-loader": "^5.1.0",
"fibers": "^5.0.0",
"file-loader": "^6.2.0",
"postcss-loader": "^6.2.1",
"sass-loader": "^12.4.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}module.exports = [
{
mode: 'development',
entry: './app.scss',
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'style-bundle.js',
},
module: {
rules: [{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [autoprefixer()]
}
},
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass'),
sassOptions: {
includePaths: ['./node_modules'],
fiber: require("fibers"),
}
}
},
]
}]
},
devServer: {
compress: true,
allowedHosts: 'all'
}
},
{
mode: 'development',
entry: "./app.js",
output: {
filename: "bundle.js"
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
},
}
];
jfideler
commented
1 year ago what a joke
Working on the MDC 101 codelabs and
npm installis not working. Tried doingnpm audit fixand still got an error.