JeffreyWay

@lorvent Hard to help if you don't paste in your webpack.mix.js file.

Demers94

@TaylorOtwell I just tried again with the new package.json (from a fresh install) and it now works. Thank you!

lorvent
lorvent
1 year ago (14,235 XP)

@JeffreyWay it has default code

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
lindstrom

UPDATE

On a fresh install of L5.4.3, after npm install and npm run dev, it works perfectly. The issues I'm seeing below must be related to my rather insane webpack.mix.js file.

I rm -rf node_modules/ then npm install.

Using new package.json, and my webpack.mix.js, on Windows 10 with latest (7.4) nodejs I get the following when I npm run dev:

These dependencies were not found in node_modules:

* codemirror
* moment
* ../fonts/bootstrap/glyphicons-halflings-regular.eot
* ../fonts/bootstrap/glyphicons-halflings-regular.woff2
* ../fonts/bootstrap/glyphicons-halflings-regular.woff
* ../fonts/bootstrap/glyphicons-halflings-regular.ttf
* ../fonts/bootstrap/glyphicons-halflings-regular.svg

I do have another issue with a vendor js file where webpack is trying to resolve a relative directory within that file and can't, but that's not related.

JeffreyWay

@lindstrom - Hmm, and moment and codemirror are in your package.json file, and have been installed?

callam
callam
1 year ago (9,055 XP)

npm rebuild node-sass fixed it for me. The node-sass binding needed to be rebuilt for my current environment.

dev_hernandez2

@TaylorOtwell that work perfect, thanks.

lindstrom

@JeffreyWay No -- I don't have them in my package.json as they are not dependencies of my project. I think they're being derived as dependencies from some vendor files I have in there for my admin theme (ProUI). Looking at it again now.

JohnnyL

@TaylorOtwell Package.json fixed it for me. Thanks!

lindstrom

@JeffreyWay

I found that codemirror appears to be an optional dependency of Summernote (jQuery and Bootstrap are it's only published deps: https://github.com/summernote/summernote).

With the same fresh install of L5.4.3.

bower install summernote

Edit webpack.mix.js

mix.copy('bower_components/summernote/dist/summernote.css', 'resources/assets/css/vendor/summernote');
mix.copy('bower_components/summernote/dist/summernote.min.js', 'resources/assets/js/vendor/summernote');

mix.js(['resources/assets/js/vendor/summernote/summernote.min.js', 'resources/assets/js/app.js'], 'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Run npm run dev results:

This dependency was not found in node_modules:

* codemirror

Did you forget to run npm install --save for it?
                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.28 MB       0  [emitted]  [big]  app
                                                             /css/app.css    685 kB       0  [emitted]  [big]  app
                                                        mix-manifest.json  66 bytes          [emitted]
                 ../resources/assets/css/vendor/summernote/summernote.css   13.2 kB          [emitted]
               ../resources/assets/js/vendor/summernote/summernote.min.js   92.2 kB          [emitted]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
// snip irrelevant

Here is the relevant section of summernote.js where it checks for codemirror:

  var hasCodeMirror = !!window.CodeMirror;
  if (!hasCodeMirror && isSupportAmd && typeof require !== 'undefined') {
    if (typeof require.resolve !== 'undefined') {
      try {
        // If CodeMirror can't be resolved, `require.resolve` will throw an
        // exception and `hasCodeMirror` won't be set to `true`.
        require.resolve('codemirror');
        hasCodeMirror = true;
      } catch (e) {
        // Do nothing.
      }
    } else if (typeof eval('require').specified !== 'undefined') {
      hasCodeMirror = eval('require').specified('codemirror');
    }
  }

Finally, from within the emitted app.js I see the following which appears to have some relevance:

      CodeMirror;agent.hasCodeMirror && (agent.isSupportAmd ? Promise.resolve().then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [!(function webpackMissingModule() { var e = new Error("Cannot find module \"codemirror\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())]; (function (a) {
    CodeMirror = a;
  }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}).catch(__webpack_require__.oe) : CodeMirror = window.CodeMirror);var Codeview = function Codeview(a) {

Let me know if I can offer anything else.

--- UPDATE --- Appears to just be the way webpack resolves dependencies. See: https://github.com/epoberezkin/ajv/issues/117

So, in my case, I use bower and copy just the assets/files I need over to resources/assets/vendor/js/foo (or css/scss). By doing this, I don't have to wait for or worry about bower/npm installing every time I deploy. The only thing I run at production is gulp --production (now) which just grabs my assets (which are versioned), builds everything and puts it in /public.

It would seem like if I wanted to move to Laravel Mix, I'd have to switch to npm to manage all of my third-party libraries and npm install (yarn really) on production, then let weback resolve everything out of node_modules/.

I'd rather not change this aspect of my build process because I personally find it to be pragmatic. On the other hand, yarn may make this build time less of an issue than it was in the past and maybe its time to let go of bower anyway. We'll see.

LG0012
LG0012
1 year ago (5,280 XP)
GilG
GilG
1 year ago (14,170 XP)

To fix the build I had to remove the node_modules folder and update the package.json.

npm rebuild didn't help.

staticwave

I also had to remove node_modules and update the package.json then do npm install and npm run dev

lorvent
lorvent
1 year ago (14,235 XP)

removing node_modules and installing again with new package.json works for me too.

LG0012
LG0012
1 year ago (5,280 XP)

Also webpack ssl not working, something wrong with self sign certificate. :/

I can't even add my own forge ssl .cert and .key files.

It's strange that webpack do not supports .cert and .key files, istead of that, they want .pem.. Before i was using gulp with browsersync, and that one supports .cert and. key like a charm.. Why webpack don't have that funcitonality? Maybe someone knows, i googled all the internet regarding that issue, and i could't find the solution..

Please sign in or create an account to participate in this conversation.