transitive-bullshit / create-react-library

CLI for creating reusable react libraries.
https://transitivebullsh.it/javascript-dev-tools-in-2022
4.78k stars 299 forks source link

Help: It looks like your Babel configuration specifies a module transformer. Please disable it #11

Closed Inateno closed 6 years ago

Inateno commented 6 years ago

Hi,

I'm using the default configuration and one of my modules trigger this error and I can't figure it out.

This module is causing the issue:

import dispatchStdEvent from "vr-ui/web_modules/utils/dispatch-std-event"

And here is the core of the module:

export default function dispatchStdEvent(stdEventName, bubbles, cancelable, element) {
  var newStdEvent
  if (bubbles === undefined || bubbles === null) {
    bubbles = true
  }
  if (cancelable === undefined || cancelable === null) {
    cancelable = true
  }
  try {
    newStdEvent = new Event(stdEventName, {"bubbles": bubbles, "cancelable": cancelable})
  }
  catch (e) {
    newStdEvent = document.createEvent("Event");
    newStdEvent.initEvent(stdEventName, bubbles, cancelable);
  }
  (element || window).dispatchEvent(newStdEvent)
}

This error occurs sometimes but the link given in the error doesn't give enough details since I'm using your default configuration I'm just lost, seems like it doesn't like the package for any reason (I can't find which one).

I got this issue few times with others modules and it was mainly because the export wasn't set to "default" or some strange things my mates did (ES8 requiring an extra module). But here, this one is so simple I have no ideas.

If I copy the whole content of my file "dispatchStdEvent" inside my package, it builds.

The problem comes only from import/export then?

Thanks

transitive-bullshit commented 6 years ago

I'm really not sure, as I've never experience this issue before. Maybe someone from rollup / babel will be able to help.

Inateno commented 6 years ago

Helpers.

Rollup config:

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'

import pkg from './package.json'

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  plugins: [
    external(),
    postcss({
      modules: true
    }),
    url(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs()
  ]
}

And Babelrc config:

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-0",
    "react"
  ],
  "plugins": [
    "external-helpers"
  ]
}
transitive-bullshit commented 6 years ago

Thanks for following up @Inateno.

I'm not seeing any differences with your rollup config or babelrc from the defaults that create-react-library uses. Would you mind pointing out what changed so I can update the template accordingly? Thanks!

Inateno commented 6 years ago

Hi, nothing changed.

I just wrote the config here as helpers for those helping me on external website ^^. So, I just resolved my issue. There is nothing to do with rollup or config it's just a stupid npm issue.

Details:

My package is in /package/panel It uses an npm dependency stored in root as "vr-ui"

The root package.json doesn't have all dependencies listed (I'm using Lerna) So by adding

"babel-plugin-external-helpers": "^6.22.0"

In my root package.json, everything is going fine.

Hope this will help anyone in the future because the error has nothing to do with what it described.

medv commented 6 years ago

@Inateno champion for coming back here to say that, cheeeeeers