search

plasticine / inject-loader

šŸ’‰šŸ“¦ A Webpack loader for injecting code into modules via their dependencies.
https://www.npmjs.com/package/inject-loader
MIT License
482 stars 47 forks source link

Cannot find module #43

Closed ericwood73 closed 6 years ago

ericwood73 commented 7 years ago

I am not having any success in using inject-loader in my project. I keep getting cannot find module 'inject-loader!../myModule'. I was using webpack 1, and I updated to webpack 2 but has not made any difference. I tried including some of the settings in my webpack.config from the examples and it did not work (and caused other module to not be found). I noticed that I get the same error in RunKit (https://npm.runkit.com/inject-loader) if I try, for example require('inject-loader!fs) or any node module on npmjs. What am I doing wrong? I've attached a simple example that causes my error.

Archive.zip

MartinDawson commented 7 years ago

Yep, examples are broke.

renatodex commented 7 years ago

I dont understand. Inject-loader is the very definitive solution for dependency injection in javascript, since it workarounds the javascript ability to emulate hard-core metaprogramming using Webpack loaders. Its wonderful, Its amazing, and its broken and less-documented.

I spend hours trying to make the inject-loader works, and i keep getting the "import/export top line error". Its really exausting.

MartinDawson commented 7 years ago

@renatodex Fwiw, I got the same to work with proxyquire.

ericwood73 commented 7 years ago

FWIW, this is what I've been using for dependency injection until I can get inject-loader to work. In the module to be injected into I add these lines (for example to inject store.js)

var dependencies = {
  store: null
};

const injectDependency = (dependencyName, newDependency) => {
  dependencies[dependencyName] = newDependency;
};

export {injectDependency};

function getStore() {
  "use strict";
  if (!dependencies.store) {
    console.log("using default store");
    dependencies.store = store;
  }
  return dependencies.store;
};

I just need to add an entry to dependencies and a get method for each dependency.

Then I can use it in my test like this:

// Mock store
let mockStore = {};
mockStore.get = sinon.stub();
mockStore.set = sinon.stub();

//authTokenHelper.internal.useStore(mockStore);
import authTokenHelper, { injectDependency } from '../utils/authTokenHelper';
injectDependency('store', mockStore);
vladimir-tikhonov commented 7 years ago

Guys, could someone create a github repo to demonstrate the issue? There is nothing we can do until someone provide us with a concrete example.

Speaking about @ericwood73 archive - seems like 

const injector = require('inject-loader!injectTestModule');

should be replaced with

const injector = require('inject-loader!./injectTestModule');

But I don't know for sure, because webpack's config is not attached.

stream7 commented 7 years ago

@vladimir-tikhonov this is the output of npm test in the webpack2-babel example:

14:30 ~/Code/inject-loader/example/webpack2-babel (master) $ npm test

> @ test /Users/niko/Code/inject-loader/example/webpack2-babel
> karma start

webpack: wait until bundle finished:
Hash: fd83ca5d08f1b1a4b210
Version: webpack 2.6.1
Time: 68ms
            Asset     Size  Chunks             Chunk Names
             main  6.09 kB    0, 1  [emitted]  main
test/main_test.js  6.09 kB    1, 0  [emitted]  test/main_test.js
chunk    {0} main (main) 3.12 kB [entry] [rendered]
    [0] /Users/niko/Code/inject-loader/dist!./src/main.js 1.25 kB {0} {1} [built] [failed] [1 error]
    [1] ./src/main.js 437 bytes {0} {1} [built]
    [2] ./src/bar.js 157 bytes {0} {1} [built]
    [3] ./src/getFoo.js 173 bytes {0} {1} [built]
    [4] ./test/main_test.js 1.1 kB {0} {1} [built]
chunk    {1} test/main_test.js (test/main_test.js) 3.12 kB [entry] [rendered]
    [0] /Users/niko/Code/inject-loader/dist!./src/main.js 1.25 kB {0} {1} [built] [failed] [1 error]
    [1] ./src/main.js 437 bytes {0} {1} [built]
    [2] ./src/bar.js 157 bytes {0} {1} [built]
    [3] ./src/getFoo.js 173 bytes {0} {1} [built]
    [4] ./test/main_test.js 1.1 kB {0} {1} [built]

ERROR in /Users/niko/Code/inject-loader/dist!./src/main.js
Module build failed: Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:74:18)
    at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
    at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:119:18)
    at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
    at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:88:19)
    at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
    at Object.<anonymous> (/Users/niko/Code/inject-loader/dist/index.js:185:18)
    at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
    at /Users/niko/Code/inject-loader/dist/index.js:67:18
    at Object.<anonymous> (/Users/niko/Code/inject-loader/dist/index.js:70:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
 @ ./test/main_test.js 17:27-56
webpack: Failed to compile.
12 06 2017 14:30:12.085:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
12 06 2017 14:30:12.087:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 06 2017 14:30:12.100:INFO [launcher]: Starting browser PhantomJS
12 06 2017 14:30:13.635:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket gxPRp3mL87P8NidMAAAA with id 72372895
PhantomJS 2.1.1 (Mac OS X 0.0.0) Main injecting code into module dependencies allows for injecting code into a subset of dependencies FAILED
    Error: Module build failed: Error: Cannot find module 'babel-core'
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:74:18)
        at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
        at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:119:18)
        at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
        at Object.module.exports.Object.defineProperty.value (/Users/niko/Code/inject-loader/dist/index.js:88:19)
        at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
        at Object.<anonymous> (/Users/niko/Code/inject-loader/dist/index.js:185:18)
        at __webpack_require__ (/Users/niko/Code/inject-loader/dist/index.js:21:30)
        at /Users/niko/Code/inject-loader/dist/index.js:67:18
        at Object.<anonymous> (/Users/niko/Code/inject-loader/dist/index.js:70:10)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10) in test/main_test.js (line 73)
    test/main_test.js:73:1251
    __webpack_require__@test/main_test.js:20:34
    test/main_test.js:153:47
    TypeError: undefined is not a constructor (evaluating 'mainModuleInjector({
            bar: { BAR: 5 }
          })') in test/main_test.js (line 157)
    test/main_test.js:157:38
PhantomJS 2.1.1 (Mac OS X 0.0.0) Main injecting code into module dependencies allows for injecting code mulitple dependencies FAILED
    TypeError: Object is not a constructor (evaluating 'mainModuleInjector({
            getFoo: function getFoo() {
              return 5;
            },
            bar: { BAR: 5 }
          })') in test/main_test.js (line 171)
    test/main_test.js:171:38
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 (2 FAILED) (0.008 secs / 0.002 secs)
npm ERR! Test failed.  See above for more details.

node v6.10.0, npm 3.10.10.

vladimir-tikhonov commented 7 years ago

@stream7 Module build failed: Error: Cannot find module 'babel-core' - seems like you haven't run npm i

stream7 commented 7 years ago

@vladimir-tikhonov nope, I did šŸ˜„ . Did you try it?

vladimir-tikhonov commented 7 years ago

@stream7 yep

~/Downloads/inject-loader/example/webpack2-babel$ npm test

> @ test /home/user/Downloads/inject-loader/example/webpack2-babel
> karma start

webpack: wait until bundle finished: 
Hash: f8d3ae70352544e12cf7
Version: webpack 2.6.1
Time: 73ms
            Asset     Size  Chunks             Chunk Names
             main  6.71 kB    0, 1  [emitted]  main
test/main_test.js  6.71 kB    1, 0  [emitted]  test/main_test.js
chunk    {0} main (main) 3.71 kB [entry] [rendered]
    [0] ./src/bar.js 157 bytes {0} {1} [built]
    [1] ./src/getFoo.js 173 bytes {0} {1} [built]
    [2] /home/user/Downloads/inject-loader/dist!./src/main.js 1.84 kB {0} {1} [built]
    [3] ./src/main.js 437 bytes {0} {1} [built]
    [4] ./test/main_test.js 1.1 kB {0} {1} [built]
chunk    {1} test/main_test.js (test/main_test.js) 3.71 kB [entry] [rendered]
    [0] ./src/bar.js 157 bytes {0} {1} [built]
    [1] ./src/getFoo.js 173 bytes {0} {1} [built]
    [2] /home/user/Downloads/inject-loader/dist!./src/main.js 1.84 kB {0} {1} [built]
    [3] ./src/main.js 437 bytes {0} {1} [built]
    [4] ./test/main_test.js 1.1 kB {0} {1} [built]
webpack: Compiled successfully.
12 06 2017 16:05:39.584:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
12 06 2017 16:05:39.586:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 06 2017 16:05:39.590:INFO [launcher]: Starting browser PhantomJS
12 06 2017 16:05:39.825:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 7lYPJ5sY_XyRSSMiAAAA with id 67972838
PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 3 SUCCESS (0.039 secs / 0.003 secs)
stream7 commented 7 years ago

@vladimir-tikhonov could you please post node/npm versions?

vladimir-tikhonov commented 7 years ago

@stream7 node v7.3.0, npm v3.10.10

stream7 commented 7 years ago

@vladimir-tikhonov could you also try a clean install? rm -rf node_modules

vladimir-tikhonov commented 7 years ago

@stream7 rm -rf inject-loader/ && git clone https://github.com/plasticine/inject-loader.git && cd inject-loader/example/webpack2-babel/ && npm i && npm test - still works. Could you try to run make integration-test in ~/Code/inject-loader/ ?

stream7 commented 7 years ago

I get the same error (with node 7.3.0)

16:34 ~/Code/inject-loader (master) $ make integration-test
./script/integration_test
~/Code/inject-loader/example/webpack1-babel ~/Code/inject-loader
yarn install v0.24.5
info No lockfile found.
[1/4] šŸ”  Resolving packages...
[2/4] šŸšš  Fetching packages...
[3/4] šŸ”—  Linking dependencies...
[4/4] šŸ“ƒ  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "0.24.6" while you're on "0.24.5".
info To upgrade, run the following command:
$ npm upgrade --global yarn
āœØ  Done in 26.19s.
yarn run v0.24.5
$ karma start
webpack: wait until bundle finished:
Hash: bf4ccb68470bd12a4685
Version: webpack 1.15.0
Time: 55ms
            Asset     Size  Chunks             Chunk Names
             main  3.72 kB    0, 1  [emitted]  main
test/main_test.js  3.72 kB    1, 0  [emitted]  test/main_test.js
chunk    {0} main (main) 1.87 kB [rendered]
    [0] ./test/main_test.js 1.1 kB {0} {1} [built] [1 error]
    [1] ./src/main.js 437 bytes {0} {1} [built]
    [2] ./src/getFoo.js 173 bytes {0} {1} [built]
    [3] ./src/bar.js 157 bytes {0} {1} [built]
chunk    {1} test/main_test.js (test/main_test.js) 1.87 kB [rendered]
    [0] ./test/main_test.js 1.1 kB {0} {1} [built] [1 error]
    [1] ./src/main.js 437 bytes {0} {1} [built]
    [2] ./src/getFoo.js 173 bytes {0} {1} [built]
    [3] ./src/bar.js 157 bytes {0} {1} [built]

ERROR in Cannot find module 'babel-core'
 @ ./test/main_test.js 17:27-56
webpack: Failed to compile.
12 06 2017 16:37:23.408:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
12 06 2017 16:37:23.411:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 06 2017 16:37:23.417:INFO [launcher]: Starting browser PhantomJS
12 06 2017 16:37:24.780:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 48R3M1bmpstMSLHtAAAA with id 95947482
PhantomJS 2.1.1 (Mac OS X 0.0.0) Main injecting code into module dependencies allows for injecting code into a subset of dependencies FAILED
    Error: Cannot find module "inject-loader!main" in test/main_test.js (line 63)
    webpackMissingModule@test/main_test.js:63:185
    test/main_test.js:63:188
    TypeError: undefined is not a constructor (evaluating 'mainModuleInjector({
                bar: { BAR: 5 }
              })') in test/main_test.js (line 67)
    test/main_test.js:67:39
PhantomJS 2.1.1 (Mac OS X 0.0.0) Main injecting code into module dependencies allows for injecting code mulitple dependencies FAILED
    Error: Cannot find module "inject-loader!main" in test/main_test.js (line 63)
    webpackMissingModule@test/main_test.js:63:185
    test/main_test.js:63:188
    TypeError: undefined is not a constructor (evaluating 'mainModuleInjector({
                getFoo: function getFoo() {
                  return 5;
                },
                bar: { BAR: 5 }
              })') in test/main_test.js (line 81)
    test/main_test.js:81:39
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 (2 FAILED) (0.006 secs / 0.004 secs)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
make: *** [integration-test] Error 1
stream7 commented 7 years ago

@vladimir-tikhonov not sure why but the second time I ran it, it worked. Now, even if I run npm test in the example directory it works too šŸ¤”

stream7 commented 7 years ago

when I run this command rm -r inject-loader/ && git clone https://github.com/plasticine/inject-loader.git && cd inject-loader/example/webpack2-babel/ && npm i && npm test it fails no matter if I use yarn or npm. However if I go back to the root directory and run yarn or npm i and then run the example test it works.

stream7 commented 7 years ago

... which is kind of expected I guess. It also works if I use the npm package:

16:59 ~/Code/inject-loader/example/webpack2-babel (master) $ git diff
diff --git a/example/webpack2-babel/package.json b/example/webpack2-babel/package.json
index 39960dd..81f5b71 100644
--- a/example/webpack2-babel/package.json
+++ b/example/webpack2-babel/package.json
@@ -8,6 +8,7 @@
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.8",
     "babel-preset-es2015": "^6.18.0",
+    "inject-loader": "^3.0.0",
     "jasmine-core": "^2.5.2",
     "karma": "^1.3.0",
     "karma-jasmine": "^1.0.2",
diff --git a/example/webpack2-babel/webpack.conf.js b/example/webpack2-babel/webpack.conf.js
index 6812c45..78b798e 100644
--- a/example/webpack2-babel/webpack.conf.js
+++ b/example/webpack2-babel/webpack.conf.js
@@ -37,7 +37,7 @@ module.exports = {
     ],
   },

-  resolveLoader: {
-    modules: ['node_modules', '../../'],
-  },
+  // resolveLoader: {
+  //   modules: ['node_modules', '../../'],
+  // },
 };
plasticine commented 6 years ago

Hey there ā€” just trying to clean up old issues. A fair bit has changed since this issues was last updated, and Iā€™m unable to re-create it, so Iā€™m going to close it out. Please open another issue if this is still a thing for you though <3