Got TypeError: Cannot read property 'ClampToEdgeWrapping' of undefined

[jack45j]

Hi everyone! I am in progress with a Vue.js project and facing some issue when I tried to use blotter.js for my resume page. Here is my script block below. I tried to import blotter.min.js and channelSplitMaterial.min.js into my file. According to the document says, there is no need to import three.js or install modules but I got a TypeError: Cannot read property 'ClampToEdgeWrapping' of undefined Error. After some research I thought the ClampToEdgeWrapping seems to be a module of three.js. Am I misunderstanding something? Really sorry that I know that maybe this is not a blotter.js issue but a Vue.js issue but there are nothing can reference about blotter with vuejs even within Vue's Chinese forum.

<script>
import '../../build/blotter.min.js'
import '../../build/channelSplitMaterial.min.js'
export default {  
  
  data() {
    return {
      name: 'Landing',
      bgImg: '.../src/assets/bgImg/[email protected]',
      url: '.../src/assets/avatar.png'
    }
  },
  mounted() {
    this.blob()
  },
  methods: {
    blob() {
      const text = new Blotter.Text('very cool', {
        family: "'EB Garamond', serif",
        size: 100,
        paddingLeft: 0,
        paddingRight: 0
      });

      let material = new Blotter.ChannelSplitMaterial();

      // Set material opts
      material.uniforms.uOffset.value = 0.08;
      material.uniforms.uRotation.value = 45;
      material.uniforms.uApplyBlur.value = 1;
      material.uniforms.uAnimateNoise.value = 1;


      let blotter = new Blotter(material, {
        texts: text
      });

      let scope = blotter.forText(text);
      let elem = document.getElementById('blotz');
      scope.appendTo(elem);
    }
  }
}
</script>

TypeError: Cannot read property 'ClampToEdgeWrapping' of undefined
    at Object.eval (blotter.min.js?b6c6:25755)
    at Object.require.1.three (blotter.min.js?b6c6:25776)
    at o (blotter.min.js?b6c6:25750)
    at r (blotter.min.js?b6c6:25750)
    at Object.eval (blotter.min.js?b6c6:25750)
    at eval (blotter.min.js:29989)
    at Object../src/build/blotter.min.js (0.js:214)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/LandingPage/index.vue?vue&type=script&lang=js&:2)

[bradley]

To be clear, you didn't do a custom build of Blotter or anything, you just pulled it directly from the source here?

Either way, is there any way you can provide a preproduction of the error inside of a codepen or a jsfiddle?

Blotter should already be including the modules it relies on, as outlined here (but I assume you've already seen that).

[jack45j]

Yes. I didn't do any custom build of Blotter or anything, I just pulled it directly from the sources. Here is my repo and this is my personal resume website.

I'm an iOS developer and this is my first time working on vue.js. Please forgive me about the disastrous code style and path structure. Get down to business, I placed the blotter files in /src/components/Blotter and include it in /src/components/LandginPage/index.vue You can use npm run serve to compile the website and then u can see the error in console.

[orest22]

@bradley I am getting the same error. Installed script via npm.

[jack45j]

Finally got some solutions. I put Blotter files into /static folders and input it as normal and then anything just work fine. I think there are some unexpected incorrect references occurred if we import them by relative path in Vue.js.

[orest22]

Good to hear it. But the source code has to be updated with a universal module definition in mind.

[jpolitowski]

Did anyone ever find a solution to this that didn't involve putting the script in a static folder? I'm getting this when I run tests