ahalimkara / babel-plugin-import-static-files Goto Github PK

Seems like babel-plugin-import-static-files doesn't compose the path correctly for me while using Windows 10. This is the error:

Module build failed: Error: E:/Dropbox/Programming/client/src/app/routes/Landing/Landing.js: E:\Dropbox\Programming\client\src\static\media\E:\Dropbox\Programming\client\src\app\routes\Landing contains invalid WIN32 path characters.
    at Object.mkdirsSync (E:\Dropbox\Programming\client\src\node_modules\fs-extra\lib\mkdirs\mkdirs-sync.js:18:22)
    at Object.copySync (E:\Dropbox\Programming\client\src\node_modules\fs-extra\lib\copy-sync\copy-sync.js:42:34)
    at getFile (E:\Dropbox\Programming\client\src\node_modules\babel-plugin-import-static-files\lib\transform.js:31:23)
    at exports.default (E:\Dropbox\Programming\client\src\node_modules\babel-plugin-import-static-files\lib\transform.js:44:14)
    at applyTransform (E:\Dropbox\Programming\client\src\node_modules\babel-plugin-import-static-files\lib\index.js:30:29)
    at PluginPass.ImportDeclaration (E:\Dropbox\Programming\client\src\node_modules\babel-plugin-import-static-files\lib\index.js:40:9)

Looks like it's using the absolute paths when concatenating the root path to the image file path. And also for some reason it's dropping the image file name cover.jpg.

My babelrc:

// E:\Dropbox\Programming\client\src\.babelrc
{
  "presets": ["next/babel", "babel-preset-expo"],
  "plugins": [
    [
      "import-static-files",
      {
        "baseDir": "static/media",
        "baseUri": "/"
      }
    ]
  ]
}

The code looks like this:

// E:\Dropbox\Programming\client\src\app\routes\Landing\Landing.js

import coverImg from './cover.jpg';

And there is an image file at E:\Dropbox\Programming\client\src\app\routes\Landing\cover.jpg

Replacing my babelrc plugin import-static-files with transform-assets-import-to-string (same config) works fine, but of course the image isn't copied over.

Hi,

is there anyway to set the cdn url as env variable so it will be dynamic?

in my situation i don't set next folder at the root path.

here is my project path example
approot
--app
----next
------components
--------login
----------img
------------a.jpg
----------login.js
------static
------pages
------styles

My babelrc:
{ "plugins": [ [ "import-static-files", { "baseDir": "app/next/static/", "baseUri": "http://your.cdn.address" } ] ] }

i build this project at the root path
next build app/next

i get img path in login.js like this
import logoImg from './img/a.jpg'
then i'll get the result

var logoImg ='http://your.cdn.address/app/next/static/app/next/components/login/logo/img/a.jpg';
it's absolutely wrong,how can i fix it?