phoenix-liveview 应用程序中 NPM 的 ModuleBuildError
ModuleBuildError with NPM in phoenix-liveview app
背景
背景
我正在尝试 运行 2021 年 2 月在 Elixir 柏林聚会中展示的演示应用 desktop-example-app：
- https://www.youtube.com/watch?v=aFpBHQ0YEw4&t=2016s
- https://github.com/elixir-desktop/desktop-example-app
我可以启动应用程序，但是当它打开时它总是崩溃。
问题
虽然它一直出错，但我注意到以下错误：
ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/webpack/lib/NormalModule.js:316:20
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
@ ./js/app.js 4:0-25
@ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 1.76 KiB {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
我试过的
所以，为了解决这个问题，我做了：
cd assetsnpm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-js npx browserslist@latest --update-dbcd ../mix phx.digest
而我 运行 它通常是：./run
问题
我相信我已按照所有说明进行操作，但我仍然无法使该应用程序运行。
我做错了什么？
这对我来说很难。
基本上，问题是node-sass。要解决此问题，我必须将其删除并改为安装 sass：
cd assets/
npm uninstall node-sass
npm instal sass
cd ../
mix phx.digest
mix phx.server
这解决了问题。
更多信息：
https://elixirforum.com/t/modulebuilderror-with-npm-in-phoenix-liveview-app/42060/6
背景
背景
我正在尝试 运行 2021 年 2 月在 Elixir 柏林聚会中展示的演示应用 desktop-example-app：
- https://www.youtube.com/watch?v=aFpBHQ0YEw4&t=2016s
- https://github.com/elixir-desktop/desktop-example-app
我可以启动应用程序，但是当它打开时它总是崩溃。
问题
虽然它一直出错，但我注意到以下错误：
ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/webpack/lib/NormalModule.js:316:20
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
@ ./js/app.js 4:0-25
@ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 1.76 KiB {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 14.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
at module.exports (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at getDefaultSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (/home/pedro/Workplace/fl4m3/desktop-example-app/assets/node_modules/sass-loader/dist/index.js:40:61)
我试过的
所以，为了解决这个问题，我做了：
cd assetsnpm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-jsnpx browserslist@latest --update-dbcd ../mix phx.digest
而我 运行 它通常是：./run
问题
我相信我已按照所有说明进行操作，但我仍然无法使该应用程序运行。 我做错了什么？
这对我来说很难。
基本上，问题是node-sass。要解决此问题，我必须将其删除并改为安装 sass：
cd assets/
npm uninstall node-sass
npm instal sass
cd ../
mix phx.digest
mix phx.server
这解决了问题。
更多信息： https://elixirforum.com/t/modulebuilderror-with-npm-in-phoenix-liveview-app/42060/6